HTML
超文本标记语言
是一种创建网页的标准标记语言
html不是编程语言 ，是标记语言，就是一套标记标签
一、html语法格式。
写法： 尖角号包裹着关键词
比如：<html></html>
html 通常是成对出现的
分为开始标签和结束标签
<!DOCTYPE html>（这一层不区分大小写）
作用： 声明HTML5文档
根元素：<html></html>
根元素中划分为
<head></head>放元素、文件、样式和
网页中能看见的都放在body中<body></body>
meta 设置
charset 字符集
字符：UTF-8 gbk gb2312
（文件中的字符集和浏览器中的字符集得对应上，否则出现乱码）
<title></title> 对应整个网页上边的标题
二、注释事项。
1.命名：数字 字母 下划线 数字不能开头 d01 d_01
2.符号要在英文状态下打
3.改 title
4.是标签就可以有属性
属性=”属性值”
单标记：<meta/>
双标记：<body></body>
F12或右键检查可以查看代码
<p></p> 段落
三、标签的使用。
p标签独占一行，宽度100%
嵌套标签：因为标签能加样式
<span></span> 中也能装文字，不独占一行，宽高也不是100%
<h1>—<h6> 标题标签
<h1></h1>~<h6></h6>标题由大到小，自带加粗属性。
<br/> 换行 单标记标签
<hr/> 分割线 单标记标签
网页中按空格键只显示一个空格
一个 代表一个空格
空格：
尖角号： < >
左尖角号<
右尖角号>
<>
<img/> 图片（是标签就有属性）
src 路径
src=”图片路径”(属性=”属性值”)
<b></b>加粗效果
<i></i>斜体效果
<em></em>斜体效果
<sup></sup>上标效果
<sub></sub>下标效果
标签嵌套
<h1>
标题
<sub>下标</sub>
</h1>
效果：标题 下标
既是粗体又是倾斜
<b><i>加粗倾斜</i></b>
标签开始与结束必须对称
四、练习代码和注释。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>海康</title>
<!-- 头部加入外部链接，link标签引入css样式表，href表示路径，"样式表的地址"-->
<!-- rel说明这是一个样式表，type说明他是css文本 -->
<!-- href根据文件路径来定，rel和type不变 -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- 页内样式style放在head里面,凡是页面中相同的标签都会被加上相同的样式 -->
<style>
i{
color: aquamarine;
width:6.25rem;
height: 6.25rem;
}
b{
color: aquamarine;
width:6.25rem;
height: 6.25rem;
}
/* 样式用类选择器，允许重复命名 */
.d_1{
background-color: antiquewhite;
}
/* js中的功能时可以用id，不允许重复命名 */
#a1{
background-color: #0055ff;
}
</style>
</head>
<body>
<!-- 行内样式都写在style里面，样式与样式之间用分号隔开 -->
<!-- <p style="color:blue;width: 31.25rem;height: 3.125rem;">
您好！hello!
</p> -->
<i>
hello!
</i>
<b>
加粗！
</b>
<!-- 类选择器,给这个标签取一个名字，只给这个标签加样式 -->
<b class="d_1">
加粗！
</b>
<b id="a1">
加粗！
</b>
<b>
加粗！
</b>
<b>
加粗！
</b>
<br />
<em>
层叠样式表
</em>
<!-- <p>
13060713716
<b>
<i>
网页设计师
</i>
</b>
</p> -->
<p>
successful!
</p>
</body>
</html>
style.css
em{
width: 18.75rem;
height: 18.75rem;
background-color: red;
color:white;
text-align: center;
}
/* p标签可以设置长宽形成四边形 */
p{
width: 18.75rem;
height: 18.75rem;
background-color: red;
color:white;
/* text-align: center;
line-height: 18.75rem; */
/* line-height经常和文本对齐方式一起使用实现居中对齐,行高的属性值一般给外侧包裹盒子的高度。 */
/* 文本装饰text-decoration */
/* none 默认
underline 下横线
overline 上横线
line-through 贯穿横线
blink 闪烁文本
wavy 波浪线
dotted 点虚线 */
text-decoration: underline overline line-through wavy blue;
/* 线,线的类型,颜色 */
text-transform: capitalize;
/* 文本转换：text-transform:
值：
uppercase 大写
lowercase 小写
capitalize 开头字幕大写
*/
/* 文本缩进,text-indent后面接像素值。 */
text-indent: 3.125rem;
}
五、运行截图。
