HTML
HTML
1、什么是HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
2、HTML基本结构标签
HTML的基本结构标签（骨架标签）：
| 标签名 | 定义 |
|---|---|
<html></html> | HTML标签 |
<head></head> | HTML的头部 |
<title></title> | HTML的标题 |
<body></body> | HTML的主体 |
3、网页开发工具
WebStorm、Visual Studio Code等
VS Code安装链接：https://code.visualstudio.com/
VS Code推荐添加插件：
| 插件 | 作用 |
|---|---|
| Chinese (Simplified) Language Pack forVS Code | 中文语言包 |
| OPen in Browser | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存自动格式化js css和html代码 |
| Auto RenameTag | 自动重命名配对的HTML/XML标签 |
| CSS Peek | 追踪至样式 |
4、HTML常用标签
4.1 DOCTYPE和lang以及字符集
文档类型声明：
<!DOCTYPE html>
lang语言种类 en 或 zh-CN:<html lang="en">或<html lang="zh-CN">
字符集：<meta charset="UTF-8">
4.2 常用标签
常用标签表：
| 标签 | 说明 | 使用 |
|---|---|---|
<h1> - <h6> | 标题标签 | <h1>一级标题</h1> |
<p></p> | 段落标签 | <p>段落</p> |
<br /> | 换行标签 | 换行<br /> |
<strong></strong>或<b></b> | 文字加粗 | <strong>文字</strong> |
<em></em>或<i></i> | 倾斜文字 | <em>文字</em> |
<del></del>或<s></s> | <del>文字</del> | |
<ins></ins>或<u></u> | 下划线 | <ins>文字</ins> |
<div></div> | 用于布局，分割、分区，独占一行 | <div>百度</div> |
<span></span> | 用于布局，跨度、跨距，一行可有多个 | <span>百度</span> |
<img src=""/> | 图像标签 | <img src="img.jpg"> |
<a></a> | 超链接标签 | <a href="跳转目标" target="目标窗口弹出方式">文本或图像</a> |
<a href="#name"></a>、<h2 id="name"></h2> | 锚点链接标签 | 组合设置：<a href="#name">目标</a>、<h2 href="name">目标</h2> |
4.2.1 图像标签和路径
1、图像标签属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本，鼠标放在图片上显示的文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像边框粗细 |
2、图像路径：
| 相对路径分类 | 说明 |
|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如<img src="img.jpg" /> |
| 下一级路径 | 图像位于HTML文件下一级，如<img src="images/img.jpg" /> |
| 上一级路径 | 图像位于HTML文件上一级，如<img src="../img.jpg" /> |
| 绝对路径 | 例如 |
|---|---|
| 目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径 | “D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif" |
4.2.2 超链接标签
1、语法格式：
<a href="跳转目标" target="目标窗口弹出方式">文本或者图像</a>
href：用于指定连接目标地址的ur地址（必须属性）
target：用于指定连接页面的打开方式，其中 _self 为默认值， _blank 为在新窗口中打开
例如：
2、链接分类：
| 链接分类 | 使用说明 |
|---|---|
| 外部链接 | 例如：<a href="http://www.qq.com">腾讯qq</a> |
| 内部链接 | 网站内部页面之间互相链接，直接链接内部网页名称即可，例如：<a href="demo.html">圣诞</a> |
| 空链接 | 如果当时没有确定链接目标用<a href="#">目标</a> |
| 下载链接 | 如果href里面的地址是一个文件或压缩包，会下载这个文件 |
| 网页元素链接 | 在网页中的各种网页元素，如文本、图像、音频等都可添加超链接 |
| 锚点链接 | 先在链接文本的href属性中设置属性值为"#名字" ，然后找到目标位置标签在里面添加一个id属性：id=“名字”。 例如先设置<a href="#name">目标</a>再设置<h2 href="name">目标</h2> |
5、HTML中的注释和特殊字符
5.1、注释：
快捷键：ctrl + /
<!--注释语句-->
5.2、部分特殊字符
| 特殊字符 | 字符代码 |
|---|---|
| < | |
| > | < |
| & | > |
| ± | ± |
| × | × |
| ÷ | ÷ |
| ? | ² |
| ? | ³ |
| ° | ° |
| ￥ | ¥ |
6、表格标签
6.1、表格的主要作用：用于显示、展示数据
6.2、表格基本语法：
<table> --定义表格标签
<tr> --定义表格中的行
<td>单元格内的文字</td> --定义表格中的单元格
...
</tr>
...
</table>
<table>
<tr>
<th>单元格内的文字</th> --<th></th>为表头单元格标签
...
</tr>
...
</table>
例如
6.3、表格的相关属性
表格相关属性定义在<table></table>中
| 属性名 | 属性值 | 属性说明 |
|---|---|---|
| align | letf、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定单元格边框，默认为"" |
| cellpadding | 像素值 | 规定单元格内容那个和边缘的距离，默认为1 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为2 |
| width | 像素值 | 规定表格的宽度 |
6.4、表格的结构标签
<thead></thead> --表格的头部区域
<tbody></tbody> --表格的主体区域
基本语法：
<table>
<thead>
<tr>
<th>单元格内的文字</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
</tr>
<tbody>
</table>
6.5、合并单元格
1、合并单元格方式：
| 跨行合并 | 跨列合并 |
|---|---|
| rowspan=“合并单元格的个数” | colspan=“合并单元格对的个数” |
| 最上侧的单元格为目标单元格 | 最左侧的单元格为目标单元格 |
2、合并单元格步骤
1、确定跨行还是跨列
2、找到目标单元格，写上合并代码
3、删除多余单元格
7、列表标签
列表标签的作用：布局
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> | 无序标签 | 只能包含<li>，没有顺序，<li>里面可以包含任何标签 |
<ol></ol> | 有序标签 | 只能包含<li>，有顺序，<li>里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 只能包含<dt>和<dd>，<dt>和<dd>里面可以包含任何标签 |
7.1 无序列表
无序列表基本语法
<ul>
<li>列表项1<li>
<li>列表项2<li>
<li>列表项3<li>
...
</ul>
例如
7.2 有序列表
有序列表基本语法
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
7.3 自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词</dt>
<dd>解释1</dd>
<dd>解释2</dd>
...
</dl>
8、表单标签
表单标签的作用：是收集用户信息
表单标签的组成：表单域、表单控件和提示信息
8.1 表单域
8.1.1、表单域的基本信息
定义： 表单域是一个包含表单元素的区域
<form>标签用于定义表单域，实现用户信息的收集和传递（把它范围内的表单元素信息提交给服务器）
表单域的基本语法格式：
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，取值为"get"或"post" |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
8.1.2、表单控件（表单元素）
input 输入表单元素
select 下拉表单元素
textarea 文本域元素
1、input元素
1.1 语法格式：
<input type="属性值" /> 单标签
1.2 type属性设置不同的属性值来指定不同的控件类型：
| 属性值 | 说明 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形势的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选框 |
| reset | 定义重置按钮 |
| submit | 定义提交按钮 |
| text | 定义单行输入字段，用户可以在其中输入文本，默认宽度为20字符 |
例如
1.3 除type属性之外的常用属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | 用户自定义 | 定义input元素的名称，用于区别不同的表单 |
| value | 用户自定义 | 规定input元素的值 |
| checked | checked | 规定此Input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段的字符的最大长度 |
1、name和value是每个表单都有的属性值，主要给后台人员使用
2、name表单元素的名字，要求单选按钮和复选框要有相同的name值
3、checked属性主要针对单选按钮和复选框，用于一打开页面就默认选定的元素
例如
1.4、label标签
运用场景： 绑定一个表单，当点击<label>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，增加用户体验。
语法格式：<label>标签的for属性应当与相关元素的id属性相同
<label for="man"> 男 </label>
<input type="radio" name="sex" id="man" />
例子：
2、select下拉表单元素
运用场景： 在页面中，如果有多个选项让用户选择，可以使用<select>标签控件来定义下拉列表
语法格式：
（项目）：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
在中定义selected="selected"可以设置当前项为默认值
例如
3、textarea文本域标签
运用场景： 当用户输入内容比较多的情况下用textarea定义多行文本输入
语法格式：
<textarea row="数值" cols="数值">
文本内容
</textarea>