BIYUEHU，严禁转载

HTML
- 网站与网页
  - 关于HTML
  - Web标准
- HTML标签
  - 标签关系
  - 基本结构标签
- 常用标签
  - 标题标签
  - 段落标签和换行标签
  - 文本格式化标签
  - 盒子标签
  - 图像标签
  - 超链接标签
  - 注释标签与特殊字符
- 表格标签
  - 表格结构标签
- 列表标签
  - 无序列表
  - 有序列表
  - 自定义列表
- 表单Form
  - 表单控件
    - input输入表单标签
    - iabel标签
    - select下拉表单标签
    - textare文本域标签

HTML

网站与网页

网站(Website)是因特网(Internet)上根据一定的规则，使用HTML等知足的用于展示特定内容的网页的集合
网页是网站中的一"页"，通常是HTML格式的文件，使用浏览器阅读

网站的后缀通常是htm或html

关于HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言
HTML不是一种编程语言，只是一种标记语言

Web标准

Web标准是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的组合。W3C是国际最著名的标准化组织
Web标准由结构(Ptructure)、表现(Presentation)、行为(Behavior)
结构写于HTML文件中，表现写于CSS文件中，行为写于JavaScript文件中

HTML标签

HTML中的标签分为两种:双标签、单标签
1.双标签:以<html>`一对标签为例，</>`表示结束
2.单标签:仅有一个标签而非成对存在，大部分标签均为双标签，常见的单标签有:<img />、<link />、<br />、<meta>

标签关系

包含关系

<head>
    <title></title>
</head>

并列关系

<head></head>
<body></body>

基本结构标签

每个网页都会有基本结构标签(又称骨架标签)
\<html>\</html>:页面中最大的标签，称为根标签
\<head>\</head>:文档的头部，head必须设置的标签是title
\<title>\</title>:文档的标题
\<body>\</body>:文档的主题

骨架快速生成
使用VSCode文本编辑器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE >语句用于向浏览器说明该网页所使用的html版本，<!DOCTYPE html>则代表使用的是最新的HTML5
\<html lang="">:向浏览器说明该网页的语言(不影响网页中的文字内容)，en英语、zh-CN中文简体、ja日文
\<meta charset="">:标签有多个属性取值，charset用于设置网页的字符集(Character set)，是多个字符的集合，便于计算机能够识别和存储各种文字。charset常用的值有:GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符，因此现在网页基本都用UTF-8，不要写成utf-8、UTF8！！！

标签中的属性与值的形式是key='value'即属性="值"

常用标签

标题标签

\<h1>-<\h6>共有六级，数字越写，标题越大，标题标签内的文字默认加粗

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

段落标签和换行标签

\<p>用于分段，\<br>用于换行

你这样写

是不可能分段的在网页里
<p>这是一个段落</p>
<p>这是另一个段落，这才是正确的分段方法</p>
这个是分<br/>
行，强制的

文本格式化标签

加粗、倾斜、~~删除线~~、下划线，支持套娃

语义	标签	说明
加粗	或	推荐使用前者，语义更强烈
倾斜	或	推荐使用前者，语义更强烈
删除线	或	推荐使用前者，语义更强烈
下划线	或者	推荐使用前者，语义更强烈

加粗的属性为重点，其它的可以不记

盒子标签

\<div>\</div>与\<span>\</span>，均没有具体语义，定义大小盒子装内容，方便布局；
div一行只支持一对，单独一行，大盒子(类似于标题标签，自动分行)
span相反，小盒子

图像标签

\<img scr="图片路径"/>典型的单标签，支持相对路径、绝对路径或URL超链接
属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图像不能显示时显示的文字，替换文本
title	文本	鼠标放到图像上显示的文本，提示文本
width	像素	图像宽度
height	像素	图像高度
~~border~~	像素	图像边框粗细(非重点，多用CSS实现)

像素:PX，删除线的非重点不记

超链接标签

\<a href="链接">\</a>，链接分类:

外部链接，如<a href="https://iamlolicon.work">糊狸的博客</a>
内部链接，如<a href="idnex.html">首页</a>
空链接，无明确链接目标时，<a href="#"></a>
下载链接，href内指向文件、压缩包等类型，点击则会下载
网页元素链接，文本、图像、表格、音频、视频均可加超链接

锚点链接，点击时跳转到网页的指定位置，href属性内需要加#+ID名，id名在标签内用id属性定义

<!-- 锚点链接示意 -->
<h2>目录</h2>
<a href="#two">点我跳到第二段</a>

<h2>第一段</h2>
 <p>假设这里有大一段的文字...</p>
<h2 id="two">第二段</h2>
 <p>假设这里有大一段的文字...</p>
<!-- 同理，可以写一个跳转到网页顶部，id绑定到body上 -->

target属性:两种取值，_self与_blank，用于打开网页的形式，前者是直接在浏览器当前标签页中打开，后者是在新标签页中打开

注释标签与特殊字符

HTML中注释以\，VSCode中可用快捷键Ctrl + /快速注释

表格标签

<table>
    <tr>
        <td>单元格内的文字</td>
    ...
    </tr>
    ...
</table>

<table></table>用于定义表格的标签
<tr></tr>用于定义表格中的行，必须在table标签内
<td></td>用于定义表格中的单元格，必须在tr标签内
表格默认不显示表格线，因此，可用table表格布局网页文字内容等元素，实际效果简洁明了的同时，在代码中同样方便阅读

属性

属性	属性值	说明
align	left、center、right	表格相对周围元素的对齐方式
border	1或""	是否有边框，默认为""，表示无边框
cellpadding	像素	单元边沿与其内容之间的空白，默认1
cellspacing	像素	单元格之间的空白，默认2
width	像素或百分比	表格的宽度
height	像素或百分比	表格的高度

均不是重点，但单词要记住，因为都用CSS来定义

表格结构标签

表格可能很长，为了更好的表示表格的语义，于是便有了这玩意
<thead>表格的头部区域，<tbody>表格的主体区域，这样可以更好的分清表格结构

列表标签

无序列表

ul标签内仅能放li标签，li标签内可放任何标签

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>    
<ul>

有序列表

ol标签内仅能放li标签，li标签内可放任何标签

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>    
<ol>

自定义列表

dl标签内仅能放dt、dd标签，两标签内可放任何标签

<dl>
    <dt>标题</dt>
    <dd>列表1</dd>
    <d>列表2</dd>
    <dd>列表3</dd>    
<dl>

表单Form

一个完整的表单通常由表单域、表单控件(又称表单元素)、提示信息三部分构成

<form action-"url地址" method="提交方式(get或post)" name="表单域名字">
各种表单元素控件
</form>`

表单控件

input输入表单元素
select下拉表单元素
textarea文本域元素

input输入表单标签

type属性的属性值如下:

属性值	说明
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会情况跟你表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器(即上面的URL地址)
text	定义单行的输入字段，用户可在其中输入文本，默认宽度20个字符

input其它属性:

属性	属性值	说明
name	由用户自定义	定义input元素的名称
value	由用户定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度
id	由用户自定义	相同的id用于绑定同一组单选框或多选框

label标签

为input元素定义标注，标签用于绑定一个表单元素，当点击<iabel>标签内的文本时，浏览器救护自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验，不属于表单范畴，但经常与表单标签一起使用

<label for="sex">男</label><!-- for为了xxx表单元素，即绑定的表单元素 -->
<input type="radio" name="sex" id="sex" />

select下拉表单标签

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

<option>中定义selected="selected"时，即为当前默认选中项

textare文本域标签

<textarea rows="3" cols="20">
文本内容
</textarea>

row每行的字符数，cols行数

HTML笔记