web前端基础知识

时间 2020-02-24

标签 web 前端基础知识栏目 HTML 繁體版

原文原文链接

HTML

什么是HTML,和他ML... php

网页能够比做一个装修好了的,能够娶媳妇的房子. css

房子分为:毛坯房,精装修 html

毛坯房的修建: 砖,瓦,水泥,石头,石子.... 前端

精装修的房子:在毛坯房的基础上进行粉刷,覆盖,雕琢,修饰等操做....
html5

HTML标签至关于盖毛坯房用的石子,砖瓦....:房子成功,可是不会很好看. web

CSS属性至关于装修时候使用的刷子,涂料,扣板...: 可让毛坯房变得更加美观 chrome

HTML canvas

超文本标记语言. HyperText Markup Language 浏览器

HTML标签的格式: 安全

格式:

<标签名属性名="属性值" 属性名="属性值"....>内容</标签名>

注意: 标签能够嵌套使用.嵌套包含时必须被另一个标签彻底包含.

HTML经常使用标签:

全局架构标签: 网页中必不可少的部分.

       <!DOCTYPE html>
       <html>
           <head>
               书写内容不可见的部分;
           </head>
           <body>
               书写内容可见;
           </body>
       </html>

BODY体

body标签

属性:

bgcolor backgroundcolor 背景颜色

标题标签

h1 表示当前页面的最主要内容,一个h1标签在一个页面中军容许使用一次.

h2 表示当前页面的次要内容,容许使用多个.

h3 表示其余信息内容标题,比次要内容等级还要低..

h4 .... 不推荐使用

h5 .... 不推荐使用

h6 .... 不推荐使用

       标题标签的做用:

           用于书写标题.

标题的标签的特征:

           全部标签内容都是粗体,
           字体大小从h1-h6逐渐减少
           自带回车换行效果

样式标签:

b 粗体标签,仅用于表示样式 bold

i 斜体标签 italic

u 下划线标签 underline

strong 粗体标签 ,还在页面中起到一个强调的做用,对搜索引擎而言

em 斜体标签,,还在页面中起到一个强调的做用,对搜索引擎而言,更强烈一点

city 斜体标签,还在页面中起到一个强调的做用,对搜索引擎而言

font 字体样式标签

           属性:

               color 颜色

size 大小 1-7

face 字体类型,都是在用户的电脑中获取字体类型

格式标签:

p 段落标签

hr 水平线标签

br 强制换行标签

注意:hr和br标签比较特殊,这类标签只有开始没有结束,单标签或者自封闭标签

成对标签: <body></body>

单标签:

列表标签:

       ul 无序列表 unorder list

           格式: 经常使用与制做导航

               <ul>
                   <li>锄禾日当午</li>
                   <li>清明上河图</li>
                   <li>造血干细胞</li>
                   <li>班长兼学位</li>
               </ul>

ol 有序列表 order list

格式:

               <ol>
                   <li>英雄联盟</li>
                   <li>地下城与勇士</li>
                   <li>穿越火线</li>
                   <li>御龙在天</li>
               </ol>

注意:有顺序关系的并列内容使用ol,没有顺序关系的列表使用ul.

dl 定义列表 defined list

dt 定义列表的标题

dd 定义列表的属性

定义列表仅用于定义一个事物.

格式:

表格标签:

table 用于定义表格的范围

属性:

border: 设置边框的粗细

width: 设置表格的表格的总宽度

height: 设置表格的总高度

align : 设置表格水平方向的对其方式

值: left 左对齐 center 居中对其 right 右对齐

bgcolor: 设置背景颜色

tr 定义表格的行

bgcolor 设置行的背景颜色

td 定义表格的单元格

bgcolor 设置单元格的背景颜色

rowspan 设置单元格的跨行数量

colspan 设置单元格的跨列数量

就近原则概念:

若是具备嵌套关系的标签设置了同一种属性,那么离标签越近的属性优先级别越高.

表格的书写格式:

th 单元格标签的一种,用法和td是同样的

           th标签专门用于制做表格的表头部分,字体默认粗体,水平居中对其

       caption 表格描述标签,用于为表格添加一个标题

超连接

在网页中,经过点击操做可以打开新的页面的结构就是超级连接,简称超连接.

a 标签

target属性设置目标地址的打开方式

_self 在当前页面打开默认值

_blank 在新页面打开

href属性设置链接的目标地址

           在web中的地址问题:

               绝对链接: 带有协议的链接就是绝对链接

http://www.itxdl.cn 他的协议是http:// 超文本传输协议

https://www.taobao.com 他的协议是 https:// 带有安全'套接字'的超文本传输协议

ftp:// ftp协议文件传输协议

ftps://....

file:// 本地文件协议

相对链接: 没有协议的链接就是相对链接

./a/bcd/1.html

../a/bcd/2.html

a/bcd/1.html

. 表示在当前页面所在的文件夹中查找

.. 表示在当前页面所在文件夹的上层文件夹查找

图片标签

img标签

src 设置图片来源,图片地址

width 设置图片的宽度

height 设置图片的高度

border 设置图片边框粗细

alt 设置图片描述信息

title 设置图片的描述信息

表单标签:

在页面中用于和用户交互的空间都是表单标签.主要做用是向服务器端发送数据.

form 定义表单的范围及表单的提交方式标签

       属性:

       action 设置当前表单内容的提交地址

method 设置当前表单提交内容的方式,get 和post 方式

get方式: 信息明文传送,能够直接观察到,get方式传输数据量有限.(明信片)

post方式:信息非明文传输,不能够直接观测到,post传输方式数据量很是大.(写信)

enctype 设置传输信息的加密方式

multipart/form-data 上传文件专用

input 输入标签

该标签经过改变type属性,能够获取9中不一样风格的表单

type="text" 文本输入框

type="password" 密码输入框

type="radio" 单选表单

type="checkbox" 复选表单

type="file" 文件选取表单

type="hidden" 隐藏表单

type="submit" 提交按钮

type="reset" 重置按钮

type="image" 图片提交按钮

input标签经常使用属性:

           type 设置表单类型

           name 设置表单名称

value 设置表单值

select 下拉列表或者多选列表标签

name 设置表单的名称,value在option中设置

multiple 设置是否为多选列表

下拉列表

多选列表

option 多选列表的列表标签

textarea 文本域标签/多行文本标签

name 设置表单的名称

cols 设置表单的列数(宽度)

rows 设置表单的行数(高度)

button 自定义按钮标签

type 设置按钮的类型 submit提交按钮 reset 重置按钮 button 普通按钮

页面布局标签:

div 用于页面布局操做,没有特殊意义

span 内容标签

块状元素:div

块状元素独占一行

块状元素能够设置宽度高度

内联元素:span

内联元素能够在一行共存

内联元素高度和宽度无效

head头信息

title 设置网站的标题,显示在标签栏中

meta 设置浏览器信息或者设置搜索引擎相关信息

       为浏览器设置信息

           字符集设置

为搜索引擎设置信息

关键字

描述

base 基准链接标签

href 为页面中全部相对链接设置一个基础的绝对地址.对绝对链接无效

target 为页面中没有设置target属性的链接,强制设置为当前设定值

表示颜色的方式

HTML中表示颜色的方式有三种:

英文单词 : red,green,blue....

RGB格式 : R red G green B blue

仅IE支持,不推荐在HTML中使用RGB格式

           RGB(红色值,绿色值,蓝色值);

           每种颜色的取值 0-255

HEX模式 :

           #红色值绿色值蓝色值

           #FF9900 红色 FF 绿色99 蓝色00

SEO和SEM

SEO: 搜索引擎优化,长期的规程要有耐心,不花钱就能够提高天然排名

SEM: 搜索引擎影响,投入金钱,短时间见效.

关于字符集

能够认为字符集就是语言种类

页面字符集:文件自己的字符集类型就是页面字符集.

声明字符集:通知浏览器文件中字符的字符集类型.

保证页面不乱码: 保证页面字符集和声明字符集一致便可.

中文字符集:

utf-8 国际统一字符集,可以表示世界上绝大多数的语言.

gbK 国家标准的扩展版本,包含全部中文文字

gb2312 国家2312标准字符集,包含5000个经常使用汉字

big5 繁体中文字符集

HTML和XHTML

XHTML也是超文本标记语言的一种,是严格语法的HTML语种.

HTML规范比较松散:

单标签能够不封闭

属性值可使用单双引号也能够不用....

XHTML 8大语法要求:

1.全部标签名和属性名必须小写

2.全部标签必须封闭,单标签须要自封闭

3.全部标签嵌套必须合法

4.全部属性必须有值,multiple值为自己 multiple ="multiple"

5.全部属性必须使用双引号

6.全部图片标签必须使用alt属性

7.全部注释内容中不能够出现-,可使用=代替横线

8.全部特殊字符必须使用实体字符表示

HTML中的注释

做用:仅仅用于页面中的内容描述不会影响显示和效果

格式:

实体字符

用于在页面中输出特殊字符的字符格式就是实体字符;

经常使用实体字符

空格

< 小于号

> 大于号

关于HTML5

故事讲完了!~

html5标准的改变

html5依旧是松散语法的HTML版本,继承HTML4而来的.

Xhtml5也是被官方默认的一个版本.

1.DTD声明的改变

<!DOCTYPE html>

2.标签的改变

不能够写结束标签的表

br ,hr ,img,....

能够省略结束标签的标签

li,option,tr,td...

能够彻底省略的标签

html,head,body,....

针对搜索引擎的优化

为了让搜索引擎更好的识别和收录页面内容.HTML5为搜索引擎新增了一系列的结构标签

       header   用于表示网站结构顶部的标签

       footer   用于表示网站底部结构都而标签

       aside   用于表示网站侧边栏的标签

       section 用于表示网站主体区域的标签

       nav   用于表示网站导航区域的标签

       article 用于表示页面文章的标签

       figure 用于信息描述的标签

       figcaption 用于信息描述的配合标签

       hgroup 网站标题组标签

       details 信息详解标签

       time 时间标签

       address 地址标签

       mark 标注标签

总结:不要惧怕,以上标签都是div标签

多媒体标签

audio 音频标签

属性:

src 引入音乐文件地址

controls 设置是否具备控制面板属性

loop 设置是否循环播放属性

autoplay 设置是否自动播放属性

<audio src="./_WStyle.mp3" controls></audio>

<audio controls loop>
           您的破浏览器不支持该标签
           <source src="_WStyle.mp3" type="audio/mp3">
           <source src="_WStyle.ogg" type="audio/ogg">
       </audio>

video 视频标签

src 引入视频地址

controls 设置是否具备控制面板

poster 设置视频的预览图

width 设置视频的宽度

height 设置视频的高度

autoplay 自动播放视频

<video src="movie.webm" controls></video>
       
       <video controls poster="2.jpg" width="1000" height="500">
           您的破浏览器不支持视频标签.
           <source src="./movie.webm" type="video/webm" />
           <source src="./movie.webm" type="video/webm" />
           <source src="./movie.webm" type="video/webm" />
       </video>

canvas 画布标签

能够用于绘画操做,制做画图板,
能够用于游戏制做....

embed 媒体标签

用于在在页面中引入flash文件

智能表单

对HTML4中的表单用法和标签类型进行了扩展.

       URL表单   type="url"

       邮箱表单 type="email"

       电话表单 type="tel"

       颜色表单 type="color"

       滑块表单 type="range"

       搜索表单 type="search"

       数字表单 type ="number"

       日期表单 type="date"

       时间表单 type="time"

       周选取表单 type="week"

       月选取表单 type="month"

       日期时间表单 type="datetime" 仅Opera浏览器识别

       日期时间表单 type="datetime-local"

注意:以上全部新增表单都是HTML5为input 标签新增的表单类型

新增的智能表单用法:

在HTML4中表单标签必须放在Form标签之中才能够被提交到服务器,

若是页面中存在多个form表单而且在页面布局时比较分散,不适合排版很难处理

HTML5中容许将表单标签和form标签进行分离操做:

1.为form标签添加一个id属性

2.为制定的须要提交的属性当前form的表单标签添加form属性,值为form的id值

#CSS

css是什么?

CSS的做用用于修饰页面中的HTML标签.

层叠样式表!

浏览器

浏览器一共有五大厂商:

       IE浏览器         微软公司

       chrome浏览器     谷歌

firefox浏览器 MOZ组织

Opera浏览器欧朋/360

safari浏览器 apple公司

浏览器前缀:

若是CSS属性没有最终实现而是出于实验阶段,使用属性的时候须要对当前CSS进行私有属性标注才能够生效. 标注的部分称之为浏览器私有属性前缀:

       IE浏览器         -ms-

       chrome浏览器     -webkit-

firefox浏览器 -moz-

Opera浏览器 -o-/-webkit- 早期/后期

safari浏览器 -webkit-

取值和单位

颜色:

英文单词模式

RGB模式

HEX模式

新增颜色模式

RGBA模式

在RGB模式基础上增长了透明度设置的颜色方式

RGBA(红色值,绿色值,蓝色值,透明度)

透明度的取值 0-1之间的小数 0 彻底透明 1 彻底不透明

HSL模式

H 色相(颜色的类型) S 饱和度 L 亮度

格式:

HSL(色相,饱和度,亮度);

色相: 0-360的正数

饱和度: 0% -100%

亮度: 0% -100%

HSLA模式

格式:

HSLA(色相,饱和度,亮度,透明度);

透明度的取值 0-1之间的小数 0 彻底透明 1 彻底不透明

长度单位:

px 像素用于表示一个颜色的点就是像素

像素是一个相对单位,能够有系统进行调整.相对单位

mm 毫米不容许使用,绝对单位

cm 厘米不容许使用,绝对单位

em 一个汉字的大小

ex 一个小写x的大小

CSS的使用方式

分为四种使用方式:

外链式CSS

导入式CSS

嵌入式CSS

内联式CSS

CSS的格式

CSS的具体格式:

CSS选择器{

CSS属性名:属性值;
CSS属性名:属性值;

...
}

CSS的选择器:

用于选中页面中制定的标签添加样式,这种选择的语法就是选择器.

HTML选择器

直接使用HTML标签的名称进行选择,选中全部的同名的HTML标签

标签名{css样式}

CLASS选择器

为须要选取的标签添加class属性,而且定义值,
在CSS中使用.class属性值就能够选取具备class值的标签,能够添加多个元素

.class名{css样式}

   ID选择器

为须要选择的页面添加id属性,而且自定义一个值

在CSS中使用#id值就能够选中这个标签,一个页面中禁止出现两个以上的同名ID

#id名{CSS样式}

关系选择器

选中制定标签内部的全部指定标签.

选择器1 选择器2{css样式}

组合选择器

同时使用多个选择器,中间使用逗号分隔,能够选中全部的符合选择器的元素添加样式

选择器1,选择器2{css样式}

通用选择器

* 用于选中页面中的全部标签.使用时须要慎重,而且通常配合组合选择器使用

   属性选择器

       选择器[属性]

选中具备执行属性名称的标签

选择器[属性="值"]

选中具备执行属性且名称和指定名称相同的标签

选择器[属性^="字符"]

选中具备执行属性,且属性以制定字符开头的标签

选择器[属性$="字符"]

选中具备执行属性,且属性以制定字符结尾的标签

选择器[属性*="字符"]

选中具备执行属性,且属性包含制定字符的标签

结构选择器

child系列

first-child

格式: 选择器:first-child{CSS样式}

last-child

格式: 选择器:last-child{CSS样式}

nth-child

格式: 选择器:nth-child(位置){CSS样式}

位置可使用数字,奇偶单词或者带有n的表达式

nth-last-child

格式: 选择器:nth-last-child(位置){CSS样式}

位置可使用数字,奇偶单词或者带有n的表达式

注意:child系列的选取方式规则:

1.选择符合选择器(:前面的部分)的元素

2.选择全部选中元素的全部父元素

3.找到全部父元素中制定位置的子元素

4.验证第三步中找到的子元素是否符合第一步中用于选中元素的选择器(:前面的部分),若是符合则选中,若是不符合则抛弃

of-type系列

first-of-type

格式: 选择器:first-of-type{CSS样式}

last-of-type

格式: 选择器:last-of-type{CSS样式}

nth-of-type

格式: 选择器:nth-of-type(位置){CSS样式}

位置可使用数字,奇偶单词或者带有n的表达式

nth-last-child

格式: 选择器:nth-last-of-type(位置){CSS样式}

位置可使用数字,奇偶单词或者带有n的表达式

注意:of-type系列的选取方式规则:

1.选中页面中全部符合选择器(:前面的部分)的元素

2.选中全部符合选择器元素(:前面的部分)的全部父元素.

3.将全部父元素中全部有符合选择器(:前面的部分)的元素组成一个新的集合

4.在新的集合中选择指定位置的元素

   伪类选择器

       选择器:link

           选中符合选择器的元素的正常链接状态,仅适合于A标签

选择器:hover

选中符合选择器的元素的鼠标通过状态,适用于全部元素

选择器:active

选中符合选择器的元素的点击状态,仅适合于A标签

       选择器:visited

           选中符合选择器的元素的访问事后的链接状态,仅适合于A标签

伪对象选择器

选择器::first-letter

选中符合选择器的内容中第一个字符,添加样式

选择器::first-line

选中符合选择器的内容中的第一行文字,添加样式

选择器::before

选中符合选择器的内容中的前半部分

选择器::after

选中符合选择器的内容的后半部分

字体属性

font-size :

设置字体的大小

font-weight:

设置字体的粗细

color :

设置字体的颜色

font-style :

设置是否为斜体

font-family:

设置字体的累心,须要注意依然须要使用本地系统的字体库

背景属性

background

background-color 设置元素的背景颜色

background-image 设置元素的背景图片

       格式:

       background-image:url(图片地址);

background-repeat: 设置背景图片的重复方式

重复方式:

           repeat 横向和纵向重复

           no-repeat 不重复

repeat-x 横向重复

repeat-y 纵向重复

background-position-x: 设置背景图片的横向位置

background-position-y: 设置背景图片的纵向位置

全部位置均可以使用长度单位或者百分比

除此以外,横向位置可使用left center right 纵向位置 top center bottom

background-size: 设置背景图片的大小

透明度设置

opacity 设置整个元素的透明度

取值范围 0 -1 0 透明 1不透明

盒子模型

任何元素在浏览器中都会被以盒子模型的方式进行解析,解析只有具备盒子模型的属性.

margin 外间距

margin: 设置四个方向的外间距

margin-left: 设置元素左侧的外间距

margin-right 设置元素右侧的外间距

margin-bottom 设置元素底部的外间距

margin-top 设置元素顶部的外间距

border 边框

border: 设置边框的综合属性

按照方向划分四个属性

border-top: 设置顶部边框的颜色风格和宽度

border-bottom 设置底部边框的颜色风格和宽度

border-left 设置左侧边框的颜色风格和宽度

border-right 设置右侧边框的颜色风格和宽度

按照值划分三个属性

border-width 设置四个边的宽度

border-style 设置四个边的样式

       border-color 设置四个边的颜色

       按照值和方向划分12个属性

border-top-width: 设置顶部边框的宽度

border-top-style 设置顶部边框的风格

border-top-color 设置顶部边框的颜色

border-bottom-width: 设置底部边框的宽度

border-bottom-style 设置底部边框的风格

border-bottom-color 设置底部边框的颜色

border-left-width: 设置左侧边框的宽度

border-left-style 设置左侧边框的风格

border-left-color 设置左侧边框的颜色

border-right-width: 设置右侧边框的宽度

border-right-style 设置右侧边框的风格

border-right-color 设置右侧边框的颜色

边框圆角属性

border-radius:边框圆角综合属性,设置四个角

           水平和垂直半径相同:

           border-radius: 半径;

           水平和垂直半径不一样:

           border-radius: 水平半径/垂直半径;

border-top-left-radius: 设置左上角的圆角

           水平和垂直半径相同:

           border-top-left-radius: 半径;

           水平和垂直半径不一样:

           border-top-left-radius: 水平半径垂直半径;

border-top-right-radius: 设置右上角圆角

           水平和垂直半径相同:

           border-top-right-radius: 半径;

           水平和垂直半径不一样:

           border-top-right-radius: 水平半径垂直半径;

border-bottom-left-radius: 设置左下角圆角

           水平和垂直半径相同:

           border-bottom-left-radius: 半径;

           水平和垂直半径不一样:

           border-bottom-left-radius: 水平半径垂直半径;

border-bottom-right-radius : 设置右下角圆角

           水平和垂直半径相同:

           border-bottom-right-radius: 半径;

           水平和垂直半径不一样:

           border-bottom-right-radius: 水平半径垂直半径;

   padding 内补白

       padding 同时设置四个方向的内间距

padding-left 设置元素左侧的内间距

padding-right 设置元素右侧的内间距

padding-top 设置元素顶部的内间距

padding-bottom 设置元素底部的内间距

注意: border和padding会增长元素的总体大小,margin不会

布局属性

布局属性的做用就是为了设计页面而存在的CSS属性.

display : 设置元素的显示方式

none 不显示元素

block 显示为块状元素

       inline 显示为内联元素

       inline-block 显示为行内块状元素

...

float: 设置元素的浮动属性

方式:

left: 左浮动

right: 右浮动

none:不浮动

注意:浮动元素和正常的非浮动元素不在同一个层面,所元素浮动以后,当前元素下面的区域能够存放其余元素,为了防止其余元素在浮动元素之下摆放须要使用clear属性进行设置

clear : 清除浮动元素对当前元素的影响

       值:

           left 清除左浮动

right 清除右浮动

both 清除左右浮动

visibility: 设置元素是否可见

hidden 设置元素不可见

visible 设置元素可见

注意: visibility设置为hidden时元素不可见可是依旧占用物理空间,而display设置为none时元素不可见,而且不占用物理空间.

overflow: 设置元素中内容溢出的处理方案

值:

visible 超出元素依旧显示内容

hidden 超出元素部分隐藏

scroll 超出元素时添加滚动条

#渐变效果

渐变效果分为两大类:

线型渐变: 单线型渐变和重复的线型渐变

径向渐变: 单径向渐变和重复的径向渐变

单线型渐变

简单渐变:

linear-gradient(颜色,颜色,颜色....)

带有方向的渐变

linear-gradient(方向,颜色,颜色,颜色....)

方向取值:

to top 自下而上进行渐变

to bottom 自上而下进行渐变

to left 从右向左渐变

to right 从左到右渐变

角度取值

带有颜色起始位置的渐变

linear-gradient(方向,颜色位置,颜色位置,颜色位置...);

注意: 在颜色后面进行设置的不是颜色占有的比例而是当前颜色纯色出现的位置,纯色以外采起渐变或者彻底纯色填充的原则.

单径向渐变

简单的径向渐变

radial-gradient(颜色,颜色....)

设定形状的径向渐变

radial-gradient(形状,颜色,颜色...);

形状取值: circle 圆形 ellipse椭圆形

设定圆心的径向渐变

radial-gradient(at 圆心坐标 ,颜色,颜色....);

圆心坐标可使用长度单位,也可使用位置单词

水平 left center right

垂直 top center bottom

设置渐变终点的径向渐变

radial-gradient(渐变终点,颜色,颜色...);

渐变终点:

closest-side 从圆心渐变到最近的边

closest-corner 丛圆心渐变到最近的角

farthest-side 从圆心渐变到最远的边

farthest-corner 丛圆心渐变到最远的角

长度值

设置颜色位置的径向渐变

radial-gradient(颜色位置,颜色位置....);

最完整的径向渐变设置

radial-gradient(形状渐变终点 at 圆心位置,颜色位置,颜色位置...);

重复的线型渐变

repeating-linear-gradient(方向,颜色位置,颜色位置...)

通常状况下重复线型渐变仅最后一个颜色设置位置,并且最后一个颜色位置点决定重复的次数

重复次数计算方式 = 100% / 最后一个颜色点的位置百分比

重复的径向渐变

repeating-radial-gradient(形状渐变终止点 at 圆心坐标 , 颜色位置,颜色位置....)

通常状况下重复线型渐变仅最后一个颜色设置位置,并且最后一个颜色位置点决定重复的次数

重复次数计算方式 = 100% / 最后一个颜色点的位置百分比

注意:通常状况下咱们设置最开始的颜色和结束颜色一致,保证重复渐变式颜色不会太突兀.

角度单位

度 deg 一个圆划分为360度

周 turn 一个圆就是一个turn

弧度 rad 一个圆就是2π弧度

梯度 grad 一个圆划分为400梯度

转载于猿2048:➻《web前端基础知识》