文章目录
- 一、布局标签
- 1. 网站结构标签
- 2. 无语义标签
- 1. div标签
- 2. span标签
- 3. 列表标签
- 1. 无序列表 ul
- 2. 有序列表 ol
- 3. 描述列表 dl
- 二、表格
- 1. 表格基本组成：
- 2. 表格结构标签
- 3. 合成单元格
- 三、表单
- 1. 表单容器
- 2. 表单控件
- （1）input表单
- 1. 单行文本框和密码框（text/password）
- 3. 文件域（file）
- （2）textarea表单
- （3）selete表单
- （4）button表单
- 3. 辅助标签
- 四、字符实体
- 总结
一、布局标签
1. 网站结构标签
网页的外观多种多样，但是大概都包含：页眉、导航栏、主内容、侧边栏、页脚等。
<h2>网页结构标签</h2> <header>网页头部标签</header> <nav>导航栏标签</nav> <main> <aside>侧边栏标签</aside> <article>主要内容区域标签</article> </main> <footer>页面底部标签</footer> <section>区块标签</section>这些标签受浏览器兼容性问题影响，PC端根据公司需求，移动端放心使用
2. 无语义标签
<h2>div和span标签 </h2> <div>我是div标签是块级元素</div> <div>我是div标签是块级元素</div> <span>我是span标签是行内元素</span> <span>我是span标签是行内元素</span>1. div标签
特点：
- 块级元素：默认独占一行，前后会自动换行。
- 通常用于布局结构，作为其他元素的容器。
- 可以包含其他块级或行内元素。
- 默认没有语义。
2. span标签
特点：
- 行内元素：不会换行，仅包裹内容的一部分。
- 用于对文本或行内元素的局部样式或操作。
- 默认没有语义。
3. 列表标签
1. 无序列表 ul
顺序无关紧要的列表
无序列表在我们布局中非常常用。常用于一些整齐对齐的模块中使用。
<h2>一.无序列表</h2> <ul> <li>手机</li> <li>电视</li> <li>ipad</li> <li>电脑</li> </ul>2. 有序列表 ol
顺序有关紧要的列表
有序列表在我们布局中较少。了解即可，实际开发即使有顺序，我们一般也是用其他替代。
<h2>二.有序列表（了解即可）</h2> <ol> <li>看视频</li> <li>写代码</li> <li>做笔记</li> <li>多复习</li> </ol>3. 描述列表 dl
标记一组项目及相关描述。
描述列表在我们布局中主要是在页面底部。比如：
<h2>三.描述列表（自定义列表）</h2> <dl> <dt>家电</dt> <dd>电视</dd> <dd>洗衣机</dd> <dd>冰箱</dd> </dl>
- ul里面只能包含li。
- li 里面可以放其他元素。
- 无序列表在开发布局中非常重要。
二、表格
- 表格作用： 以结构化方式展示行列数据，使信息清晰、易读且便于对比。
- 网页场景： 主要用于数据展示或者后台管理系统的信息展示。
1. 表格基本组成
<h2>表格标签基本语法</h2> <table> <tr> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <td>张三</td> <td>18</td> <td>100</td> </tr> <tr> <td>李四</td> <td>20</td> <td>90</td> </tr> <tr> <td>王五</td> <td>22</td> <td>80</td> </tr> </table> <!-- th 表头单元格，可以让里面的文字加粗 水平和垂直居中显示 一般用于第一行或者第一列-->注意：美化表格是CSS的工作，所以这里千万不要花时间去美化表格，无意义。
2. 表格结构标签
表格结构标签：增强表格语义，让表格结构更加清晰
3. 合成单元格
表格开发中很少使用合并，因为会导致表格难以维护，且可能影响响应式适配（尤其在移动端）。如果特殊情况，可以借助于AI。
- 原理：
- 1. 确定是跨行(rowspan)还是跨列合并(colspan)
- 2. 找到目标单元格（左上原则），写合并数量
- 3. 删除多余单元格
三、表单
表单：是用于收集用户输入数据，并将数据提交到后端进行处理。
1. 表单容器
form 标签：定义表单的容器，包裹所有表单控件。
<!-- 表单容器，主要作用是包裹所有的表单控件 --> <form action=""> </form>action 属性定义了在提交表单时，应该把所收集的数 据送给谁（URL）去处理。
2. 表单控件
（1）input表单
输入标签<input> 是最常用的表单元素之一，它可以创建文本输入框、密码框、单选框、复选框等。
type 属性定义了输入框的类型：
1. 单行文本框和密码框（text/password）
<label> 账号： <input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off"> 密码： <input type="password" placeholder="请输入密码" name="pwd" maxlength="6"> </label>2.单选框和复选框（radio/checkbox）
性别： <!-- label 方式一 for id 关联 --> <input type="radio" name="gender" value="0" checked id="nv"> <label for="nv">女</label> <input type="radio" name="gender" value="1" id="nan"> <label for="nan">男</label> 爱好： <!-- label 方式二 --> <label> <input type="checkbox" name="hobby" value="0" checked> 足球 </label> <label> <input type="checkbox" name="hobby" value="1"> 篮球 </label> <label> <input type="checkbox" name="hobby" value="2"> 双色球 </label>3. 文件域（file）
头像：<input type="file" name="file" multiple accept=".exe,.jpg">（2）textarea表单
<textarea> HTML 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。
textarea 多行文本框也称为文本域
应用场景：
<label> 留言： <textarea name="msg" cols="30" rows="10" placeholder="请输入留言"></textarea> </label>常见属性：
文本域textarea利用CSS来设定样式，比如宽高边框等
（3）selete表单
HTML <select> 元素表示一个提供选项菜单的控件。
城市： <select name="city" id=""> <option value="北京">北京</option> <option value="上海" selected>上海</option> <option value="广州">广州</option> </select>- <select> 元素是容器， <option>是每一个选项标签，每个选项要跟一个值
- 要想默认选中一个选项，可以添加selected属性。
（4）button表单
<button> 标签定义一个按钮。元素内部可以放置内容，比如文本或图像
语法：
<button disabled>注册</button>disabled 属性可以禁用按钮，无法点击
3. 辅助标签
<label>表示用户界面中某个元素的说明。提升可访问性（点击标签可聚焦输入框）
- 方式一：利用for和id相关联：
<!-- label 方式一 for id 关联 --> <input type="radio" name="gender" value="0" checked id="nv"> <label for="nv">女</label> <input type="radio" name="gender" value="1" id="nan"> <label for="nan">男</label>- 方式二：直接包含
<!-- label 方式二 --> <label> <input type="checkbox" name="hobby" value="0" checked> 足球 </label> <label> <input type="checkbox" name="hobby" value="1"> 篮球 </label> <label> <input type="checkbox" name="hobby" value="2"> 双色球 </label>四、字符实体
字符实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。
常用于显示保留字符和不可见的字符（如“不换行空格”）
总结
这篇主要介绍布局标签（网站结构标签，无语义标签，列表标签），表格，表单（表单容器，表单控件，辅助标签，以及字符实体。HTML的学习就到这里，后续开始CSS的学习。
