前端学习——HTML的各种标签（以及代码样例）
html标题head标签：快捷键h+8（快捷键中的数字键是⼤键盘上的数字键，不是⼩键盘的）
1：打开⽹页出现乱码时，在head标签中加<meta charset="utf-8" />  快捷键m+6
htnl的body标签
1：h1到h6，会将其中的数据加粗加⿊显⽰，并且显⽰以此减弱，标题标签⾃带换⾏功能
2：标签居中 <h1 align="center"> 今天天⽓真好，适合打王者荣耀  </h1>
3：⽔平线标签 会在页⾯中显⽰⼀条⽔平线 <hr />默认居中
设置⽔平线的宽度 <hr width="600px"/> 或者<hr width="40%"/> 像素单位占据的是电脑屏幕的⼤⼩，百分⽐占据的是浏览器窗⼝的⼤⼩
size="⾼度"
color=“颜⾊
<hr width="600px"  size="20px" color="red" align="left"/>”⽔平线居左
4：段落标签
<p>  </p>  会将⼀段数据作为整体进⾏显⽰，主要是进⾏css和js操作时⽐较⽅便，段落与段落之间会⾃动换⾏
5：换⾏符 <br />
6：空格符   
7：权重标签 ： <b> </b> 会将内容加⿊显⽰
<i>  </i>  会将内容斜体显⽰
<u>  </u> 会将内容增加下划线
<del>  </del>会将内容增加中划线、
以上权重标签可以嵌套使⽤，并且不会⾃动换⾏。
以上7个标签⽤途举例
8：列表标签
（1）⽆序列表 <ul> <ul/>
<li> <li/>该标签中书写列表内容，⼀个li标签代表列表中的⼀⾏数据                              特点：默认数据前有⼀个⿊圆圈符号
（2）有序列表 <ol> <ol/>
<li> <li/> ：该标签中书写列表内容，⼀个li标签中的⼀⾏数据
特点：会⾃动地给列表进⾏顺序编码，格式将从⼩到⼤并且是连续的
属性：  type：可以改变顺序编码的值，可以是1 a A I，默认使⽤阿拉伯数字编号
（3）⾃定义列表
<dl> <dl/>
<dt> <dt/>：数据的标题
<dd> <dd/>：数据的具体的内容，⼀个dd表⽰⼀条数据
9：图⽚标签
img
src：图⽚路径
本地资源路径：⼀般本地图⽚资源使⽤相对路径即可
路径：
相对路径：从当前⽂件出发查另⼀个⽂件所经过的路径                  绝对路径：从根盘符出发所查⽂件的路径
具体就是将图⽚放进此⽬录的⽂件夹下，让其在这上⾯出现
可以在⽗⽂件夹下新建⼀个⽬录 将图⽚放⼊进去
但是其路径改变了，加上图⽚存⼊的⽂件夹名字，img/
如何设置图⽚的⼤⼩呢：<img src="img/1.jpg.jpg" height="200px"/ >
width：设置图⽚的宽度，如果是单独设置，则在图⽚保证不失真的情况下⾃动缩⼩或放⼤ 单位可以是px也可以是百分⽐
height：设置图⽚的⾼度，如果是单独设置，则在图⽚保证不失真的情况下⾃动缩⼩或放⼤ 单位可以是px也可以是百分⽐
（图⽚不会⾃动换⾏的）
使⽤⽹络资源：
直接复制图⽚资源的url地址
<img src="图⽚地址"  width=“200px" />
属性 ：title：图⽚标题，⿏标放在图⽚上的时候会显⽰
alt：图⽚加载失败后的提⽰语
10：超链接标签
<a > <a/>textarea中cols表示
href：要跳转的⽹络资源路径
本地资源：相对路径
注意：超链接标签中⼀定要声明访问⽅式，访问⽅式可以是⽂字也可以是图⽚
如：⽂字访问⽅式 代码以及结果如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。