weixin_30527551
weixin_30527551

web前端笔记整理，从入门到上天，周周更新

由于大前端知识点太多，所以一一做了分类整理，详情可见本人博客

http://www.cnblogs.com/luxiaoyao/

一、HTML

1.注释

格式：

作用：

1.解释说明代码的含义（代码量大，后期维护，便于新人交接）

2.调试代码

2.head内标签

//meta:定义关于HTML文档的元信息

 

作者">

描述">

关键字">

3s之后刷新

3s之后刷新并跳转到百度

​

//title：定义文档的标题

<span style="font-family:'宋体';">网站的标题</span><span style="font-family:'Times New Roman';">

​

//link:定义文档与外部资源的关系

//显示在浏览器选项卡标题前的小图标

 

图标所在的位置" rel="shortcut icon" type="image/x-icon">

    大部分浏览器都支持icon 只有个别浏览器不支持，所以需要加上shortcut

    type是浏览器的老式写法，由于最新的定义rel类型，type就可有可无了

 

3.body内标签

3.1基础标签

//定义HTML标题 h1-h6(header)

人生不止眼前的苟且，还有诗和远方

人生不止眼前的苟且，还有诗和远方

人生不止眼前的苟且，还有诗和远方

人生不止眼前的苟且，还有诗和远方

人生不止眼前的苟且，还有诗和远方

人生不止眼前的苟且，还有诗和远方

 注意：

 1.h1在页面中权重最高，一个页面只出现一次

 2.h2-h4根据实际情况使用，h3使用频率最高

 3.h5-h6文字较小，使用频率较低

 

//定义段落p(paragraph)

注意：

1.定义文章的自然段落

2.一个短句（价格，描述）

 

//定义简单的换行 br(break)


 

//定义水平线 hr(horizontal)

 

 

3.2列表

无序列表(unordered list) ul/li

1.页面中使用频率很高的标签

2.使用的时候都会去除默认的小圆点

     

 

有序列表(ordered list) ol/li

页面使用频率低

 

自定义列表(define list) dl/dt/dd

dt:列表选项的标题 define title

dd:列表针对标题的描述 define description

主要用于360商城底部信息展示以及京东商城左侧导航栏目

    

    

红楼梦

        

作者：曹雪芹 高鹗

        

一个男人和一群女人的故事

        

西游记

        

作者：吴承恩

        

一个男人和几个动物的故事

        

三国演义

        

水浒传

    

 

列表样式

list-style-type:

circle空心圆

square 方块

disc 实心圆 默认

decimal 阿拉伯数字

list-style-image:url() 可以为列表设置图片类型

 

list-style-position 列表标签的位置

inside

outside 默认样式

 

 

 

3.3格式标签

// 定义文档作者或拥有者的联系信息：address

// 定义带有标号的文本：mark

// 定义小号文本：small

// 定义一个日期/时间：time

    datetime="":规定日期 / 时间。否则，由元素的内容给定日期 / 时间

 

// 定义粗体文本：b

// 定义斜体文本：i

// 定义强调斜体文本：em

// 定义语气更为强烈的强调文本：strong

 

// 定义上标：sup

// 定义下标：sub

 

// 定义被删除文本：del

// 定义被插入文本：ins

 

// 定义缩写：abbr

// 定义文本的方向：bdo

// 定义长引用：blockquote

// 定义引用：q

4.超链接a

百度

href 规定链接的目标URL

target 规定在何处打开目标URL

_self   自身窗口打开

_blank   新窗口的方式打开

_parent   在父级窗口打开

_top      在顶层窗口打开

download：指定下载链接

title 定义鼠标悬浮超链接时的提示性文字

5.相对路径和绝对路径

相对路径：

./当前

目录

 

a伪类.html 的统计目录有复习文件夹 鹿瑶11-16  11-17文件夹

../上一级目录  绿色框的上一级目录是圆里的

绝对路径

    https://www.baidu.com/logo.png（绝对路径）

 

6.图像

定义图像：img

必须的属性：

src:显示图像的URL 图片地址

alt:图像的替代文本

当图片加载失败的时候，显示的内容

功能：

1.提示用户加载的图片是什么内容

2.搜索引擎来爬去你的网站的时候，看懂文字，看不懂图片，通过alt识别图片是关于什么内容

 

    可选的属性：

     width:定义图像的宽度

     height:定义图像的高度

     html标签中的宽高属性不需要添加单位

     usemap:将图像定义为客户端图像映射

      

     总结：

     1.图片必须添加的属性：alt和src

     2.只设置宽度或者高度，图片等比例缩放

       同时设置宽度和高度，图片可能会被拉伸

定义图像映射: map/area

//图片的usemap属性和map的id/name属性保持一致

Planets

// 避免浏览器表现不一致，name和id属性保持一致

 

 大部分浏览器支持name各别浏览器不支持，只支持id,建议都写上

 

    // rect:矩形     coords:矩形的点(左上角顶点横坐标，纵坐标，右下角横坐标，纵坐标)    href：链接地址    alt：图片描述

  Sun

 

 

    // circle:圆形     coords:(圆心横坐标，纵坐标，半径)    href：链接地址    alt：图片描述

  Mercury

 

shape:形状  rect矩形 circle圆形

coords：坐标

通过脚本绘制图形：canvas（后期HTML5新特性讲解）

效果

 

默认会出现一个框，如果需要取消 使用CSS样式进行取消

area{
    outline: none;
}

 

7.figure

figure:认为标签的内容是一个整体

figcaption:专门针对图片等内容的标题

定义图像组合：figure/figcaption

    figure：规定独立的流内容（图像，图表，照片，代码）

figcaption：为figure元素定义标题

专门针对图片等内容的标题

 

即使有文字 但是figure也会缩进一块显示

 

8.音频和视频

8.1音频

src:音频的地址

controls 显示控制栏

autoplay 自动播放

loop 循环播放

muted 静音

preload 确认音频加载方式

 

note 当页面加载完成的时候，不加载音频

meta 当页面加载完成的时候，只加载音频的元数据（音频的总时间，不加载音频的核心内容）

auto 当页面加载完成的时候，加载音频

IE8以下包括IE8 不识别audio 则显示标签之间的内容

浏览器能识别音频，但是不同的浏览器对于音频的识别不太一致，浏览器看见source标签的时候，如果识别第一个source的资源，则使用该标签即可，如果不识别第一个资源，则看第二个资源是否能够好使，好使则使用，如果还是不识别，则提示对应信息

注意：source不是播放列表，不是一曲一曲的播放，而是互斥关系

source type：文件的类型（MIME类型）

mp3:audio/mpeg

ogg:audio/ogg

jpg:image/jpeg

png:image/png

gif:image/gif

html:text/html

css:text/css

小图标：image/x-icon

 

8.2视频

video视频标签

src 视频地址

controls 显示控制栏

autoplay 自动播放

muted 静音

loop 循环播放

preload 确认视频加载的方式

auto:页面加载完成，直接加载视频

meta:页面加载完成，只加载视频的元信息

none:页面加载完成，不加载视频（跟autoplay是互斥）

width:宽度

height：高度

poster:视频的海报

poster="海报的地址"

        浏览器从上到下查看，找到支持的视频就停止

    

        

        

        不支持视频标签，赶紧升级吧

    

9.常用的图片格式：

1M = 1024kb

bmp:5m = 5000kb

jpg:149kb = 149kb

png:1M = 1000kb

1.BMP格式－Bitmap（位图）的简写

优点：包含的图像信息比较丰富，几乎不压缩缺点：占用磁盘空间过大功能：在单机上比较流行

2.GIF格式－Graphics Interchange Format（图形交换格式）主要是动态图

优点：压缩比高，磁盘空间占用较少（文件小，下载速度快）缺点：不能存储超过256色的图像

3.JPEG(jpg)格式－Joint Photographic Experts Group（联合照片专家组）网站中图片的主流

优点：压缩技术先进，用有损压缩方式去除冗余的图像彩色数据，获得极高的压缩率的同时展现十分丰富生动的图像（总结：用最少的磁盘空间得到较好的图像质量）调节图像质量的功能，允许你使用不同的压缩比例

4.PNG格式－Portable network Graphics（新兴的网络图像格式）- 透明图，背景图，小图片

优点：

1.不失真的情况下，存贮形式丰富，兼有GIF和JPG的色彩模式

2.无损压缩到极限以减少文件的大小，减少网络传输，图像品质得到保证

3.显示图片速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像

4.PNG同样支持透明图象的制作

缺点：

1.不支持动画应用

5.WebP:支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式VP8（一统江湖）

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

 

10.表格table

tr：行标签

td: 行中的每个单元格标签

th: 行中的每个单元格标签（居中加粗）

caption：表格的标题标签

总结：

1. table和tr之间，tr和td/th之间只能是表格的标签，不能是其他标签

2. td/th内可以放置其他标签

3. 不能在tr和th之间写其他标签

定义表格中的表头内容thead

定义表格中的主体内容 tbody

定义表格中的脚注内容 tfoot

 

注意：

  1. table的子级：thead,tbody,tfoot,caption,tr
  2. tr的子级:td,th
  3. td/th的内容随便写
  4. 推荐将thead,tbody,tfoot写入到table中，表格的结构会更加明确
  5. 如果不加thead,tbody,tfoot，浏览器默认使用tbody将所有的tr标签包裹起来。

 

合并单元格

合并一行中的6个单元格，第一个单元格使用colspan=”6”,然后去除多余的单元格。


    个人简历

table-layout设置单元格宽度计算方法

fixed 所有单元格平分table的宽度

auto 以内容大小为参照（默认样式）

border-collapse 设置边框是否合并

separate 分离 默认样式

collapse  单元格的边框合并

separate 分离 默认样式

collapse  单元格的边框合并

 

 

 

border-spacing 单元格之间间距

4px

 

caption-side表格标题的位置，默认在上

top上

bottom 下

empty-cells:hidden 空单元格没有内容就隐藏，但是也必须在border-collapse:separate的基础上才生效

11.表单 form

定义一个HTML表单，用于用户输入

定义单行输入控件（元素）input

 

type设置当前单行文本域的类型

text 普通文本（用户名，详细地址）

password 密码（设置密码）

radio 单选按钮

checkbox 多选按钮

让单选和多选默认选中，则需要添加checked属性

submit 提交按钮

reset 重置按钮

hidden 隐藏域（不能被用户看到修改，但是后端必须使用的内容）

file 文件域(点击之后选择文件)

accept=”” 设置接受文件的类型

image:上传文件的按钮

art=”设置图片文本”

email 邮箱

number 数字

URL URL地址

tel 电话

range 进度条

color 颜色

date 日期

time 时间

month 月

week 周

datetime-local 本地日期和时间

name 表单元素的名字（主要是跟后台相关，但是我们在开发过程中需要加上）

value 表单的默认值

 

 

下拉框select/option

select:

name属性

multiple:设置为多选下拉框

option

value属性

让下拉框中某一个默认选中，用selected属性

 

多行文本框textarea

 

表单form内的标签属性

maxlength 设置内容输入的最大长度

readonly 只读，可以向服务器提交数据

disabled 只读，不可以向服务器提交数据 废弃

checked 默认选中

selected 默认select中选中

 

required 设置内容为必填项

placeholder=””; 设置表单默认提示的内容，只要有输入内容，该提示文字立即消失

 

 

autofocus 自动聚焦

autocomplete=”on|off” 设置是否关闭自动提示，on为开启提示，off关闭提示

注意：如果需要开启自动提示，必须写name=””

 

pattern 用户提交的时候，通过正则验证用户提交内容

 

 pattern="[a-z]{1,6}"

这个就是允许输入小写字母a~z  字符长度在1-6个之间，不能少于一个，不能多于6个

 

formaction 覆盖表单的action属性

formmethod 覆盖表单的method属性

formnovalidate 表单提交时不用验证

formtarget 表单提交时打开的方式_self _blank _parent _top

 

按钮

按钮">  //不具备提交功能
   //不具备提交功能
//以下三种具备提交功能
  

 

正常单击单选按钮才可以，为了增加用户体验，点击文字便可进行单选操作

 

    //第一种方法，id 和for 必须保持一致

   //直接用label标签给包住即可，更加简单

定义围绕表单元素的边框 fieldset


    用户登录

 

fieldset出现如下边框

legend 就是定义fieldset元素的标题

 

12.get和post请求的区别：

action：将用户名和密码提交给服务器，服务器必须告诉我一个地址

method：get和post
    get请求特点:
        1.表单中的所有的只都会展示在URL地址中：localhost/8.html?username=wangqiang&password=123456
        get方式暴露了用户名和密码：不太安全
        2. 将表单中所有的值全部写入到URL地址中，URL地址栏有限，不能写太多的内容（1024k）
            get一定不能传递文件
    post请求特点
        1.表单中的只不会展示在URL地址中，但是会在请求中一定有，只不过一般用户看不到
        post相对安全
        2.post可以传递文件，实际上我们的服务器会限制你的文件大小
            图片：例如限制在2M
            电影：例如限制在4G

绝大部分都使用post方式

embed:引入flash文件

13. 其他标签

13.1 embed 加载falsh

 

13.2 iframe:框架标签

frameborder="0"

frameborder="1" 不写默认有边框

 

 

13.3 pre按内容格式原样显示
 
   
 
 
   
效果：
 
   
 
 
   
14.HTML标签公共属性
 
   
id:所有的标签都可以设置id属性，没有实际效果 
 
   
注意：
 
   
     
    
  1. 属性值在页面中唯一，主要以后为JS获取DOM对象提供方便
    2.  
    
  2. 由字母数字下划线_和中划线-组成，不能以数字开头
    3.  
   
 
   
class:所有的标签都可以设置class属性，没有实际效果
 
   
注意:
 
   
     
    
  1. 由字母数字下划线_和中划线-组成，不能以数字开头
    2.  
    
  2. 属性值在页面中定义多个，给多个标签设置相同的样式和设置JS效果
    3.  
   
 
   
 
 
   
title:鼠标移入标签，在标签中显示title的属性值
 
   
style:行内设置css样式
 
   
contenteditable:直接在行内设置文本修改，但是这个标签不不常使用，没有人愿意让用户在自己网站进行修改
 
   
 
 
   
draggable:设置元素是否可以拖动  true 可以拖动   false不可以拖动
 
   
 
 
   
hidden：设置元素是否隐藏
 
   
tabindex：规定元素的tab键控制次序，表单登录常应用
 
   
支持tabindex属性：, ,