本文是作者在学习html过程中对知识的初步整理
1.第一个程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
hello HTML,I am shuaigeliu
</body>
</html>
html标签
html标签表示网页文件的开始,应该把它放在文档的最外层（doctype不算），其他所有的标签都应该放在<html>和 </html>结束标签之间。
head标签
head表示头部标签，head>标签中通常放title标签、meta标签、style标签等。所以head标签主要用来放一下用来定义页面属性的标签
body标签
body表示主体标签，网页上所有要显示的内容都放在这个标签内。
meta标签
标签中的 charset 表示当前网页的编码格式
2.常用标签
1）常用标签
| 标签 | 说明 |
|---|---|
| b/strong | 字体变粗体 |
| i/em | 文字变斜体 |
| u | 文字下划线 |
| del | 文字删除线 |
| br | 换行 |
| p | 段落 |
| pre | 预格式化段落 |
| span | 标准行内标签，一般用来修饰文本 |
| div | 标准块标签，一般用来布局页面 |
| sub | 下标 |
| sup | 上标 |
| hr | 水平分割线 |
| hn | 标题标签（共有6级，h1、h2… h6） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>粗体 | 斜体 | 下划线</title>
</head>
<body>
<b>粗体</b>
<strong>也是粗体</strong>
<i>斜体</i>
<em>也是斜体</em>
<u>下划线</u>
<del>删除线</del> ①
</body>
</html>
2）HTML5提供的新标签
3）特殊字符
转义标签
| 符号 | 转义符 |
|---|---|
| 空格 |   |
| > | > |
| < | < |
| ￥ | ¥ |
| © | © |
| ÷ | ÷ |
3.多媒体标签
1）使用图像
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>在网页中插入图片</title>
</head>
<body>
<!--
img标签用来引入图片到页面中
src是一个必须的属性，该属性表示图片的地址
-->
<!-- 相对路径 -->
<img src="./img/">
<img src="img/">
<!-- 绝对路径 -->
<img src="d://A-Web/Lession/day003/img/">
<!-- 网络路径 -->
<img src="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=233301930,3031623456&fm=11&gp=" >
</body>
</html>
| 属性名称 | 功能 |
|---|---|
| width | 图片宽 |
| height | 高 |
| border | 边框 |
| align | 对齐方式 |
| vspace | 图片与文字水平 |
| hspace | 图片与文字垂直距离 |
| alt | 图片的替换文本 |
**图片的宽和高（width 和 height）：**可以通过width和height属性来跳转图片的宽和高，但是一般
建议根据情况修改一个，防止出现图片被拉升变形。
图片的边框（border）: 对插入的图片还可以在周围加上边框。
**图片与文字的位置关系（align）：**在网页中经常将图文混排，这时要设置图片与文字的位置关系和文字与图片的距离。
文字代替图片显示（alt）: 当浏览器不能显示所指定的图片，这时可以设置让浏览器显示一段文字
以说明该图片，来代替图片的显示，这是利用 img 标签的 alt 属性来完成的。
**图片标题（title）：**用来显示描述图片的文字，当鼠标放到图片上时出现，注意：如果alt默认没有
设置，那么alt的值默认就是title的值
2）使用音频和视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<video src="img/a.mp4" style="height: 500px; width: 800px;" controls="controls" autoplay></video>
<!-- 兼容写法 -->
<video>
<source src="img/a.mp4">
<source src="img/">
</video>
<audio src="img/a.mp3" autoplay controls></audio>
</body>
</html>
video视频和audio音频
autoplay 自动播放
muted 静音
controls 组件
loop 循环
4.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="300" height="150" >
<thead>
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td >foot????</td>
<td >foot????</td>
</tr>
</tfoot>
</table>
</body>
</html>s
table
标签用于定义一个表格。一个表格必须包含至少一个横行组，每一个横行组被分成三个部
分：头、主干、尾。头和尾是可选的。thead元素定义头，tfoot元素定义尾，tbody元素则定义主干
| 属性 | 含义 |
|---|---|
| border | 边框 |
| width | 宽度 |
| height | 高度 |
| align | 位置 |
| background | 背景图像 |
| gcolor | 背景颜色 |
| cellpadding | 表格的边距 |
| cellspacing | 表格的间距 |
thead
定义表格的头部
tbody
定义表格的内容
tfoot
定义表格的尾部
tr
| 属性 | 含义 |
|---|---|
| height | 高度 |
| bgcolor | 背景色 |
th
该行加粗且内容居中
td
| 属性 | 含义 |
|---|---|
| width | 宽 |
| hieght | 高 |
rowspan
单元格跨行合并
colspan
单元格跨列合并
表格可以进行嵌套操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pysFC7IU-1621250065720)(C:\Users\86138\AppData\Roaming\Typora\typora-user-images\)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格的嵌套</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td> </td>
<td>
<table width="100" border="1" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
单元格属性
| 属性名 | 功能 |
|---|---|
| width | 单元格宽度 |
| height | 高度 |
| align | 单元格水平对齐方式【le? center right（左中右）】 |
| valign | 单元格垂直对齐方式【top middle buttom（上中下）】 |
| bgcolor | 背景色 |
| rowspan | 垂直方向跨行合并 |
| colspan | 水平方向跨列合并 |
5.超链接标签
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<a href="/" target="_blank">
<p>你好</p>
</a>
<hr>
<a href="/" target="_self">
<p>你好</p>
</a>
</body>
</html>
target
- _self :默认值，在原窗口打开链接
- _blank: 在新窗口中打开目标链接
锚链接
待补充
图片超链接
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<a href="/" target="_blank">
<img src="/img/bd_logo1.png" height="200" width="150" title="5555555555">
</a>
</body>
</html>
热区超链接
待补充
有些时候希望一个图片能添加多个链接，这时要将图片分割出多个链接区域，每一个区域叫一个热区，每一个热区都可以实现一个链接
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<img src="images/" usemap="#Map">
<map name="Map">
<area shape="rect" coords="456,251,485,319" href="">
<area shape="circle" coords="402,299,23" href="">
<area shape="poly" coords="400,365,446,268,446,381" href="">
</map>
</body>
</html>
热区的制作主要靠的是map标签和area标签。map标签用于在图片上划定区域，把这个区域称作地图，map的 name 属性是地图的
名称。area标签可以理解为一个具体的区域，它被包含在map中。图片通过map的名称引用area的区域，并为每一个area设置超链接。
注意：热区的形状有三种，rect(矩形)、circle(圆形)、poly (多边形)。
6.列表标签
1）有序列表-ol
有序列表始于 <ol>标签。每个列表项始于 <li> 标签
有序 == order
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<ol>
2）无序列表-ul
无序列表始于<ul>标签。每个列表项始于<li>
<ul type="circle">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
type
- circle
- disc
- square
3）数据列表-dl
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
7.表单
语法格式
<form name="表单名称" method="表单提交方式" action="处理表单的文件"></form>
method
| get | 获取数据 |
|---|---|
| post | 发送数据 |
action
定义一个 URL。当点击提交按钮时，向这个 URL 发送数据。
action="#" 跳转到当前页面
input
语法格式
<input type="元素类型" name="元素名称" value=”元素值”>
type使用
| 类型 | 含义 |
|---|---|
| text | 文本 |
| passwd | 密码（***） |
| radio | 单选 |
| checkbox | 多选 |
| url | 网址 |
| file（需用post请求） | 文件 |
| 邮箱 | |
| date | 日期 |
| datetime-local | 本地时间 |
| color | 颜色 |
| number | 数字 |
| range | 小横条（可拉动） |
单选和多选
checked：默认选中
补充
readonly：属性规定输入字段为只读
disabled：属性规定应该禁用 input 元素
注释：disabled 属性无法与 一起使用。
关于提交
button标签
<button> 标签定义一个按钮。
重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。
input中的type属性
| 类型 | 作用 |
|---|---|
| submit | 提交表单 |
| reset | 重置表单（不是很人性化） |
| button | 不提交表单，点了没反应 |
| image | 点击图片提交 |
| hidden | 隐藏域 |
| search | 搜索功能 |
补充
<!-- 开启自动补全功能
autofocus 自动聚焦
-->
<input type="text" autocomplete="on" autofocus>
select
| 属性名称 | 属性作用 |
|---|---|
| option | 下拉框中的选项 |
| value | 选项的值 |
| name | 下拉框的名称 |
| selected | 默认被选中的选项 |
| multiple | 以列表形式显示 |
类似实现下面这样的效果
value：如果加了，返回值是value，不加返回值默认是文本
selected：被预选的选项会显示在下拉列表最前面的位置
<p>
地址：
<select name="address" id="address">
<option value="北京">北京</option>
<option >西安</option>
<option>洛阳</option>
<option selected>南京</option>
<option value="1">请选择您的地址</option>
</select>
</p>
textarea
定义一个文本区域 (text-area) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区中，您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch)。
<textarea name="元素名称 " cols="文本框宽度" rows="文本框高度" >
内容
</textarea>
| 属性名称 | 属性作用 |
|---|---|
| cols | 以字符个数设定的多行文本框的宽度 |
| cols | 以行数设定的多行文本框的高度 |
| name | 多行文本框的名称 |