HTML学习（四）---布局标签（网站结构标签，无语义标签，列表标签），表格，表单（表单容器，表单控件，辅助标签，以及字符实体

文章目录

• 一、布局标签
• 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标签

特点：

1. 块级元素：默认独占一行，前后会自动换行。
2. 通常用于布局结构，作为其他元素的容器。
3. 可以包含其他块级或行内元素。
4. 默认没有语义。

2. span标签

特点：

1. 行内元素：不会换行，仅包裹内容的一部分。
2. 用于对文本或行内元素的局部样式或操作。
3. 默认没有语义。

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. 合成单元格

三、表单

表单：是用于收集用户输入数据，并将数据提交到后端进行处理。

1. 表单容器

<!-- 表单容器，主要作用是包裹所有的表单控件 --> <form action=""> </form>

2. 表单控件

（1）input表单

<label> 账号： <input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off"> 密码： <input type="password" placeholder="请输入密码" name="pwd" maxlength="6"> </label>

性别： <!-- 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>

头像：<input type="file" name="file" multiple accept=".exe,.jpg">

（2）textarea表单

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. 辅助标签

• 方式一：利用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的学习。