html复习
HTML
- 是一个超文本标记语言
- w3c标准：结构标准，表现标准，行为标准。
基本结构
<!doctype html> <html> <head> <title>网页的标题</title> <meta charset="utf-8"/> </head> <body> </body> </html>
基本标签
1.段落标签：
<p></p>
2.标题标签：
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
3.换行标签：
<br />
4.水平线：
<hr/>
5.字体样式标签：
<strong>加粗</strong> <b>加粗</b> <em>斜体</em>
6.特殊符号：
大于：> 小于：< 空格： 引号：" 版权符号：©
7.图像标签：
<img src="图片路径" alt="图片显示不出来时显示的内容" title="鼠标悬浮显示的内容" width="宽度" height="l高度" />
- 相对路径：相对于当前页面的路径，eg: ../img.jpg img/img.jpg
- 绝对路径：相对于本机的路径，eg:D:\常用资料\21IT技能大赛\img.jpg
- src:图片的地址（相对路径和绝对路径都可以）
- alt：图片显示不出来时显示的替换文字内容，eg:alt="这是图书"
- title：鼠标悬浮时显示的内容，eg:title="这是图书"
- width:图片显示的宽度，eg:width="100"
- height:图片显示的高度，eg:height="100"
8.超链接：
<a href="路径" target="是否在当前窗口中打开">百度一下</a>
- href:跳转页面的地址，相对路径和绝对路径都可以
- target：有两个值，_self:当前窗口打开超链接 _blank:在新窗口中打开超链接
9.锚链接：
- 从页面的甲处跳转到乙处
语法：
甲处：<a href="#yi">去乙处</a> 乙处：<p id = "yi"></p>
10.块级元素和行内元素：
- 块级元素：单独占一行，宽度是浏览器的宽度
- 行内元素：内容撑开宽度，内容多宽，元素就多宽。左右都是行内元素，自动排列在一行
列表、表格和媒体元素
1.无序列表：
<ul> <li>No.1</li> <li>No.2</li> <li>No.3</li> <li>No.4</li> </ul>
2.有序列表：
<ol> <li>No.1</li> <li>No.2</li> <li>No.3</li> <li>No.4</li> </ol>
3.定义列表：
<dl> <dt>蔬菜</dt> <dd>黄瓜</dd> <dd>南瓜</dd> <dd>冬瓜</dd> <dd>北瓜</dd> </dl>
4.表格：
<table border="1" cellspacing="0" style="text-align: center;"> <tr> <td colspan="3">第一列</td> </tr> <tr> <td rowspan="2">第一列</td> <td>第二列</td> <td>最后一列</td> </tr> <tr> <td>第二列</td> <td>最后一列</td> </tr> </table>
运行结果：
| 第一列 | ||
| 第一列 | 第二列 | 最后一列 |
| 第二列 | 最后一列 | |
5.音频元素：
<audio src="音频文件" autoplay="autoplay" controls="controls"></audio>
6.视频元素：
<video src="视频文件" autoplay="autoplay" controls="controls"></video>
- **src：**音频或者视频的路径
- **autoplay：**自动播放
- **controls：**显示播放控件
7.网页结构元素：
<header> <nav>导航</nav> </header> <section>中间</section> <footer>底部</footer>
表单元素
1.文本框 ：
<input type="text" name="name" value="mxx" size="20" maxlength="20" placeholder="请输入用户名" required="required" readonly="readonly" />
type：表单的类型name：表单元素的名称value：默认值，初始值size：表单的初识宽度maxlength：最大输入的字符数placeholder：提示信息required：是否必填，不写的话不用必填readonly：是否只读
2.密码框：
<input type="password" name="pass" />
3.单选按钮：
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
注意：name的值必须要一样，否则不能单选
4.复选框：
<input type="checkbox" checked="checked name="hob" />打篮球 <input type="checkbox" name="hob" />堆雪人 <input type="checkbox" name="hob" />打雪仗
注意：checked是默认选中的意思，可适用于单选按钮和复选框
5.下拉列表：
<select> <option>山东</option> <option selected="selected">山西</option> <option>河南</option> <option>河北</option> </select>
注意：selected是默认选中
6.按钮：
<button disabled="disabled">普通按钮</button> <input type="button" value="普通按钮" /> <input type="reset" value="重置按钮" /> <input type="submit" value="提交按钮" />
注意：disabled：是禁用按钮
7.多行文本域：
<textarea cols="5" rows="20">欢迎关注微信公众号：雄雄的小课堂</textarea>
cols：列rows：行
8.文件域：
<input type="file" name="files" />
9.邮箱：
<input type="email" name="files" />
10.数字框：
<input type="number" min="0" max="100" step="100"/>
min：最小值max：最大值step：步幅
11.滑块：
<input type="range" min="0" max="100" step="1"/>
12.日期表单：
<input type="date" name="borndate"/>
13.隐藏域：
<input type="hidden" name="id"/>
14.语义化标签：
<label>用户名</label>
15.正则表达式验证：
<input type="text" name="phone" pattern="^1[3456789]\d{9}" />
- pattern：值是正则表达式
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
