认识html标签的规则
html中我们用标签来进行标记，HTML标记标签通常被称为 HTML 标签 (HTML tag)。
【标签语法】
1、用尖括号包裹关键词；
2、标签是成对出现的，由开始标签和结束标签组成。
3、结束标签比开始标签多了一个“/”（反斜杠）
但是也有一些特殊的标签，它们被称为**单标签**，或是**自闭合标签** 或者“空标签”, 例如：<br/> 、<img/>
html 的基本结构
gb2312 字符集针对亚洲国家，只识别简体，不识别繁体（现在咱们的同胞台湾还在使用繁体字）
gbk 可以识别繁体
Unicode 万国码，国际通用编码
utf-8 是unicode的升级
<!DOCTYPE html> //文档声明，告知浏览器此文档所使用的规范，如果不写就是怪异模式
<html lang="en"> //语言类型，lang=“en”代表的是英文，lang=“zh-CN”代表的是中文
<head>
<meta charset="UTF-8"/> //gbk,gb2312,
<meta name="keywords" content="关键字" />
<meta name="description" content="描述的文字">
<title>html的基本结构</title>
</head>
<body>
可视部分
</body>
</html>
p 段落标签
<p>我是一个段落p</p>
超链接
target 属性常用的两种方式：_self _blank
<a href="#" target=“_self” > 百度</a>
标题 h1-h6
快捷键：h{级标题}*6
图片标签 img
<img src="" title="" alt="" />
写一个页面所需要的几门语言
-
html: 它是一个超文本标记语言，为什么是超文本呢？因为它不仅可以单纯的表示文字，还可以表示音频、视频、图片等。（骨架）
-
css：层叠样式表，它主要是用来美化页面的。（衣服、化妆品）
-
js：javascript是一门轻量级的编程语言。例如：页面中的点击事件，以及一些业务逻辑（行为和动态）
标签的特点
-
都是有尖括号括起来
-
成对出现，由开始标签和结束标签组成
-
结束标签比开始标签多了一个反斜杠
特殊情况：有一些标签例如 img、meta 并不是成对出现的，这类标签叫做“单标签”或者是“空标签”或者是“自闭合标签”
标签的属性
标签的属性：属性提供了有关 HTML 元素的更多的信息，用来描述某个特征和功能的。可以分为内置属性和自定义属性。
表现形式：属性总是以名称/值对的形式出现，比如：name="value"。（键值对） 注意的细节：
-
属性总是在 HTML 元素的开始标签中规定 （跟在关键词的后面） 以键值对的形式出现 元素可以有多个属性，
-
属性和属性之间至少要有一个空格
-
属性是没有先后顺序的
例如下面的例子：
<img src="a.jpg" alt="欢迎你们加入第十二期css图片" title="加油">
html的基本结构
文档声明
声明帮助浏览器正确地显示网页 ;
定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档；
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面 ；
一般高版本兼容低版本，所以在工作中我们默认写高版本就可以了(html5文档声明)
文档声明不区分大小写；
文档声明必须放在第一行(因为浏览器是从上到下解析的)
必须写文档声明，如果不写就会发生怪异事件；
文档声明不是一个标签，它只是一个声明；
<!DOCTYPE html> // 文档声明，告诉浏览器以什么样的规范显示页面
<html>
<head>
<meta charset="utf-8"> //国际通用编码，防止乱码
<meta name="description" content="描述的内容">
<meta name="keywords" content="关键词">
<title>网页标题</title>
</head>
<body>
可视区
</body>
</html>
标题标签
标题标签可以分为六级，h1到h6，表象上看，由粗到细，字号由大到小。对于搜索引擎来说，它是由重要程度之分的。h1是最重要的，之后逐次递减。一般一个页面中只出现一次h1. 大部分用在logo
快捷生成：h${$级标题}*6
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
段落p
<p>段落</p>
图片
-
src：图片的路径
-
alt：当网比较慢或者是图片路径不正确，造成图片加载失败，那alt里面设置的如果有文字，就会出现在裂的图片旁边，更有利于用户体验
-
title：当鼠标滑上图片的时候，会出现title里面设置的文字，有一个跟随效果
超链接 a标签
-
href:跳转的网址
-
target：
-
_blank 在新窗口打开
-
_self 在当前窗口打开
a标签href的几个值
-
放的是网址： href=”www.baidu.com”
-
回到顶部：href=”#”
-
禁止跳转：href=”javascript:;”
-
锚点跳转：给每一个模块用id起一个名字，a标签里面的href的值应该是# 加上id里面的那个名字
Document div{ /* 高度这个值和 行高一样的话，就会垂直居中*/ height:500px; line-height: 500px; background:darkturquoise; margin-bottom:20px; /* 文字水平居中 */ text-align: center; }好店直播品质特色实惠热卖猜你喜欢好店直播 品质特色 实惠热卖 猜你喜欢 回到顶部
HTML 字符实体：www.w3school.com.cn/html/html\_…
HTML标签语义化
含义：
-
合理的标签做合理的事情
为什么要遵循标签语义化：
-
利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
-
在样式丢失的时候，还是可以比较好的呈现结构；
-
更好的支持各种终端，例如无障碍阅读和有声小说等；
-
利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；
日常工作中怎样遵循标签语义化：
-
尽量减少使用无意义标签，例如span和div；
-
尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
-
在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
-
列表搭建时，使用
<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表 ；
补充的几个标签
-
div：大盒子标签，主要用来划分大区域用的
-
span：小盒子标签，主要用来划分小区域用的
-
格式化标签
-
加粗：b或者strong
-
斜体：i或者em
-
删除线：del和s
-
下划线：ins 和u
-
预格式化标签pre：按照预定设置好的格式进行显示
-
视频：video
-
音频: audio
-
控制器：controls
-
自动播放:autoplay
-
循环播放：loop
-
iframe：iframe 元素会创建包含另外一个文档的内联框架
-
frameborder="1" 的时候显示边框
-
frameborder="0" 的时候不显示边框
属性
值
描述
-
left
-
right
-
top
-
middle
-
bottom
不赞成使用。请使用样式代替。
规定如何根据周围的元素来对齐此框架。
- 1
- 0
规定是否显示框架周围的边框。
-
pixels
-
%
规定 iframe 的高度。
URL
规定一个页面，该页面包含了有关 iframe 的较长描述。
pixels
定义 iframe 的顶部和底部的边距。
pixels
定义 iframe 的左侧和右侧的边距。
frame_name
规定 iframe 的名称。
-
""
-
allow-forms
-
allow-same-origin
-
allow-scripts
-
allow-top-navigation
启用一系列对 中内容的额外限制。
-
yes
-
no
-
auto
规定是否在 iframe 中显示滚动条。
seamless
规定 看上去像是包含文档的一部分。
URL
规定在 iframe 中显示的文档的 URL。
HTML_code
规定在 中显示的页面的 HTML 内容。
-
pixels
-
%
定义 iframe 的宽度。
三大列表
1、无序列表：ul、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。
<ul>
<li>上班</li>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
2、有序列表：ol 、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。
<ol>
<li>上班</li>
<li>吃饭</li>
<li>打豆豆</li>
</ol>
3、自定义列表
dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签
<h3>一日三餐</h3>
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>包子</dd>
<dt>午餐</dt>
<dd>盖饭</dd>
<dd>鸡蛋面</dd>
<dt>晚餐</dt>
<dd>小龙虾</dd>
<dd>饮料</dd>
</dl>
css 引入的几种方式：
1、行内式
<div style="color:deeppink;">你们都很棒！</div>
2、内嵌式：在head里面通过style标签来写，如下
<style>
div,p{
width:500px;
height:200px;
background:greenyellow;
color:hotpink;
}
</style>
3、外链式，在head里面通过link标签把样式表给链接过来。
<link rel="stylesheet" href="index.css">
4、导入式
<style>
@import "index.css"
</style>
标签的划分
-
块级元素
-
独占一行
-
设置宽、高、外边距、内填充可以起作用，
-
排列方式：从上到下
-
如果不设置宽度，会撑满父级的宽度
-
h1-h6、div、p、ul、ol、li、dl、dt、dd
注意：文字类的元素内不能使用块级元素。 p 标签主要用来存放文字，因此p里面不能放块级元素。
-
行内元素
-
共占一行
-
设置宽、高、垂直方向的margin和padding不起作用，它的大小由自身内容决定
-
排列方式：从左到右
-
a、span、b、strong、em、i、del、big、small
-
行内块
-
共占一行
-
设置宽、高起作用
-
排列方式：从左到右
-
img
标签汇总
-
标题：h1-h6
-
段落：p
-
图片：img
-
超链接：a
-
div
-
span
-
格式化标签：b、strong、i、em、ins、u、del、s
-
pre
-
三大列表：ul、ol、li、dl、dt、dd
display的几个值
-
inline ：转换成行内元素 （一般不用，如果需要直接用行内元素即可）
-
block：转换成块级元素
-
inline-block: 转换成行内块
-
none：消失
面试题：让一个元素消失有几种办法？
-
display：none；
-
visibility:hidden;
-
opacity:0 (控制透明度)
-
通过z-index控制层级（定位元素）
-
通过margin负值移动屏幕的一侧
-
宽高等于0
display：none、visibility 和 opacity 三者的区别
display：none 是彻底的消失，不占位置，但是visibility：hidden;和opacity:0;虽然看不见了，但是位置还在。
清除页面中元素默认自带的margin值和padding值
* 是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，把页面中所有元素默认自带的margin值和padding值都归为0.
*{
margin:0;
padding:0;
}
清除列表前面默认的样式
ul,ol{
list-style: none;
}
清除a标签下划线
a{
text-decoration: none;
}
表示一个元素的宽度（width） 表示高度（height）
<style>
div{
width:200px;
height:200px;
background-color:red;
}
</style>
表示背景颜色：background-color
文字缩进：text-indent
text-indent后面可以跟具体的像素值，也可以跟em，如果是2em的时候代表缩进2个字的距离。
<style>
p{
/* text-indent: 10px; */
text-indent:2em;
}
</style>
文字大小：font-size
p{
font-size:26px;
}
文字颜色：color
文字字体：font-family
如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号
font-family:"宋体","Times New Roman",Georgia,Serif;
控制文字粗细：font-weight
-
400 正常粗细===normal
-
700 ===bold
-
900 ===bolder
如果用了b、strong，我不想让文字加粗，font-weight：normal(400);
<style>
p{
font-weight: bold;
}
b{
/* 400 */
font-weight: normal;
}
</style>
控制文字倾斜 :font-style
-
font-style:italic; 让文字倾斜
-
font-style:normal; 让文字正常
Document span{ font-style: italic; } i{ font-style:normal; } span 斜体
让块级元素水平居中：margin:0 auto;
div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
行高：line-height
让文字垂直居中
height的值和line-height的值相等
li{
height:35px;
line-height:35px;
}
边框：border
dashed：虚线
solid：实线
<style>
div{
width:200px;
height:200px;
/* border:2px solid darkturquoise; */
border:2px dashed darkturquoise;
}
</style>
border-style可能的值
值
描述
none
定义无边框。
hidden
与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted
定义点状边框。在大多数浏览器中呈现为实线。
dashed
定义虚线。在大多数浏览器中呈现为实线。
solid
定义实线。
double
定义双线。双线的宽度等于 border-width 的值。
groove
定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge
定义 3D 垄状边框。其效果取决于 border-color 的值。
inset
定义 3D inset 边框。其效果取决于 border-color 的值。
outset
定义 3D outset 边框。其效果取决于 border-color 的值。
inherit
规定应该从父元素继承边框样式。
珠峰动态完整案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
body{
background:lightblue;
}
.main{
width: 500px;
margin:0 auto;
border:2px dashed darkcyan;
}
h3{
height: 50px;
line-height: 50px;
font-weight: normal;
font-size:22px;
text-indent: 30px;
}
.more{
font-size:14px;
}
li{
height: 50px;
line-height: 50px;
text-indent: 30px;
}
li:hover{
background:lightseagreen;
}
span{
color:darkcyan;
}
</style>
</head>
<body>
<div class="main">
<h3>珠峰动态 <a class="more" href="">更多</a></h3>
<ul>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
<li>
<a href=""><span> 珠峰成长的秘密</span>兴盛衰败一挥间，长留慈悲在心念</a>
</li>
</ul>
</div>
</body>
</html>
珠峰故事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0 ;padding:0;
}
ul,ol{
list-style: none;
}
body{
background:lemonchiffon;
}
a{
text-decoration: none;
color:lightgreen;
}
li{
height:35px;
line-height: 35px;
}
.main{
width:500px;
margin:0 auto;
border:1px dashed darkorange;
padding:20px;
}
.icon{
width:16px;
height:16px;
line-height:15px;
text-align:center;
background:indianred;
display:inline-block;
font-size:12px;
color:#fff;
}
.special{
color:lightblue;
}
</style>
</head>
<body>
<ul class="main">
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
<li>
<a href="">
<span class="icon">1</span>
<span class="special">珠峰就业岁末，</span>珠峰就业还在一直创造奇迹
</a>
</li>
</ul>
</body>
</html>
