html+css-11.html1.1常用的html标签1.2元素1.3标签语义化2.css2.1基本语法和引入方式2.

1.html

1.1 常用的html标签

【A】
<!--... -->定义注释
<!DOCTYPE>定义文档类型
<a>定义链接跳转 href="" target="_blank" 跳转到新链接  target="_self"在当前链接打开
<article>定义文章
<aside>定义页面内容之外的内容
<audio>音乐播放器 src = "" autoplay ="autoplay" 自动播放 loop="loop"  controls  //循环播放(HTML5)
【B】
b 加粗
br 换行
big 变大
body 网页主体
button 按钮
【C】
<col>定义表格中一个或多个列的属性值
<canvas> 定义画布图形
<caption>定义表格标题 ---表格外的说明内容
<colgroup>定义表格中供格式化的列数
【D】
div 划分块结构
dl  dt --- title  dd --- description 定义列表
datalist 下拉列表
【E】
em 斜体
<embed> 定义插件（类似于视频的插件）
【F】
form 表单
frame  定义框架集的窗口或者框架
footer 底部（HTML5）
figure  figcaption(HTML5)图文的组合 --- 上边是图片 下边是文字
【H】
hr 水平线
h1-h6 标题 下标越大 字体越小
html  根元素
head 网页的头部
header  页面的头部
【I】
i 斜体
img 插入图片
input表单元素 text 文本 password 密码
【J K】
【li】
ul li 无序列表 默认小黑点
ol li 有序列表 默认数字
link 外链式
label 和 input 一起使用
【M】
meta 元信息 编码 关键词 描述 视口。。。
menu 定义菜单
map 定义图像
mark 标记文本
meter 进度（HTML5）
【N】
nav (HTML5) 导航栏
【O】
ol  有序列表
option 下拉列表 和select 配合使用
object 定义内嵌对象
【P】
p 定义段落
param 定义对象的参数
progress 定义任何类型的任务的进度
【S】
s 中划线
sup 定义上标文本
sub 定义下标文本
span 定义小块 小图标
style 内嵌式的标签
script 定义客户端脚本
section 相当于div 用来划分块 移动端常用（HTML5）
small 定义小号字体
source 定义媒介源
select  option 下拉列表
strong 定义强调文本 加粗
【T】 
title 网页的标题
table 单元表格
th tr td  thead tbody tfooter
time 时间标签（HTML5）
textarea 多行文本
【U】
ul li  无序标签
u 下划线
【v】
video  视频播放器

1.2 元素

元素:开始标签和结束标签之间的所有代码
元素= 标签 + 标签属性 + 元素的内容

行内元素：因为它自身的特点 我们通常使用行内元素来进行文字、小图标（小结构）的搭建
a  button  big small datalist em i input mark span select option s strong  b sup sub textarea u
1、不独占一行
2、排列方式:从左往右
3、设置宽高不起作用 如要起作用需要转换为块/行内块 display:block /display:inline-block
4、不设置宽高是它本身内容的宽高
5、天生自带display:inline
6、行内元素里不能嵌套块级元素(特殊a)
内联元素只能容纳文本或者其他内联元素（此处请注意,不要在内联元素中嵌套块级元素）

块级元素:因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建
table  form  dl  dt  dd  figure  figcaption  div  h1-h6  hr  ul  ol  li  nav  p
1、独占一行
2、排列方式：从上往下
3、可以设置宽高以及盒子模型的其他属性
4、不设置宽高的情况下 它的宽度是父元素的宽度 它的高度是本身内容的高度
5、天生自带display:block
6、块级元素可以嵌套行内
7、ol ul下面 只能是li  dl 下面只能是dt dd
8、p里不能嵌套任何的块级元素  包括它自己本身 可以嵌套行内元素

行内块元素
img  input 
天生自带 display:inline-block

1.3 标签语义化

写logo的时候 尽量用h1标签  因为h1标签的权重比较大
标签语义化 - 含义
合适标签做合适的事情，例如文章段落用p标签，标题用h1-h6标签
标签语义化为浏览器和搜索引擎服务
标签语义化 --- 如何遵守
1、尽量减少使用无意义的标签，例如:span 和div
2、尽量不使用标签本身的css属性，例如b、font、s等标签 如果需要这些样式，那么使用css样式来进行添加
3、在需要强调的部分，使用strong、em,使用样式尽量使用css样式来描述
4、表格搭建时，使用<thead>表格头部</thead> <tbody>表格身体</tbody> <tfoot>表格尾部</tfoot>
5、表格搭建时，使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表</dl>

标签语义化 --- 为什么要遵守
1、利于SEO优化(也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重)
2、在样式丢失的时候，还是可以比较好的呈现结构
3、更好的支持各种终端，例如无障碍阅读和有声小说
4、利于团队的开发和维护，W3C给我们定了一个标准，那么团队都遵守这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率

2.css

2.1 基本语法和引入方式

css基本语法
css 规则由两个主要的部分构成：选择器，以及一条或多条生命(css属性)
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
h1 --选择器 {color:red;font-size:14px} color:red ---整体算作一个声明 color: #000  black  rgb(0,0,0) 表示颜色的三种方式 color ---字体颜色

css 引入方式 之行内式 
语法:写在开始标签里边 打一个空格隔开 style="声明；声明..."

css 引入之内嵌式
语法<style type="text/css"> css样式</style>
内嵌式可以放在head或者body里 建议放在head标签里 title标签的下面

css引入方式之外链式 --- 引入一个外部的css样式表 最好放在head里
<link rel="stylesheet" type="text/css" href="index.css">

css引入方式---导入式
语法:导入式要依赖css样式文件，所以他要放在style或者css样式表里
@import "css 样式路径"
如果style 里面既有内嵌的样式 又有导入的样式 导入式要放在内嵌式的上面：放在下面会报错，导致导入式的样式直接失效。
<style type="text/css">@import "index.css"</style>

css引入方式 - 外链式和导入式的区别
- link和@import虽然都是引入外部的css文件，但是他们是有天差地别的区别的
- link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中
- 他们的加载顺序也是有区别的，当一个页面被加载的时候，link引用css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载
- 当使用javaScript控制DOM去改变css样式的时候，只能使用link标签，因为import是不能被DOM控制的

2.2 css选择器

标签选择器:通过标签名找我们想要加美化效果的标签
class或者类选择器:在标签名(开始标签)里面加上class="按照命名规范的class名" 在样式文件对应的是一个"."
id选择器：在标签名(开始标签)里面加上id="我们自己命名的id名称" 在样式文件中对应的是一个"#"
口号:看到class就要想到小黑点 看到id 就要想到#

通配符选择器"*" :代表页面上所有的标签名 可以用来去掉浏览器默认自带的间距
 
* {
    margin:0; /*外间距*/
    padding:0/*内间距*/
}
1、并集选择器
语法：样式相同的标签可以并列在一起 节约代码量 更加简化 减少代码的多次重复使用
符号是一个逗号
div,p,h3 {
    backgroud-color:red
}
2、交集选择器
可以更精准确地找到我们需要的标签 在class名或者id名前面加上标签名 缩小查找的范围
注意:标签名和class/id名中间没有空格隔开
p#class {
    backgroud-color:red;
}

3、后代选择器
语法:单个选择器 用空格隔开
层级的嵌套最好不要超过3个以上 只留一些关键标签

ol li  {
    list-style:none /去掉ul li前面默认的小黑点/
}

ol li strong {
    backgroud-color:red
}

4、子代选择器 
符号： >  如div>span
子代选择器 只作用于儿子这一代 孙子以及孙子后面的代都不会受影响

5、相邻兄弟选择器
strong + span {
    backgroud-color:red
}
加号前面的选择器只是用来作为我们查找兄弟的参照标签 它不参与样式的影响
翻译:寻找strong标签的兄弟 而且是紧挨着的兄弟才可以
+ 相邻兄弟
～ 所有的兄弟

6、属性选择器
属性:分为标签天生自带 和 我们自定义的标签属性
符号:[属性名]
[属性名="属性值"]
<div zf="zhufeng"></div>
<input type="text">
[type="text"] {
    backgroud-color:green
}
[zf] {
    background-color:red
}

2.3 css 伪类选择器

a:link 没有访问之前文字的颜色
a:visited 向已访问的链接添加样式
href="#" 我们要的访问地址没有链接 a:visited{color:red} 不起作用
href="http://www.zhufengpeixun.com" a:visited {color:red} 就会起作用
a:hover 表示鼠标移上的效果
a:active 表示鼠标按下(没有抬起时)的效果

表单元素input:获取焦点(鼠标光标) 失去焦点(鼠标光标)
input:focus 获取焦点
input:blur 失去焦点

input  {
    默认样式
    boder: 1px solid #000
}
input:focus {
    boder: 1px solid red
}
css3 新增伪类元素
:not 除了
:last-child 最后一个子元素
ul li :not(:last-child) {
    /*除了最后一个li没有右边框线 其余的都有*/
    border-right:10px solid #000
}

:nth-child(n) 第几个元素 odd 奇数行 even 偶数行

ul li:nth-child(odd) {
    background:red
}

ul li:nth-child(even) {
    background:red
}

:only-child 仅仅/唯一的  只包含一个子元素的生效
<div>3个span</div>
<div>1个span</div>
span:only-child  {
    width:50px;
    height:100px;
    backgroud:red;
}

:nth-last-child  倒数第几个元素

ul li nth-last-child(2)  {
    backgroud:red //倒数第二个元素生效
}
:first-of-type 第一个同级兄弟元素
    p:fisrt-of-type {
//第一个同级兄弟元素 即第一个p元素
}
:last-of-type  最后一个同级兄弟元素
p:last-of-type {
    //最后一个同级兄弟元素 即最后一个p元素
}
:only-of-type  只有一个同级兄弟元素
p:only-of-type  {
    //同级只有一个p元素生效   如果存在多个 一个都不生效
}
:nth-of-type(n)  第几个同级兄弟元素
p:nth-of-type  {
    //第几个兄弟p元素生效
}
:nth-last-of-type(n)倒数第几个同级兄弟元素
p:nth-last-of-type(n)  {
    //倒数第几个兄弟p元素生效
}
:empty 空内容
p:empty {
    p 里边是空内容的才会起作用
}

input:checked + span{
    //被选中后的属性 input被选中后旁边span起作用
}

2.4 伪元素选择器

:first-line 伪元素用于向文本的首行设置特殊样式，只能用于块级元素
:first-letter 伪元素用于向文本的首字母设置特殊样式
:before 在元素的内容前面插入新内容
:after 在元素的内容后面插入新内容

p:first-line  {
    /*第一行文本内容*/
    background-color:red
}

p:first-letter  {
    /*第一个字母设置为100px*/
    font-size:100px;
}

li:after {
    display:inline-block;
    content:"";//这个属性不能省略 如果没有这个属性:after样式不会起作用
    width:20px;
    height:20px;
    backgroud-color:red
}
口号:只要碰到伪元素 before和after就要加content=""
只要是设置宽度不起作用 就加display:block
display:block 独占一行
display:inline-block 不独占一行

2.5 选择器的权重

标签选择器  伪元素选择器  权重   
div         1
class/类选择器 权重
.right     10
id选择器 权重
#right   100
通配符选择器 权重
*      0-1
行内样式 也是1000

权重不相等的情况如何比较:谁的权重大  听谁的样式
权重相等的情况如何比较:遵循就近原则 下面的会覆盖上面的
权重相等  不遵循就近原则 可以用 !important 1000
先从高等级进行比较  高等级相同时 才比较低等级

!important > style > id > class > 标签 > 通配符

动力: 这是我的学习笔记(来源于视频或者查阅文档),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!