开头的话：自我反思，发现当初学前端时觉得它超级简单，所以粗心大意，基础薄弱，现马上就要秋招了，重新巩固前端内容，祝自己秋招顺利。

前端工程师：做软件的。
无论前端，还是后端，或是Android开发，ios开发，都是做软件的。那先了解一下软件的系统架构呗！

我们主要是做B/S里面的网页部分

我们主要学什么？

远没有这么简单

什么是结构，表现，行为

html用于描述页面的结构
css用于控制页面中元素的样式
JavaScript用于响应用户操作

W3C 万维网联盟（World Wid Web Consortium）

W3C专门为了定义网页相关的标准而成立。
W3C定义了网页中的HTML，CSS，DOM，HTTP，XML等标准

WHATWG（网络超文本应用技术工作小组）

是一个以推动网络HTML5标准为目的而成立的组织。在2004年，由Opera，Mozilla基金会和苹果这些浏览厂商组成。

HTML&CSS，那些被我遗忘或者忽略的知识点（怪自己以前不写博客）

学习文档，里面非常详细

写一个网页的代码结构：

<!DOCTYPE html>
<html lang="em">
  <head>
    <meta charset="utf-8">
    <title>网页的代码结构</title>
    <style type="text/css">
      #box1{
        background: blue;
        width:300px;
        height: 350px;
      }
      .cla1{ 
        width: 200px; 
        height: 100px;  
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="cla1">
      <p class="cla1" id="box1" style="width: 500px;background: pink">我是p1</p>
    </div>
    <p class="cla1">我是p2</p>
  </body>
</html>
<!-- 注释 -->

我们一层一层，从外到内，从上到下剖析这个结构
<!DOCTYPE html>：html5的文档声明
帮助浏览器识别文档版本。编写网页时一定要在最前头写档声明，如果不写的话会导致有些浏览器进入怪异模式，无法正常显示页面。
<html></html>：网页的根标签，是双标签，非自结束标签。
<head></head>：头部。这个标签里面的内容不会显示在网页的内容上。它告诉浏览器相关信息，浏览器根据这些信息确定如何解析这个网页
<body></body>：身体。我们要编写的网内内容就写在这个标签里面。
<meta charset="utf-8">：设置网页的字符集，防止出现乱码
<title></title>：默认显示在网页的标题栏，搜索引擎在检索页面时，会首先检索title标签的内容。它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名。
<style></style>：里面写样式。通过选择器选择相应的标签，再设置样式
``:当我们的内容，是给开发者看的，不需要让用户看到，就可以用注释

乱码问题

乱码出现的原因：计算机是一个非常笨的东西，它的底层只认识0和1这两个东西。在计算机里保存的任何内容最终都需要转换为0和1的二进制编码来保存(包括我们的网页)。在读取的时候，需要将二进制编码转换为正确的内容。我们可以把这个过程分为两步：

编码：依据一定的规则，将我们的字符转换为二进制字符。
解码：依据一定的规则，将二进制编码转换为字符的过程。
编码和解码所采用的规则叫做字符集。

当我们编码和解码时的字符集不一样的时候，就会出现乱码问题（产生乱码的根本原因）。
在中文系统的浏览器中，默认都是使用GB2312进行解码的。

常见的字符集：

ASCII，ISO-8859-1，GBK，GB2312，UTF-8

为什么会有这么多的字符集，为什么不统一用一个呢？
我们最早的字符集是ASCII，是美国人发明的，它使用7位来保存一个字，一共能保存128个字（英文字母大小写，阿拉伯数字，各种标点符号都算上，正合适）。
后来，计算机传到了欧洲，欧洲在原有的基础上进行了扩充——ISO-8859-1，用8位保存一个字，可以保存256个字。
再后来，计算机传到了阿拉伯国家，亚洲等地，由于各国使用的语言不同，字符集都会被扩充。

中国的字符集：
GBK：国标
GB2312：国标，是中文系统的默认编码

但是，这样并不好，我们希望有一个编码能将所有字符统一起来。于是出现了UTF-8

UTF-8：万国码，支持地球上所有的文字。

我使用的软件开发工具默认编码字符集为utf-8，浏览器默认使用GB2312解码——产生乱码。
解决办法有：

告诉浏览器网页所采用的编码字符集

  <meta charset="UTF-8">

指定开发工具的编码格式为GB2312

HTML

超文本标记语言(Hyper Text Markup Language)，HTML 不是一种编程语言，而是一种标记语言 (markup language)。
“文本”就是我们用记事本等纯文本编辑器（记事本，Sublime）中写的内容，网页就是用纯文本编写的。纯文本里不能插入图片，视频，不能更改字体的大小（注意我们记事本通过格式让字体变大只是让字体显示得大了，没有改变字本身大小）。即是格式化的内容都不能设置。
“超文本”指超链接。
“标记”：HTML用标签的形式来标识网页中不同组成部分。

CSS

层叠样式表（Cascading Style Sheets）：css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。所谓层叠，可以将整个网页想象是一层一层的结构，层次高的将会覆盖层次低的。而css就可以分别为网页各个层次设置样式。

css的语法：

选择器声明块;

p {
    color:red;
}

选择器：通过选择器可以选中页面中指定的元素，并且可以将我们的声明块中的样式应用到选择器对应的元素上。
声明块：紧跟在选择器的后边，使用一对大括号括起来，声明块中是一组一组的名值对结构。（属性名：属性值）。这一组一组的名值对我们成为声明。在一个声明块中，可以写多个声明，多个声明之间使用；隔开。

要学的是有哪些样式和选择器

css的引用方式：

1·行间样式的引入
写法：在开始标签中，写一个style的属性比如: style="......" 在""中间写css的样式。
优先级最高，但不利于代码的维护与重用。
2·内部样式表的引入
写法：在<head>标签里，写一个style的标签，在标签中，通过选择器(div{...css的样式})来控制样式
它的加载速度快，不需要请求服务器，但不利于代码的重用。
- 2-1. id选择器
  写法：首先在相应标签中设置一个ID的属性。如： id="" (""里面是自己设置的ID名)
  在样式表中，通过 “#id名{...css的样式} ”
  id名以英文字母开头，名字唯一
- 2-2.class选择器
  写法：首先在相应标签中设置一个class的属性。如： class="" (""里面是自己设置的class名)
  在样式表中，通过“.class名{...css的样式}”
  class名以英文字母开头，可以重复。
- 2-3.标签名选择器
  写法：标签名{……}
  作用：通过元素选择器可以选择页面中的所有指定元素
3.外部样式表的引入
写法：在head标签里，写一个link标签，用来关联一个css的文件，在css文件中，通过选择器（div{...css的样式}）来控制样式。
利于代码的重用，但需要加载服务器。

<link rel="stylesheet" type="text/css" href="css文件的路径">

优先级：标签名选择器 < class 选择器 < id选择器 < 行间样式

选择器

标签名选择器：div{……}
class 选择器：.wrap{……}
id选择器：#wrap{……}
通配选择器*{……}选择所有的元素
div.class1{... } 选择所有class属性为class1的div标签
复合选择器（交集选择器），选中同时满足多个选择器的元素。针对类选择器的用法，对于id选择器则是多此一举
div, p{... } 设置所有div和p的样式。
选择器分组（并集选择器），通过选择器分组可以同时选中多个选择器对应的元素
+ 相邻兄弟选择器：div + p
作用范围：可以选择相邻的两个元素，元素一定要有同一个父级， + 后面的元素享受样式
div+p{...} 设置所有div之后的段落标签的样式
后代选择器div span{... } ，设置所有div内部的span标签的样式，包括div里的p里的span ;原因:p里的span是后代

div > span{
      border: 1px solid red;
      background:yellow;
}
.......
<div>
    <p>
      <span>我是p里的span</span>
    </p>
    <span>我是div里span</span>
    <span>我是div里span</span>
  </div>

> 子选择器：div > span
作用范围： div下的span会享受样式 ,div里的p里的span不享受 ;原因:p里的span是孙子

div > span{
      border: 1px solid red;
      background:yellow;
}
.......
<div>
    <p>
      <span>我是p里的span</span>
    </p>
    <span>我是div里span</span>
    <span>我是div里span</span>
  </div>

~ 同级元素通用选择器:p ~ span
作用范围：所有相同父级中，位于 p 标签之后的同级的 span 标签享受样式

属性选择器 (非常好用)：标签名[属性名]={......}
- 1. 选择带有某种属性的所有元素：a[属性名]={.....}
    a[href]{……}：设置带有href的a标签
- 1. 选择带有某种属性，并且规定属性值的元素： input[属性名=“属性值”]{......}，

input[属性名^="属性值"]：选取以指定内容开头的元素
input[属性名$="属性值"]：以指定内容结尾
input[属性名*="属性值"]：包含了指定内容

input[type="password"]{
        border: 1px solid red;
        background:yellow;
}

匹配class属性以my开头的Input标签

input[class^="my"]{
        border: 1px solid red;
        background:yellow;
}

伪类选择器
伪类可以理解为一个状态：标签名：A{...}
伪类：就是一些元素身上的特殊状态。如：点击 / 停留 / 获取焦点的文本框
- input:focus{...} 当控制得到焦点时设置....
- p::selection{……} 文字内容选中的状态。这个伪类在火狐中需要兼容——p::-moz-selection{……}
- a:link {color:red;} 链接时是什么格式
- a:visited{color:yellow;}访问后是什么格式
  由于涉及到了用户的隐私问题，visited伪类只能设置颜色。
- a:hover{color:blue;} 鼠标移到那儿之后是什么格式
- a:active{color:black;} 点击的一刹那是什么格式
  根据相关链接操作设置超链接样式（四种状态顺序不可以改）
子元素的伪类
- p:nth-child(n){...}或p:nth-child(2n){background:red;}
  选择属于父级下的第1~n个元素，从第一个元素开始计数，遇到p标签则生效
  n可以用来计算
- p:first-child{...}
  选择属于父级下的第1个元素，并且必须是p标签否则不生效
- p:last-child{...}
  选择属于父级下的第后1个元素，并且必须是p标签否则不生效
- p:nth-of-type(n){...}或p:nth-of-type(2n-1){background:yellow;}
  选择属于父级下p标签的第1~n个元素，从第一个P标签元素开始计数并生效
  n可以用来计算
- p:first-of-type{...}
  选择属于父级下的第1个p标签
- p:last-of-type{...}
  选择属于父级下的第后1个p标签
伪元素
- 首字母：:first-letter
- 首行：:first-line
- ：before指定元素前 p:before
  在p开始标签之后和内容之前，默认这里什么也没有。一般before都要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容

    p:before{
      content: "我会出现在整个段落的最前边";
    }
......
      <p>
        这是一个p标签
      </p>

p里的内容可以选中，但是通过before添加进来的文字不能被鼠标选中

：after 在元素内容之后和结束标签之前插入一些内容
如 div:after{
content:"我是伪类";background:red;
}
否定伪类
- p:not(.hello){……}表示选择除了class为hello的所有p标签。

区别 ~ 和 + ： ~ (同级元素)的作用范围比 + （相邻元素）广
区别空格和 > ：空格 (后代元素)的作用范围比 > （子代元素）广

选择器越短越好，因为涉及到性能问题

块标签block ，如div,p,h标签……
特性：
1 默认是父级100%的宽
2 支持所有的css样式
3 无论多宽或多窄，独占1行 (内容不占整行，但那些地方也不能放其他的内容了。)
内联元素（行内元素）inline，如span，a，iframe
特性：
1 同属性的标签排在同一行
2 内容决定宽度
3 不支持宽高的设置 padding-top / padding-bottom / margin-top /
margin-bottom
4 代码换行被解析间距的大小取决于父级的font-size的大小。
内联块块标签inline-block
属性
1 同属性的标签排在同一行
2 内容决定宽度
3 支持所有的css的样式
4 代码换行被解析，间距大小取决于父级的font-size的大小

块元素主要用于布局，行内元素主要用于文本设置；一般用块元素嵌套行内元素。
a元素内可以嵌套任何元素（块，内联，内联块），但是，不可以嵌套本身。
p元素（块元素）内不可以嵌套任何块元素，如div，p

常见标签讲解

meta标签

1.设置网页的一些元数据，比如网页的字符集、关键字、描述等等。
关键词是一个一个的词语，而网页描述则是一句话。
搜索引擎在检索页面时，会同时检索页面中的关键字和描述，但是，这两个值不会影响页面在搜索引擎中的排名。
2.请求的重定向

  <meta charset="UTF-8">
  <meta name="keywords" content="HTML5,博客，前端">
  <meta name="description" content="发布h5、js等前端相关的信息">
  <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
  <meta http-equiv="refresh" content="秒数;url=目标路径">

title标签

双标签
语义：网页标签。
权重最大

div标签

双标签
语义：无意义。
默认样式：无。
主要用来对我们的页面进行布局

标题标签h1~h6

双标签
语义：标题
默认样式：font-size font-weight margin

去除默认样式

样式初始化文件
reset.css 和 <link rel="stylesheet" type="text/css" href="../css/reset.css">
群组选择器，例
h1,h2,h3,h4,h5,h6{margin:0px；}

权重：h1 > h2 > h3 ......

<h1></h1>标签：标识里面的内容是网页的一级标题，对于搜索引擎来说，它的重要性仅次于title标签，搜索引擎检索完title会立即查看h1的内容。所以h1标签会影响到页面在搜索引擎中的排名。注意，页面中一般只写一个h1，如果h1标签过多的话，搜索引擎会认为该网站为垃圾网站，不予收录。在网站页面中最好不要超过1个。否则会有恶意提高网站权重的嫌疑。
<h2></h2>标签：最好不要超过12个
<h3></h3>标签
<h4></h4>标签：基本不使用
<h5></h5>标签：基本不使用
<h6></h6>标签：基本不使用

段落标签p

双
语义：段落用于大篇幅的文字。
默认样式：margin
p标签在嵌套时不要包含块元素的标签，如p标签。
内容默认独占一行

  <p>
    锄禾日当午，
    汗滴禾下土;
    谁知盘中餐，
    粒粒皆辛苦!
  </p>

发现它并没有换行显示

注意，在html中，字符之间不论有多少个空格，都会当作一个空格解析；换行也会被当成一个空格解析，那么如何正确换行呢？

换行标签br

br标签是一个自结束标签，单标签。注意区分br与hr

  <p>
    锄禾日当午<br/>
    汗滴禾下土;<br />
    谁知盘中餐<br>
    粒粒皆辛苦!<br/>
  </p>

换行成功，也可以一句一个p标签哈

水平线标签hr

在页面中生成一条水平线。

ul标签

双
语义：无序列表
默认样式：margin padding-left list-style-type

li标签

双
语义：列表项
默认样式：list-style-type

ol标签

双
语义：有序列表
默认样式：margin padding-left list-style-type

ul ol li 组合标签用于新闻链接 / 列表格 / 排版布局（无序用的多）

ul / ol 与li 是一对组合标签： ul /ol的第一层子级一定是li li的父级一定是 ul/ol

dl dt dd 标签

自定义列表字典标签

<dl></dl>

双标签
语义：自定义列表
默认样式：margin

<dt></dt>

双
语义：列表标题
默认样式：无

<dd></dd>

双
语义：列表说明
默认样式：margin-left
用于解释说明一些视频，出现在视频下方。

span标签

内联标签
语义：无意义
默认样式：无
用于专门选中文字，然后为文字设置样式

strang标签

内联标签
双
语义：强调
默认样式：font-weight: bold
权重：有一定的权重比span高

em标签

内联标签
双
语义：强调
默认样式：font-style:italic
有一定的权重

a标签

内联标签
写法
<a name="" herf="需要链接的网页地址" target="打开网页的方式">文字 / 图片</a>
语义：超链接
默认样式：color
属性：

herf属性中，

链接网址，加http://
#代表连接到当前页面
3.目标地址，可以是绝对地址，也可以是相对地址；可以跳转到外部网站，也可以跳转到项目里的其他页面。

target属性：指定打开链接的位置
_self：代表在当前窗口中打开（默认值）
_blank：代表新开一个窗口打开链接
_parent
_top
还可以设置为一个内联框架的name属性值，链接将会在指定的内联框架中打开。

<a href="http://www.baidu.com" target="_self">点击跳转</a>
<a href="url" target="tom">点击跳转</a>
<iframe src="url" frameborder="0" name="tom"></iframe>

图片标签img

内联块块标签
单标签
写法： <img src="图片的路径地址" alt="图片说明">
语义：图片
默认样式：在低版本的浏览器中有默认的边框
地址写对， alt一定要写
使用img标签来向网页中引入一个外部图片。
属性：

src：设置一个外部图片的路径
alt：描述图片的内容，注意，只有图片没有的时候，才会出现这个描述。搜索引擎可以通过这个属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：修改图片的宽度
height：修改图片的高度
宽度和高度如果只设置一个属性，则另一个属性也会按照比例调整大小
一般开发中，除了自适应页面，不建议设置width和height

    <img src="https://upload.jianshu.io/users/upload_avatars/13211941/993e19be-e3a0-4d9e-9c0e-23976c954ef9?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="我的头像">
    <img width="" src="./images/myimages.jpg" alt="我的头像">
    <img width="" src="../images/myimages.jpg" alt="我的头像">
    <img width="" src="F:/Projects/VisualStudioProjects/learn/images/myimages.jpg" alt="我的头像">

image.png

目录结构图

图片的路径问题url

绝对路径：
相对路径：指的是相对于当前资源所在的目录位置

./   当前路径
../  上层路径

图片的格式：

.gif：支持的颜色少，支持少量的透明（直线透明，那么横，要么竖，不能是圆形），可以用于动态图但是也只是简单动图。
图片颜色单一或者是动态图是可以使用gif
.png：支持的颜色多，支持复杂透明，可以用来显示复杂透明的图片
.jpg：支持的图颜色比较多，图片可以压缩，不支持透明。一般用于保存颜色丰富的照片

图片的使用原则：
效果不一致时使用效果好的
效果一致时使用小的。

内联框架iframe标签

双标签
使用内联框架可以引入一个外部的页面，使用iframe标签。
并不推荐使用，因为内联框架中的内容不会被搜索引擎所检索。

<iframe src="url" frameborder="0" width="100px" height="300px" name="tom"></iframe>

表单元素

多用于网站与用户进行交互（注册 / 登陆所要求填的）

form

属性：

action="需要传送的目标地址"
method="传送的方式"：get / post。get用于select，post用于select insert updata delete
target：_self 在当前窗口打开默认方式，_blank 在新窗口打开

select和option

textarea

input

属性：

type类型：
text 文本
password 密码
radio 单选
checkbox 多选
file 文件上传
button 按钮
hidden 隐藏
reset 重置
submit 提交
color
date
datetime-local
email
time
url
range
telephone
number
search
value属性：input标签的值都体现在value中，
name属性：一定要设置，否则无法上传。

选择时若想点文字即可勾选:

label标签：lable一次只能用于一个供选择项目

设置id值：label标签与input标签须配套使用不可以先写完label再写input

表格元素

组合标签（组合标签：ul与li ol与li ）
多用于呈现内容数据

<table></table> 表格

<tr></tr> 表格的行数

<th></th> 表格的标题

<td></td> 表格的单元格

特性：
1. 单元格会默认平分整个table的宽度
2. th的内容默认加粗水平垂直居中
3. td的内容默认垂直居中
4. table的宽度决定整个表格的宽度
5. 表格的同一列继承最大的宽度（所以 th, td最好都设置上宽度）
6. 表格的同一行继承最大的高度（所以 th, td最好都设置上高度）
表格的应用：
布局排版 / 段落居中显示 / 合并单元格 / 存放数据
单元格的合并：
colspan="数值"
rowspan="数值"
数值对应需要合并的单元格个数，被合并的单元格要删除，否则会多出单元格

标签类型的转换

用display

块属性 display:block
内联属性
- 内联 display:inline
- 内联块display：inline-block
display:none 页面中不显示。位置可以为另一内容占用。

一个题外的问题：当我们的内容刚好构成一个html标签的时候，会发生什么？

  <div>
    a<b>c
  </div>

我们想要显示a<b>c的内容，显然结果不对

在我们的html中，像一些如< >这种特殊字符是不能直接使用，我们需要使用特殊的符号来表示这些特殊字符，这些特殊字符我们称之为实体（转义字符）。
实体的语法：&实体的名字;

<   &lt;
>   &gt;
空格   &nbsp;
版权符号 &copy;

  <div>
    a<b>c  <br/>
    a&lt;b&lt;c
  </div>

浏览器解析到实体时，会自动将实体转换为对应的字符

xHtml语法规范

规范，不一定必须遵守，尽量遵守。
1.html中不区分大小写,但是一般使用小写
2.HTML中的注释不能嵌套
3.HTML标签必须结构完整，要么成对出现，要么自结束标签。
浏览器会以最大的努力正确解析页面，你所有的不符合语法规范的内容，浏览器都会为你自动修正。（可通过浏览器查看页面在内容中的状态）

 <p>这是一个p标签

自动修正

但是，有些情况，它修正的是错误的。
为什么浏览器要自动修正这些错误呢？为什么要惯着那些开发者？
为了抢占市场，水至清则无鱼嘛！用户不管你代码写得规范不规范，只管能不能显示出来。
4.自结束标签一般都是在开始标签末尾加一个/，或者不写也成。
5.html标签能嵌套，但是不能交叉嵌套
6.HTML中的标签特殊属性必须有值，且值必须加引号

2019-06-24选择器与html标签