前端与 HTML
一、标题标签
代码：h系列标签
<h1></h1> <h2></h2> <h3></h3>
-
1.2.1 段落标签
代码：
<P>一段文字</p> -
1.3.1 换行标签
代码：
<br>单标签 -
1.4.1 水平线标签
代码：
<hr>单标签
二、标签
2.1 文本格式化标签
代码：b-加粗
u-下划线
s-删除线
strong-加粗
ins-下划线
i-倾斜
em-倾斜
del-删除线
3.1.1 图片标签的介绍
图片路径 替换文本
代码：<img src="↑" alt="↑"> 单标签
当图片加载失败时，才显示alt的文本
3.1.4 图片标签的title属性
- 属性值：提示文本
当鼠标悬停时。才显示的文本
3.1.5 width和height属性
如果只设置一个，另一个会按比例缩放
3.2.1 路径的介绍
绝对路径：指目录下的绝对位置，可直接到达位置，从盘符开始的路径
相对路径：从当前文件开始。找目标文件。
同级目录
<img src=“目标图片.gif”>
<img src=“．1目标图片.gif”>
<img src="images/目标图片、gif”>
<img src="../_.gif">
3.3.1 音频标签
<andio src=".Imusic.mp3" controls></andio>
src : 音频路径。
controls : 显示播放的控件。
autoplay : 自动播放
loop : 循环播放
3.4.1 视频标签
<video src="./video.mp4" controls></video>
controls : 显示播放的控件。
src : 视频的路径
4.1 链接标签
<a href=“.1目标网页.html”＞超链接＜／a>
4.4 target属性
－blank : 在新窗口中跳转
－self : 默认值、在当前窗口中跳转
<a href=" " target="_blank">百度－下<／a>
二、列表标签
2.1 无序列表
标签组成 ：ul : 表示无序列表的整体，用来包裹li标签
li : 表示无序列表的每一项，用于包含每一项的内容
注：ul标签只允许包含li标签
li标签可以包含任意内容
3.1 有序列表
标签组成 ：ol : 表示有序列表的整体
li : 表示有序列表的每一分项。
4.1 自定义列表
标签组成 ：dl : 表示自定义列表的主体。用于包裹dt、dd标签
dt : 表示自定义列表的主题
dd : 表示自定义列表的针对主题的每一项内容
三、表格标签
1.1 表格的基本标签
table : 表格整体，可用于包裹多个tr
tr : 表格每行，可用于包裹td
td ; 表格单元格，可用于包裹内容
table > tr > td
2.1 表格相关属性
<table border="1" width=" " height=" ">
border : 边框宽度
width : 表格宽度
height : 表格高度
3.1 表格标题和表头单元格标签
caption : 表格大标题
th : 表头单元格，表格第一行，加粗并居中
注 ：caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
4.1 表格的结构标签
thead : 表格头部
tbody : 表格主体
tfoot : 表格底部
5.1 合并单元格
rowspan : 跨行合并，将多行的单元格垂直合并
colspan : 跨列合并，将多列的单元格水平合并
注：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并
四、表单标签
1.1 input系列标签基本介绍
| 标签名 | type属性值 | 说明 |
|---|---|---|
| text | text | 文本框，用于输入单行文本 |
| password | password | 密码框：用于输入密码 |
| radio | radio | 单选框，用于多选一 |
| checkbox | checkbox | 多选框 |
| file | file | 文件选择。用于之后上传文件 |
| submit | submit | 提交按钮、用于提交 |
| reset | reset | 重置按钮、用于重置 |
| button | button | 普通按扭 |
文本框：<input type="text">
1.2 文本框（text)
placeholder : 占位符，提示用户输入内容的文本
<input type="text" placeholder=“请输入用户名”>
1.3 单选框（radio)
name : 分组、有相同name属性的单选框为一组。一组中只有一个被选中
checked : 默认选中
性别：<input type="radio" name="sex">男<input...＝＂sex”>女
<input type="radio" name="sex" checked>女
1.6 文件选择
multiple : 多文件选择
<input type="file" multiple>
1.7 按纽
submit : 提交按纽。点击之后提交数据给后端服务器
reset : 重置按纽、点击之后恢复表单默认值(用form预标签包裹)
button : 普通按纽、
<input type="submit">
<input type="button" value=“普通按纽”>
2.1 button 按纽
submit→提交按纽
reset→重置按纽
button→普通按纽 button是双标签
<button>我是按纽</button>
<button type="submit">提交按纽</button>
我是按纽 提交按纽
3.1 select下拉菜单标签
标签组成 select 标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性 selected: 下拉菜单的默认选中
<select> 默认选中：
<option>北京</option> <option selected>上海</option>
<option>上海</option>
<select>
默认选中： 北京 上海 上海
4.1 textarea 文本域标签
常见属性：cols : 规定了文本域内可见宽度 注：右下角可拖拽改变大小
rows : 规定了文本域内可见行数
5.1 label 标签
方法① : 1.使用labbel标签把内容包裹起来
2.在表单标签中添加id属性
3.在label标签的for属性中设置对应的id属性值
<input type="radio" name="sex" id="nan"><label for="nan"男</label>
方法② : 1.直接使用label标签把内容和表单标签一起包裹
2.把label标签的for属性删除即可
<label><input type="radio" name="sex">女</label>
五、语义化标签
1.1 没有语义的布局标签－div和span
div标签：一行只显示一个
span标签：一行可以显示多个
<div>这是div标签</div> 后通过css
2.1 有语义的布局标签（手机端网页使用）
header : 网页头部
nav : 网页导航
footer : 网页底部
aside : 网页侧边栏
section : 网页区块
article : 网页文章
六、字符实体
空格：＆nbsp;
这是HTML文档，现在要学＆nbsp;习实体。
DOM树
document：
- html
- head:
- meta
- title
- body:
- h1
- p
- head:
有序列表<ol><ol/>
无序列表<ul></ul>
链接<a herf="target="_blank"</a>
_black 以新窗形式打开
音频:<andio scr=" "controls></audio>
视频:<video sre=" "controls></video>
<input placeholder=" ”>没有输入默认显示
<input type="range">滑动范围
<input type ="number" min="1" max="10">
选择年月日<input type=" date" min="2020-8-10>
输入长文字 <textarea>Hey</textarea>
单选框
<label><imput type="radio" name="">...</label>
复选框
<label><input type="checkbox" name=" ">...</label>
下拉选择:
<sebect><option>...</option></select>
