HTML
HTML 超文本标记语言
HTML特征:
1.1 HTML标签
标签也称为标记。
标签的种类：
1.1.1 head标签
-
meta 提供基本网站元信息的标签
<meta charset="UTF-8"> <!--标签的属性：使用的编码—'utf-8'-->
-
title 显示网站的标题
-
link 链接css资源文件、网站图标
<link rel="stylesheet" href="css/index.css">
-
script 链接脚本js(JavaScript)文件
<script src="js/index.js">
-
style 内嵌样式
1.1.2 body标签
1.1.2.1 标题标签
h1~h6标题标签
例：
标题1
1.1.2.2 段落标签
p标签 段落标签
<p>
人们感动于老英雄淡泊名利无私奉献的精神，敬佩老党员一辈子深藏功名、坚守初心的境界大家纷纷表示。
</p>
 ；空格字符
1.1.2.3 超链接标签
a （anchor 锚点）超链接标签
-
href :
-
title 鼠标悬浮上的标题
-
style 行内样式
-
target 目标
-
默认是_self ，在当前页面中打开新的链接
-
_blank 在新的空白页面打开新的链接
<a href="https://www.apeland.cn" style="text-decoration:none;color:red; " title="小圆圈">小猿圈</a>
<!--text-decoration:none 去掉链接的下划线-->
<h6 id="top"></h6>
<a href="#top">回到顶部</a> <--跳转到 id="top" 处-->
1.1.2.4 图片标签 img
-
src 链接的图片资源的地址
-
title 鼠标悬浮时显示的标题
-
style
-
alt 图片加载失败的时候显示的标题
<img src="images/timg.jpg" alt="校花" width="200" height="300"><--width 图片宽度，height 图片高度-->
图片可以和超链接合用 a + img:
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&" title="美眉">
<img src="images/timg.jpg" alt="校花" width="200">
</a>
1.1.2.5 字体标签
<u> </u> 下划线
<b> </b> 加粗
<strong> </strong> 加粗
<em> </em> 斜体
<i> </i> 斜体
1.1.2.6 特殊字符
-
：空格 （non-breaking spacing，不断打空格）
-
<：小于号（less than）
-
>：大于号（greater than）
-
&：符号&
-
"：双引号
-
'：单引号
-
©：版权?
-
™：商标?
1.1.2.7 列表标签
1.1.2.8 表格标签 table
<!--border 外边框，cellspacing外边框间的间隙，width宽度填充整个屏幕-->
<table border="1" cellspacing="0" width="100%">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>沛齐</td>
<td>19</td>
<td>女</td>
</tr>
</table>
1.1.2.9 表单标签form
<1.>form表单
<2.>表单控件分类
(1).input 组元素
（2).select 下拉列表 ： multiple
(3).textarea标签
textarea 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
<textarea name="" id="" cols="30" rows="10"></textarea>
1.1.2.10 div标签
div（division：分割）标签称为盒子标签
div标签：把网页分割成不同的独立的逻辑区域
<div class="top_l">
<a href="#">小米商城</a>|
<a href="#">MIUI</a>|
<a href="#">lot</a>
</div>
如何让文本垂直和水平居中？
-
让行高等于盒模型的高度实现垂直居中
-
使用text-align:center；实现文本水平居中
<style>
div{
width:200px;
height: 60px;
background-color: red;
text-align:center;
line-height: 60px;
}
</style>
<div>
wusir
</div>
1.1.2.11 span标签
span标签: 小区域标签,在不影响文本正常显示的情况下，单独设置对应的样式
<div class="top_l">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">MIUI</a>
<span class="sep">|</span>
<a href="#">lot</a>
<span class="sep">|</span>
<a href="#">云服务</a>
</div>
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span class='active'>央视网消息</span>（新闻联播）：中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。
</p>
1.1.2.12 lable标签
lable标签：它中的for属性跟表单控件的id属性有关联
<form action="">
<label for="username">用户名：</label>
<input type="text" id="username">
<label for="pwd">密码：</label>
<input type="text" id="pwd">
</form>
1.1.2.13 br标签、hr标签
<br> 换行标签
<hr> 分割线标签
1.2 HTML标签的嵌套关系
1.块级标签（又叫行级标签）
-
1.独占一行
-
2.可以设置宽高，如果不设置宽，默认是父标签的100%宽度
常用的块级标签有: h1~h6 、ul 、ol 、li 、form 、table 、tr 、p 、div
2.行内标签（也叫内联元素）
-
1.在一行内显示
-
2.不可以设置宽高，如果不设置宽高，默认是字体的大小
常用的行内标签有: b 、strong 、i 、em 、a 、td 、span
3.行内块标签
行内块是属于行内标签的
行内块标签：input 、img
4.在网页中：行内转块和行内块是非常实用的
-
我们可以通过display属性进行强制修改规则。
-
显示方式 display :
-
inline 显示行内
-
inline-block 显示行内块
-
block 显示块
<style>
.box{
width: 200px;
height: 200px;
background-color: yellow;
display: inline;
}
a{
width: 100px;
height: 40px;
background-color: red;
/*显示方式： block 显示块，inline 显示行内 inline-block 显示行内块*/
display: inline-block;
/*文本排列方式：left-靠左 center-居中 right-靠右*/
text-align: center;
/*行高：一行的高度。当行高=盒子模型的高度 实现垂直居中*/
line-height: 40px;
/*文本修饰：none-无修饰(去除下划线)，underline-下划线 ，line-through 删除线 ，over line-上划线*/
text-decoration: underline;
color: #333333;
}
</style>
<body>
<p class="box">wusir</p>
<a href="">百度一下</a>
<del>aaaaa</del> /*删除线*/
</body>
5.嵌套关系：
-
1.块级标签可以嵌套块级和行内以及行内块
-
2.行内标签尽量不要嵌套块级
-
3.p标签不要嵌套div，也不要嵌套p，可以嵌套 a / img / 表单控件
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML