HTML基础+

✔️HTML基础

❤️表

列表

作用：布局内容排列整齐的区域

分类：

无序列表

有序列表

定义列表

无序列表

作用：布局排列整齐的不需要规定顺序的区域
标签： ul 嵌套 li ，ul 是无序列表，li 是列表条目

注意：

• ul 标签里面只能包含 li 标签

• li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域
标签： ol 嵌套 li ，ol 是有序列表，li 是列表条目

注意：

• ol 标签里面只能包含 li 标签

• li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd ，dl 是定义列表，dt 是定义列表的 标题，dd 是定义列表的描述/详情

<dl>
    <dt>列表标题（条目集合标题）</dt>
    <dd>列表描述/详情（条目）</dd>
	······
</dl>

注意：

• dl 标签里面只能包含 dt 和 dd 标签
• dt 和 dd 标签里面可以包裹任何内容

表格

网页中的表格与Excel表格类似，用来展示数据
标签：table 嵌套 tr ，tr 嵌套 td / th

table:表格
tr:行
th：表头单元格
td：内容单元格

表格结构标签：可省略

• 作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

• 标签名：

  • thead:表头内容

  • tbody:表格主体区域

  • tfoot:表格底部，汇总信息区域

合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
步骤：自己练吧，hhh

表单

作用：收集用户信息

使用场景：

• 登录页面
• 注册页面
• 搜索页面

input标签

• type属性：（值不同，功能不同）

text : 文本框，用于输入单行文本
password ： 密码框
radio ： 单选框

<input type="radio" name="@name">男
<input type="radio" name="@name">女

checkbox ： 多选框
file ： 上传文件

<input type="file" multiple>
默认情况下，文件上传表单控件只能上传一个文件
添加multiple属性可以实现文件多选功能

• placeholder属性：占位文本，提示信息
• checked属性：默认选中，键值一样，可略写

下拉表单：select 选择，option 选项

selected属性，默认选中

<select name="" id="">
	<option value="" selected>...</option>
	<option value="">***</option>
</select>

文本域

作用：多行输入文本的表单控件

标签：textarea，双标签

<textarea name="" id="" cols="30" rows="10">评论（提示信息）</textarea>
<!-- rows 行数，cols列数（文本域显示大小）-->

注：

• 实际开发中，使用CSS设置文本域的尺寸
• 一般禁用右下角的拖拽功能

label标签

作用：网页中，某个标签的说明文本
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围

• 写法一

label标签只包裹内容，不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同

<input type="radio" id="man">
<label for="man">男</label>

• 写法二

使用label标签包裹文字和表单控件，不需要属性

<label>密码：<input type="password" placeholder="请您输入密码"></label>

按钮 - button

type属性值

submit 提交按钮，点击后可以提交数据到后台（默认功能）
reset 重置按钮，点击后将表单控件恢复默认值
button 普通按钮，默认没有功能，一般配合JavaScript使用

<button type="">按钮</button>

注意
按钮需配合form标签（表单区域）才能实现对应的功能

语义化

无语义化的布局标签

作用：布局网页（划分网页区域，摆放内容）

• div：独占一行，盒子
• span：不换行

有语义的布局标签

header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section网页区块
article网页文章

字符实体

作用：在网页中显示预留字符

空格 实体描述： 
小于号 实体描述：<(less than缩写) 效果：<
大于号 实体描述：>(greater than缩写）效果：>

布局

• 总纲：布局就是画好盒子，然后里面填充内容
• 拿到效果，先看盒子的结构
• 盒子结构清楚了，先画大盒子，先添加宽高背景色，看到盒子正确显示
• 大盒子设置好了，再设置小盒子，正确显示盒子了，再考虑位置（flex、magin、padding）
• 小盒子没问题，填充内容
• 解决问题

调试工具，先看左边html结构对不对
针对错误盒子，选择html标签，看看宽高、内外边距、位置，样式为什么没生效
上看层叠，下看继承，要么被层叠掉，要么继承了前面的代码
若果发现，点击标签，右侧无样式，99%概率是类名写错了