- 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>``</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>
****语句用于向浏览器说明该网页所使用的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 | 像素 | 图像高度 |
| 像素 | 图像边框粗细(非重点，多用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行数