html基础学习

head标签

• head里面主要是 源信息标签

• 作用是，设置网站的源信息

• charset 属性，用来定义文本的编码格式

  1. UTF-8 万国码，目前开发中最常用
  2. GB2312：中文码
  3. 通常都把 charset 的值设置成UTF-8 ，如果不设置 charset 属性，可 能会导致页面乱码，解决方案是设置成utf-8即可

• author 属性，用来定义网站的作者，一般是公司的名字

• keywords 属性，用来定义网站的关键字，如果有多个关键字用英文逗号隔开，关键字最好不要超过10个

  1. 精准的keywords 值，更加有利于SEO（搜索引擎优化）

• description 属性，用来简单的描述网站的内容，不要超过100字，有利于SEO

• meta的另一种写法
  >

• title 标签，他是一个双标签，他的SEO权重很大，因此需要谨慎书写里面的内容

• head标签里的内容，不会渲染在页面中

• body 标签里面的内容，会渲染在页面的可视区域

标签分为 行属性标签 和 块属性标签

块属性标签

1. div 标签
   • 没有任何意义的标签，通常用来进行页面的布局
2. h 系列标签
   • h1-h6标题
   • 在一个页面中，h1 最多只能出现1次，h2 最多出现20次，h3-h6 次数不限
   • h1的用法：
     1. logo处
     2. 资讯详情页的大标题
   • 由于h1的权限较大 只能出现在以上两个地方
3. p 标签，段落标签，它里面一般包含一段文字
4. 分割线 <hr />
5. 无序列表
   ul>li
   • 可以设置他的 list-style-type 属性
     1. square :实心方块
     2. circle :空心圆
     3. dotted 实心圆
     4. none :取消列表样式
     5. disc：高版本系统下的默认样式
6. 有序列表
   ol>li
   • 可以设置他的 list-style-type 属性
     1. lower-alpha ：小写字母
     2. upper-alpha ：大写字母
     3. lower-roman ：小写罗马文
     4. upper-roman ：大写罗马文
     5. ol,ul,li 都是块属性标签
   • li 是列表项,并且 ol，ul 的子元素，必须是 li标签
7. 定义列表
   dl>dt
dl>dd
   1. dl：块标签，定义列表的父元素
   2. dt：块标签，定义列表的 标题项
   3. dd：块标签，定义列表的 列表项
8. address 地址标签，一般的，他的内容是一个地址
9. blockquote 引用标签，一般引用的是一段文字，他的 cite 属性表示改文字引用的文献名目

不要使用html 官方没有的标签，虽然也会被浏览器渲染，但是不符合w3c 规范

---

行标签

1. sapn 标记标签，没有实际意义，通常用来渲染文字
   <!-- iframe 框架src="需要显示的页面地址"height="设置高度"width="设置宽度" -->

2. a 标签

   • href 属性: 用来设置超链接的地址
   • target 属性: 设置标签页的打开方式
     1. _blank 在新标签页打开,指向,打开新页面,分页
     2. _self 默认值,在当前页面打开
        作用：
   1. 设置一个超链接
   2. 设置锚点

      最常用的效果是 回到顶部
      如果在开发中需要设置 a 标签点击没有效果，则可以设置 href 属性为 ## 即是： href=“##”
      如果需要设置回到顶部 则 herf=“#”
      不要设置 href 为空，这样会导致页面刷新

3. 下载文件

   • a. 如果设置的下载文件是，音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置文件的路径

   • b. 如果是 文本类型的文件，可以直接那文件路径设置在href属性上，直接由浏览器打开

4. strong 强调标签

5. em 强调并且斜体

6. b 文本加粗（不常用，H5中即将废弃）

7. i文本斜体

8. var 文本斜体（不常用，H5中即将废弃）

9. q 标签 ，引用标签，他引用的内容都比较简短

10. pre 标签，格式化输出

11. code 标签，一般是嵌套代码使用

    1. <在html中渲染为<
    2. >在html中渲染为>
    3.   在html中渲染为 空格

12. img 标签，是一个单标签

    • src 属性： 用来设置图片资源路径

      • 图片资源路径 分为三种
        • a.网络路径
          图片的网络地址
        • b.绝对路径
          从服务器的根目录开始直到找到需要的文件的整个路径,一般不使用
        • c.相对路径
          相对于当前文件所在的资源路径
        • ./ 代表的是当前目录*
        • .//代表的是上一级目录*
        • 相对路径在开发中最常用*

    • alt 属性，用来解释图片的内容
      作用：
      1. 当图片没有被加载出来的时候，会显示alt的内容
      2. 通过alt属性，告诉浏览器当前图片的内容

    • width/height
      设置图片的宽和高，在实际的开发当中，一般只设置单个的宽或者高，另一侧根据比例显示大小

行快属性的区别

1. 块属性标签
- a.独自占据一行的空间，支持宽和高的设置,设置完宽和高以后，仍然独占一行
       - b.支持上下 padding 和 上下 margin
2. 行属性标签
    - a.不会独占一行空间，从左至右横向排列
    - b.无法设置宽和高，他的宽和高由内容撑开
    - c.不支持上下 padding 和 上下 margin

emmet语法

E代表标签名

1. E*n 创建n个E标签
2. E{自挂东南枝}*n 创建n个内容为"自挂东南枝"的 E 标签
3. E{自挂东南枝&}*n 创建n个内容为"自挂东南枝"+序号的 E 标签，&表示序号，从1开始
4. 箭头 > 表示的是下一个层级元素（子元素）
   E>a 在 E 标签中添加子元素 a 标签
5. 加号 + 表示同级
   E+p 同时创建兄弟元素E和p，不相互嵌套
6. ^表示上一级 ？
   E>p^div 创建 div 标签和 E 标签同级，也就是创建 p 标签的上一级
7. 使用[]设置属性

---

标签嵌套规则

1. 块标签可以作为一个布局标签，嵌套所有的标签
2. 行标签不能嵌套块标签
3. 以下标签不能相互嵌套
   1. p 标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块元素
   2. a 标签不能相互嵌套

css样式表

css 层叠式样式表，他是用来给html结构添加样式的

• 设置类名

  • .类名{
    样式内容
    }

  • text-align: 文本排布，一般放在块标签上，用来控制块标签中 行标签 和 文本的对齐位置
    值：

    1. left：左对齐（默认）
    2. center:居中对齐
    3. right：右对齐

---

css引入方式

css引入方式

1. 行间引入，在标签上，设置style属性，在style中设置样式
   <li style="list-style-type: none;"></li>
2. 内部样式表，在head中设置style标签，在标签中设置样式
   <style type="text/css"></style>
3. 外部样式表 开发时常用
   例1： <link rel="stylesheet" href="./css/style.css">
   例2： <style type="text/css">/* 使用@import 导入css */@import url('./css/goods.css'); </style>

---

link 和 @import 引入 css的区别

1. @import 是css2.1之后才推出的，因此可能存在兼容问题，link不存在兼容问题
2. link 不仅可以引入 css，也可以引入其他类型的文件，功能更加强大,推荐使用link
3. 例:引入网站小图标
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

---

css文本操作

border 属性

1. border-width 设置border的宽度

2. border-color 设置border的颜色

3. border-style 设置border的样式

4. 他们三个也可以合写:

   • border: width style color;

5. border 可以单独给某一个边设置border

   1. border-top 设置 上边
   2. border-left 设置 左边
   3. border-bottom 设置 下边
   4. border-right 设置 右边

6. 常用的 border-style 值

   1. solid 实线
   2. dotted 圆点虚线
   3. dashed 短线虚线
   4. none 隐藏border
   5. double 双实线（不常用）
   6. 3D边框
      • groove 3d凹槽
      • ridge 3d凸槽
      • inset 内嵌
      • outset 外嵌

color 属性，设置文本颜色

值：

1. 英文单词
2. 16进制颜色 0-f ，# 后面跟6位表示颜色的数字，前两位表示红色，中间两位表示绿色，后两位表示蓝色，#aabbcc，如果 两两相等，则可以简写为 #abc
3. rgb（），rgba（）设置颜色，括号当中设置对应的数字，0-255 , 0 表示黑色，255 表示白色，rgb（255,0,0）红色，rgba 中的a 表示透明度，取值范围是0-1,0表示完全透明，1表示完全不透明

文本修饰（text-decoration）

值：

1. underline 下划线
2. overline 上划线
3. line-through 中划线（删除线)
4. none 去掉线（没有文本修饰线）

文本转化 (text-transform)

值：

1. lowercase 全部小写
2. uppercase 全部大写
3. capitalize 单词的首字母大写

行高 (line-height)

对于单行文本，line-height 设的高度如果和标签高度相同，则可以做 垂直居中效果，如果是多行文本，可以理解为行间距   

direction 设置文字方向

1. ltr 默认，从左到右
2. rtl 从右向左

• text-indent 首行缩进，他的值是具体的数值
• word-spacing：设置 两个单词之间的距离
• letter-spacing：设置 两个字符之间的距离（中文属于字符）

overflow 属性

• 处理子级内容超出当前容器 的部分，主要是对父级元素添加该属性
  值：

  1. hiden 超出部分隐藏
  2. scrool 滚动查看超出的部分
  3. auto 自动渲染超出的部分
  4. overflow-x 控制x轴方向的超出部分
  5. overfloe-y 控制y轴方向的超出部分

• white-space 属性，设置文本的格式

  1. nowrap 强制不换行
  2. normal 强制换行

• text-overflow: 对超出的文本的内容剪裁

  1. ellipsis 超出的内容变为 省略号
  2. clip 直接裁掉超出的文本内容

• 单行文本超出添加省略号

  1. overflow:hidden;
  2. white-space: nowrap;
  3. text-overflow: ellipsis;

字体设置

1. font-style 设置字体的样式
   值：

   1. italic 设置字体为斜体
   2. normal 字体正常

2. font-weight 设置字体是否加粗
   值：

   1. normal 默认
   2. bold 加粗
   3. bolder 相对bold加粗
   4. 他的值也可以是具体的整百数字，范围是100-900
      1. 400->normal
      2. 700->bold
      3. 900->bolder

3. font-size 设置所修饰的字体的大小

   1. 目前浏览器默认大小是 16px
   2. PC浏览器的最小字体大小可以设置为 12px

4. font-family 设置文字的字体

   1. 可以同时设置多个字体，形如：font-family：‘A’,‘B’,‘C’…;
      含义是 在客户端的设备上匹配 A字体，如果没有A字体，则继续匹配B字体，依次进行匹配，知道匹配成功即可显示匹配到的字体
   2. 通用字体
      1. serif 有衬线（类似锐化）
      2. sans-serif 无衬线

5. font 也是一个 复合型 css属性，可以按照下面的顺序书写
   font：style weight size family；
   **注意:**style 和weight 不是必须写入的内容，如果简写必须要有 font-size 和 font-family
   font:size family；

背景

1. background 设置标签元素的背景

2. background-color 设置背景色

   • 他的值可以是：
     1. 英文单词
     2. 16进制表示颜色
     3. rgb（）表示颜色

3. background-image 设置背景图

   background-image：url（背景图地址）

4. background-repeat 背景图的平铺方式
   值：

   1. repeat 默认，x轴y轴都平铺
   2. repeat-x 沿x轴平铺
   3. repeat-y 沿x轴平铺
   4. no-repeat 不平铺

5. background-position 设置背景图方位
   background-position：x轴方向的值 y轴方向的值；

   值可以是：

   1. 具体的数值
   2. 方位名词组合：left top right bottom center

6. background-attachment 设置背景图固定定位
   background-attachment:
   值：

   1. scroll 默认值，背景图片在跟着页面一起滚动
   2. fixed 根据浏览器可视区域，固定在具体的位置，他的定位参考点是 浏览器可视区域

7. background 是一个复合型属性，可以写在一起，他的顺序是
   background：color image repeat position attachment;

8. 可以单独写
   background:color;
   background:image;

---

diaplay属性

1. 隐藏一个标签元素
   display: none;

2. display 属性，可以用来控制标签元素的显示属性
   值：

   1. block 把元素转化为块属性标签
   2. inline 把元素转化为行属性标签
   3. none 隐藏标签元素

3. 设置内联块元素（行内块元素）

    display: inline-block;
   
    他的本质是 对内显示 块标签属性，对外显示 行标签属性。
   

4. 两个内联块元素之间的缝隙的处理方式
   原因： 两个内联块元素之间键入了回车，回车也是一个字符，它的大小跟父标签的font-size有关

解决办法：

1. 去掉回车键

2. 设置他们父元素的大小为0

注意，字体大小是可以被传递到子元素上的

基础选择器

1. 通配选择器

• *表示通配符，他可以匹配任何标签。

*{css内容}

2. 标签名选择器

E{css内容}给所有标签名为E的元素设置css样式

3. 类名选择器

.类名{css内容}
使用的时候需要在 标签上绑定 class=“类名” 如果有多个类名，使用 空格 隔开，类名最好不要超过5个

4. id选择器

#id名{css内容}
在一个页面当中，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id

5. 群组选择器
   如果多种选择器所表达的内容是相同的，则可以把他们写成群组选择器

.wp,#abc,div{css内容}

层次选择器

1. 后代选择器
   E M{css内容} 通过 E选择器 设置 E 中的 M选择器 的css内容，M可以是E的子集，也可以是E的后代中的某一个选择器

ul li{}

2. 父子选择器
   E>M{css内容} 通过E选择器找到 E选择器下面的子级M选择器，设置css内容

ul>li{}

3. 兄弟选择器
   E~M{css内容} 通过E选择器找到 该元素之后的所有选择器名为 M 的兄弟元素，并设置css样式

.f~li{ }
4.相邻兄弟选择器
E+M{ css内容 } 通过E选择器找到 该元素之后第一个兄弟元素M，并且对M设置css样式。
.f+li{}

伪类选择器

1. a的伪类

伪类，是css系统创建好的内部的类，用来对标签的某一个时机设置样式
link:初始时候的状态
visited:点击之后的状态
hover:鼠标悬浮时候的状态
active: 鼠标按下不松手时候的状态
顺序是 l-> v -> h -> a(先爱后恨)
ie8以后，任何标签都可以添加 ：hover 伪类
可以根据hover 触发 元素本身，以及通过元素能找到的元素 的变化

---

什么时候需要考虑选择器的优先级？
不同的选择器，同时作用于同一个标签元素，并且它们具有相同的css属性设置，对该css属性设置了不同的值

1. 选择器优先级的强弱顺序：
   1. !important 100000
   2. 行间样式，在标签上添加 style属性 10000
   3. id选择器 1000
   4. 类名选择器，伪类选择器，属性选择器 100
   5. 元素（标签名）选择器，伪元素 选择器 10
   6. 通配符选择器 1
   7. 系统默认提供的css属性 0

假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小即是权重的大小,如果他们的值相同，后来者居上

---

盒模型：

在html中，每一个标签都具有一个盒模型

盒模型组成部分：

Content（内容） ，padding（内边距），border（边框），margin（外边 距）

1. content:标签元素内容，一般自定义宽和高，或者由子元素的内容撑开宽和高
2. padding：设置元素内容到元素边框之间的距离
3. border：指的是元素的边框
4. margin：设置 当前元素到相邻元素之间的距离

设置内边距

1. padding-top：num；设置上边距
2. padding-right：num；设置上边距
3. padding-bottom：num；设置上边距
4. padding-left：num；设置上边距
5. 合写:
   1. padding: 上 右 下 左；
   2. 左=右 上！=下
      padding：上 右 下；
   3. 左=右 上=下
      padding：上 右；
   4. 左=右 上=下
      padding：上；

设置外边距

1. margin-top 设置元素上边的外边距
2. margin- right设置元素右边的外边距
3. margin-bottom 设置元素下边的外边距
4. margin-left 设置元素左边的外边距
5. 合写
   1. margin：上 右 下 左；
   2. 上=下 右！=左
      margin：上 右 下 左；
   3. 上！=下 右=左
      margin：上 右 下 ；
   4. 上=下 右=左
      margin：上 右 ；
   5. 上=下=右=左
      margin：上 ；

margin 的经典bug

1. 上下两个兄弟元素的margin重叠问题
   • 上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的
     可以理解为上面元素的margin-bottom和下面元素的margin-top他们的值取最大的一个
     解决办法:给下面的元素添加display: inline-block;
2. 父子级子元素的margin-top传递问题
   • 在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，是的父元素距离他上面的元素为该margin-top值
     解决方法：
     1. a.给父元素添加 overflow：hidden；
     2. b.给父元素添加 border