本文详细介绍了HTML的基础结构，包括标签的使用如标题、段落、链接、音频/视频、表格、列表、表单控件（如input、select、button）以及无语义布局和字符实体。
html主要框架：
<html>
<!--头部-->
<head>
<title>标题</title>
</head>
<!--主体-->
<body>
</body>
</html>
一、标签
1.加粗<strong></strong> b
2.倾斜<em></em> i
3.下划线<ins></ins> u
4.删除线<del></del> s
5.单标签：
<br> 换行
<hr>水平线
6.注释：<!--...-->
7.分级标题：<h1></h1>....<h6></h6>
8.段落标签：<p></p>
9.图片：<img src=”图片的URL” alt=”显示不出替代文字” title=”鼠标移到提示文字” width=”100” height="100">
Alt 替换文本
Title 提示文本
Width 图片宽度
Height 图片高度
10.url路径选择
. 当前文件所在文件夹
.. 上级文件夹
/ 进入某个文件夹里面
11. 超链接：<a href=”https://www.baidu.com” target=”_blank”>跳转到百度</a>新窗口打开
href属性值写#为空链接，不会跳转。
12. 音频标签：<audio src=”音频的URL” ></audio>
常见属性：src controls（显示音频控制面板） loop（循环播放） autoplay（自动播放）
13.视频标签：<video src=”视频的URL” ></video>
属性： src controls loop muted(静音播放) autoplay （自动播放必须要静音）
二、列表
作用：布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表
1.无序列表标签：ul嵌套li ，ul是无序列表，li是列表条目
<ul>
<li> 第一项</li>
<li> 第二项</li>
……
</ul>
注意：ul只能包裹li标签，li里可包裹任何内容
2.有序列表标签：ol嵌套li ，ul是无序列表，li是列表条目
<ol>
<li> 第一项</li>
<li> 第二项</li>
……
</ol>
3.定义列表标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述
<dl>
<dt>列表标题</dt>
<dd>列表描述</dd>
……
</dl>
三、表格
标签：table嵌套tr（行），tr嵌套td（内容单元格）/th（表头单元格，默认居中加粗）。
border属性添加表格边框线。
<table border=”1”>
<tr>
<th>姓名</th>
<th>班级</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>三班</td>
<td>285</td>
</tr>
</table>
表格结构标签：thead 表格头部 tbody表格主体 tfoot表格底部
合并单元格：跨行合并，保留最上单元格，添加属性rowspan,合并几个单元格数字为几。
例：<td rowspan=’2’>100</td>
跨列合并，保留最左单元格，添加属性colspan 例：<td colspan=’2’>100</td>
四、表单
作用：收集用户信息。
使用场景：登录页面，注册页面，搜索区域
input标签 ：type属性值不同功能不同 <input type=”...”>
type属性：
text 文本框，用于属于单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件
input标签占位文本：
作用：提示信息，文本框和密码框都可以使用
<inptu type="..." placeholder="提示信息">
1.单选框radio
常用属性：name 控件名称，checked 默认选中
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender" > 女
2.上传文件file
默认选一个文件，添加multiple属性可实现文件多选功能。
<input type="file" multiple>
3.多选框：
<input type="checkbox">a
<br>
<input type="checkbox" checked>b
<br>
<input type="checkbox">c
多选框默认选中：checked属性
4.密码框
<input type="password">
5.下拉菜单标签：
select嵌套option，select是下拉菜单整体，option是下拉菜单每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option selected>重庆</option>
</select>
6.文本域：
多行输入文本表单控件 <textarea cols="30" rows="10"> 默认提示文字</textarea>
注：右下角拖拽功能一般禁用，工作中用css设置尺寸
7.lable标签：
网页中，某个标签的说明文本。用label标签绑定文字和表单控件关系，增大表单控件点击范围。
写法：1. label标签只包裹内容，for属性值与表单控件id属性值相同
<input type="radio" id="man"><lable for="man"> 男</lable>
2. label标签包裹文字和表单控件，不要属性
<label><input type="radio">女</label>
提示：支持label增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域。
8.按钮button：
<button type="">按钮</button>
type属性： submit 提交按钮（默认）
reset 重置按钮
button 普通按钮，一般配合javascript使用
内容包含在form表单区域里面：
<form>
用户名：<input type="text">
<br>
密码：<input type="password">
<br>
<button type="reset">重置</button>
</form>
9.无语义布局标签：
- <div>每个div标签独占一行</div>
- <span>span标签，不换行</span> 两个span标签也在同一行
10.字符实体：
在网页中显示预留字符
- 空格  ；
- < < <；
- > > >；
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
