HTML标签学习
文章目录
head标签学习
- 网页标题标签
<title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 -->
- 编码格式标签
<meta charset="utf-8" /> <!-- H5网页解析编码标签 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- H4网页解析编码标签 -->
- 网页搜索优化标签
<title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 -->
<meta name="Description" content="本网页是关于HTML的head的学习,666,哈哈哈"/> <!-- 网页描述 -->
<meta name="Keywords" content="azb,lll,xxx"/> <!-- 网页关键字 -->
<meta name="author" content="安老师"/> <!-- 网页作者 -->
- 网页指定跳转标签
<meta http-equiv="refresh" content="5;url = https://www.baidu.com"/><!-- 表示五秒后跳转指定URL -->
- 其他标签
CSS或js引入的标签
body标签学习
body文本标签
1.标题标签
h1到h6:会将其中的数据加粗显示,并且显示依次减弱,标题标签自带换行功能(块级标签)
属性:align : center right left
<h1 align="center">我是标题</h1>
<h2 align="center">我是标题</h2>
<h3 align="middle">我是标题</h3>
<h4 align="right">我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
2.水平线标签
hr:会在页面中显示一条水平线,默认居中显示
属性:
- width="宽度”设置水平线的宽度
- size=“高度”
- 设置水平线的高度
- color="颜色”设置水平线的颜色
<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">
3.段落标签
p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)
特点:段间距比较大
4.换行符标签
br:告诉浏览器需要在此位置换行
5.空格符标签
 :告诉浏览器在此位置增加空格
6.权重标签
- b:会将内容加黑显示
- i :会将内容斜体显示
- u:会将内容增加下划线
- del :增加中划线
权重标签可以随意叠加
注:
1标签的属性是对标签的功能进一步的补充 ,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
2像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小。
<p>
<u>东方网·演兵场4月6日报道</u>:<br>多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到
</p>
<p>
<b>东方网</b>·演兵场<i>4月6日</i>报道:多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,<del>披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到</del>
</p>
<b><i><u><del>今天适合学习d</del></u></i></b>
文本标签全部代码
<html>
<head>
<meta charset="utf-8"/>
<title>body标签学习</title>
</head>
<body>
<h1 align="center">我是标题</h1>
<h2 align="center">我是标题</h2>
<h3 align="middle">我是标题</h3>
<h4 align="right">我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">
<p>
<u>东方网·演兵场4月6日报道</u>:<br>多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到
</p>
<p>
<b>东方网</b>·演兵场<i>4月6日</i>报道:多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,<del>披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到</del>
</p>
<b><i><u><del>今天适合学习d</del></u></i></b>
</body>
</html>
body列表标签
1.无序列表
ul
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据特点:默认数据前有一个黑圆圈符号.
2.有序列表
ol
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据特点:
会自动的给列表进行顺序编码,格式从小到大并且是连续的。
属性:type:可以改变顺序编码的值,可以是1 a A I, ,默认使用阿拉伯数字进行顺序编码
3.自定义列表
dl
dt :数据的标题
dd:数据的具体内容,一个dd表示一 条数据、
列表标签全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>body标签(列表标签)</title>
</head>
<body>
<h3>列表的学习</h3>
<hr >
<h3>无序列表</h3>
<ul>
<li>北京</li>
<li>广州</li>
<li>上海</li>
<li>西安</li>
</ul>
<h3>有序列表</h3>
<ol type="A">
<li>xx</li>
<li>hh</li>
<li>ll</li>
<li>qq</li>
</ol>
<dl>
<dt>java</dt>
<dd>python</dd>
<dd>go</dd>
<dd>shell</dd>
<