前端回顾-白红宇

前端回顾

阅读量：6763 次

发布时间：2019-06-26

本文共 13756 字，大约阅读时间需要 45 分钟。

web准备介绍：

w3c：万维网联盟组织，用来制定web标准的机构（组织）

web标准：制作网页遵循的规范

web准备规范的分类：结构标准、表现标准、行为标准。

结构：html。表示：css。行为：Javascript。

web准备总结：

结构标准：相当于人的骨架。html就是用来制作网页的。

表现标准：相当于人的衣服。css就是对网页进行美化的。

行为标准：相当于人的动作。JS就是让网页动起来，具有生命力的

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox)、谷歌（Chrome）、猎豹浏览器、Safari和Opera等

「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

总结：渲染引擎是兼容性问题出现的根本原因。

开发工具: Sublime Text Visual Studio Code编辑器 WebStorm PyCharm

HTML的概述

html全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

超文本：音频，视频，图片称为超文本。

标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

一些名词:

网页 : 由各种标记组成的一个页面就叫网页。

主页(首页): 一个网站的起始页面或者导航页面。

标记 : <p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。

元素 : <p>内容</p>称为元素.

属性 : 给每一个标签所做的辅助信息

HTML颜色介绍

颜色表示

纯单词表示：red、green、blue、orange、gray等

10进制表示：rgb(255,0,0)

16进制表示：#FF0000、#0000FF、#00FF00等

RGB色彩模式

自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。

RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青

在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。

RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。

HTML的规范

HTML是一个弱势语言

HTML不区分大小写

HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)

HTML的结构：
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。　　　　　　body部分：我们所写的代码必须放在此标签內。

HTML 的编写规范:

所有的都要正确嵌套,不能交叉嵌套

所有标记都要小写

所有标记都要关闭

双边标记：<span></span>

单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />

所有的属性值必须加引号 <h1 id="head"></h1>

所有的属性必须有值 <input type="radio" checked="checked" />

HTML的基本语法特征

对换行不敏感,对tab不敏感

空白折叠现象

标签要严格封闭

HTML结构详解

新建html文档,输html:5  tab一下 生成下面页面   #文档声明头 XHTML是严格的、纯净的HTML  XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言   #头标签 title meta link style     
       #提供页面的有关信息     
          
          Document #指定网页的标题,在浏览器最上方显示 　　     
      #定义文档与外部资源的关系。         #定义内部样式表与网页的关系    --------------------------------------------------- Meta标签  元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。 提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

常用的meta标签：

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

效果如下：

上面这个标签，是让我们网页支持移动端，移动设备优先

字体标签 :  h1 ~ h6  逐渐变小 具有align属性，属性值可以是：left、center、right。你好
你好
排版标签: 
     
       、
       、 
、
       
、
       
        、
        超链接 图片标签   特殊字符 ：空格 （non-breaking spacing，不断打空格）<：小于号（less than）>：大于号（greater than）&：符号&"：双引号'：单引号©：版权©™：商标™要求大家背过的特殊字符： 、<、>、&copy比如说，你想把作为一个文本在页面上显示，直接写
是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：这是一个HTML语言的<p>标签ok,下面这几句话，大家一定牢牢记住。HTML标签是分等级的。HTML将所有的标签分为两种：文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。错误写法：（把h系列的标签放到p里）和
          
           唯一的区别在于：
           是不换行的，而
            
             是换行的。div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
             标签和
标签的区别在于：
             标签会在段落的前后自动插入一个空行，而
标签没有空行；而且
标签没有属性。注意
 没有结束标签，把
标签写为 
 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

超链接 3 种方法:

1 外部链接: 连接到外部文件点击进入到新网页 进入百度2 锚链接: 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。首先我们要创建一个锚点,使用name属性或id属性给那个特定的位置起个名字.去底部顶部中间是内容回顶部底部 3 邮件链接 (使用前提有email客户端且已经配置好了)

联系我们 超链接的属性 href 目标URL title 悬停文本 name 主要用于设置一个锚点的名称 target 告诉浏览器以什么方式打开页面: _self(默认 本页面打开)  _blank(空白页面打开)  img 标签  单边标签 一个就是一张图片 插入的是引用地址,所以也要把图片放到服务器上

     img 是image“图片”的简写，src 是英语source“资源”的缩写。 src 属性 : 图片的相对或绝对路径  相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径

--下面  相对路径 --

上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

-- 下面绝对路径 --

（1）以盘符开始的绝对路径。举例：

（2）网络路径。举例：

总结一下：

我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

相对路径，就是../ image/ 这种路径。从自己出发，找到别人；

绝对路径，就是http://开头的路径。

绝对不允许使用file://开头的东西，这个是完全错误的！

img 标签的常用的其他属性:

width 宽

height 高

title 悬浮文本

align 图片的水平对齐方式

alt 当图片显示不出来的时候,代替图片显示的内容

注意事项：

（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。

（2）如果想实现图文混排的效果，请使用align属性，取值为left或right

如果想点击图片的时候跳转到某个链接，应该是：

列表标签 <ul>、<ol>、<dl>

列表标签分为三种1 无序列表ul：unordered list，“无序列表”的意思。li：list item，“列表项”的意思。
              
      张三
             
      李四
             
      王五
    
     
type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。列表可嵌套列表


          
       北京市        
                    
         海淀区
            
         朝阳区
            
         东城区
        
        
    
    
       广州市        
                    
         天河区
            
         越秀区
        
        
    
  
      
 声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。

2 有序列表:Ordered List


                
      嘿哈
        
      哼哈
        
      呵呵
     
 type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。 3 定义列表  作用非常大

<dl>英文单词：definition list，没有属性。dl的子元素只能是dt和dd。

<dt>：definition title 列表的标题，这个标签是必须的

<dd>：definition description 列表的列表项，如果不需要它，可以不加

备注：dt、dd只能在dl里面；dl里面只能有dt、dd。


              
       
        北京
       
        
       
        国家首都，政治文化中心
       
        
       
        污染很严重，PM2.0天天报表
       
    
      
    
              
       
        上海
       
        
       
        魔都，有外滩、东方明珠塔、黄浦江
       
    
      
    
              
       
        广州
       
        
       
        中国南大门，有珠江、小蛮腰

表格标签 <table>

表格标签用
     
      表示。一个表格
     
     
      是由每行
        组成的，每行是由
                     组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的

例如，3行4列的单元格：
      
            #行            
  #几列  单元格            
                                小马哥          18                      男                      山东                 
                                     小岳岳                      45                      男                      河南                 
                                     邓紫棋                      23                      女                      香港

<table>的属性：

- - border：边框。像素为单位。
  - style="border-collapse:collapse;"：单元格的线和表格的边框线合并
  - width：宽度。像素为单位。
  - height：高度。像素为单位。
  - bordercolor：表格的边框颜色。
  - align：表格的水平对齐方式。属性值可以填：left right center。
    注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
  - cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
    注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
  - cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
  - bgcolor="#99cc66"：表格的背景颜色。
  - background="路径src/..."：背景图片。
    背景图片的优先级大于背景颜色。

`<tr>`：行

一个表格就是一行一行组成的嘛。

属性：

- dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
- bgcolor：设置这一行的单元格的背景色。
  注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
- height：一行的高度
- align="center"：一行的内容水平居中显示，取值：left、center、right
- valign="center"：一行的内容垂直居中，取值：top、middle、bottom

`<td>`：单元格

属性：

align：内容的横向对齐方式。属性值可以填：left right center。
如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。

valign：内容的纵向对齐方式。属性值可以填：top middle bottom

width：绝对值或者相对值(%)

height：单元格的高度

bgcolor：设置这个单元格的背景色。

background：设置这个单元格的背景图片。

单元格的合并

如果要将两个单元格合并，那肯定就要删掉一个单元格。

单元格的属性：

- - colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
  - rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上

`<th>`：加粗的单元格。相当于`<td>` + `<b>`

属性同<td>标签

`<caption>`：表格的标题。使用时和`tr`标签并列

你好世界  #相对表格居中的效果

表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签

这三个标签有与没有的区别：

1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。


      
  #纵向合并,             
             
        人物介绍
                                                                 小马哥                          18                          男                          中国         
               
                                                            小岳岳                          45                          男                                     
                                                                       邓紫棋                          23                          女

人物介绍
邓紫棋	23	女
小马哥	18	男	中国
小岳岳	45	男

表单标签 <form>

表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

Enctype：

表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

- Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
- Multipart/form-data：上传附件时，必须使用这种编码方式。

`<input>`：输入标签（文本框）

用于接收用户输入。

属性：

- - type="属性值"：文本类型。属性值可以是：
    - text（默认）
    - password：密码类型
    - radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
      ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
    - checkbox：多选按钮，名字相同的按钮作为一组进行选择。
    - checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
    - hidden：隐藏框，在表单中包含不希望用户看见的信息
    - button：普通按钮，结合js代码进行使用。
    - submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
    - reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
    - image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
    - file：文件选择框。
      提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
  - value="内容"：文本框里的默认内容（已经被填好了的）
  - size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
    注意size属性值的单位不是像素哦。
  - readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
    用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
  - disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

4种按钮的举例

`<select>`：下拉列表标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签

<select>标签的属性：

multiple：可以对下拉列表中的选项进行多选。没有属性值。

size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

selected：预选中。没有属性 <form> <select> <option>小学</option>

`<textarea>`标签：多行文本输入框

text就是“文本”，area就是“区域”。

属性：

value：提交给服务器的值。

rows="4"：指定文本区域的行数。

cols="20"：指定文本区域的列数。

readonly：只读。


            
     路飞学城
    
 -- CSS -- css书写方式: 1 行内式  标签中直接书写 2 内接式 一个页面内接入的  书写在head里的style标签里 3 外接式 link导入   优点:协同开发不同类型的代码分开文件存放 css的选择器：1.基本选择器 2.高级选择器 基本选择器: 1 标签选择器 通过标签名直接就可以选择到标签,页面中所有符合选择条件的标签都会被选择. 2 id选择器  同一个页面中id不能重复/任何标签都可以设置id/id命名规范.区分大小写 3 类选择器  通过.找到类名  类名可以重复 4 通配符选择器 用*号操作所有标签 使用场景:删除边框 css 的优先级   -- 权重计算永不进位 -- 标签选择器层级一致的时候,从上到下,以下边的为准 类 > 标签 id 优先级最高 行内样式的设置优先级最高 继承的样式优先级是最低的

-- 1 --p{color:red;}span{    color: yellow;}-- 2 -- #s1{    color: red; }-- 3 --  .lv{     color: green;  } .big{     font-size: 40px; } .line{    text-decoration: underline;  } -- 4 --

* {

width: 100px;

height: 100px;

margin: 0;

padding: 0;

}

------------------------------------ 
          
              
      段落1
         
      段落2
         
      段落3
     
     
到底使用id还是用class？答案：尽可能的用class。除非一些特殊情况可以用id原因：id一般是用在js的。也就是说 js是通过id来获取到标签

高级选择器

后代使用空格表示后代选择器

/* 后代选择器 */        body li {            color: red;        }

子代使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p

/*!* 子代选择器 *!*/        body ul > p {            color: green;        }

弟弟选择器

/*!* 弟弟选择器 *!*/        h1 ~ h2 {            color: pink;        }

毗邻选择器

/*!* 毗邻选择器 *!*/        h1 + h2 {            color: #cc6600;        }

组合选择器

/* 组合选择器 */h1 ~ h2, li, h1 {    color:darkviolet ;    color: green;}

并集多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

交集使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.active

属性选择器 -- 根据标签中的属性，选中当前的标签

伪类选择器 -- 伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte

爱恨准则

<style>

/* 爱恨准则LoVe HAte */

a:link {

color: green;

}

a:visited {

color: blueviolet;

}

a:hover {

color: yellow;

}

a:active {

color: red;

}

</style>

<body>

<a href="http://www.jd.com">a标签未被点击时的形态link</a><br>

<a href="#">a标签被点击时的形态</a><br>

<a href="#">a标签点击完毕时的形态</a><br>

<a href="#">a标签悬浮时的形态</a><br>

</body>

伪元素选择器


     
      alex吃...
     
 注意:伪元素选择器,仅仅适用于 块级 标签.

css的继承性和叠层性

叠层性权重相同处理

盒模型

padding(内边距)

-- 一个像大风车那样的图例 -- #box2 {     -id-             width: 0;            height: 0;            /* 属性3 */            border-top-width:100px ;            border-right-width:100px ;            border-bottom-width:100px ;            border-left-width:100px ;            /*border-top-color:transparent;  !* 穿透色,只穿透一层 *!*/            border-top-color:blue;  /* 穿透色,只穿透一层 */            border-right-color: red;            border-bottom-color:yellow ;            /*border-left-color:transparent ;*/            border-left-color:green ;            border-style:solid ;            /*border-radius: 55px;*/            border-radius: 35%;  可以更改百分比        }

border(边框)

margin(外边距)

标准文档流

块级元素和行内元素

浮动

脱离标准文档流

文字围绕效果

设置浮动后行内标签可以设置宽高; (行内标签设置宽高的第一种方式,display=inlineblock/block

先让为主

浮动的遮盖了标准的盒子

盒子自动换行,且想让换行的进去一点儿,用margin负值

为什么要清除浮动?

为了让父盒子不浮动,但是高度还能被撑起来.

两个方法

黑方法1:都浮动起来

黑方法2:给父盒子设置高度

方法三,再加一个div,不建议使用

3.5 .clearfix {clear:both};这是一个不讲道理的用法,你在遇到要清除浮动的情况下,可以考虑词用法

第四种写法是一种障眼法,让黑哥出来,再隐藏,给他变成块,又把高度变成0,最后用到clear:both官方推荐写法

.clearfix:after {
                  clear:both ;             content: "黑哥"; display: block; visibility: hidden; /* 元素隐藏了 */ height: 0; }

overflow:hiddern;通过这个操作就可以实现清除浮动

overflow:

visible:默认是它,溢出也课件

hidden:溢出之后隐藏,不占位

scroll:出来一个滚轮,溢出之后滚轮才能滑动

auto:不溢出没有滚轮,溢出之后滚轮才出现

文本属性和字体属性

超链接导航栏案例

background

定位

z-index

转载于:https://www.cnblogs.com/zhangchen-sx/p/10391821.html

你可能感兴趣的文章

LeetCode: 【L4】N-Queens 解题报告

查看>>

首届HTML5原创游戏大赛将于6月10日拉开序幕

查看>>

8个对于Web设计和开发人员非常有用的在线工具

查看>>

iOS - (简单平移动画/弹出View的使用)

查看>>

Bloom Filter概念和原理

查看>>

SPOJ PGCD 4491. Primes in GCD Table && BZOJ 2820 YY的GCD （莫比乌斯反演）

查看>>

STL学习系列八：Set和multiset容器

[置顶] Oracle 11g Undo 表空间切换

查看>>

Andriod 环境配置以及第一个Android Application Project

查看>>

小马哥	18	男	山东
小岳岳	45	男	河南
邓紫棋	23	女	香港

HTML的概述

HTML颜色介绍

颜色表示

RGB色彩模式

HTML的规范

HTML的基本语法特征

HTML结构详解

你好

你好

列表标签 <ul>、<ol>、<dl>

表格标签 <table>

<tr>：行

<td>：单元格

单元格的合并

<th>：加粗的单元格。相当于<td> + <b>

<caption>：表格的标题。使用时和tr标签并列

表格的<thead>标签、<tbody>标签、<tfoot>标签

表单标签 <form>

<input>：输入标签（文本框）

<select>：下拉列表标签

<textarea>标签：多行文本输入框

`<tr>`：行

`<td>`：单元格

`<th>`：加粗的单元格。相当于`<td>` + `<b>`

`<caption>`：表格的标题。使用时和`tr`标签并列

表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签

`<input>`：输入标签（文本框）

`<select>`：下拉列表标签

`<textarea>`标签：多行文本输入框