前端基础 HTML文档类型声明基本结构块级元素和行内元素图片文件路径常用属性 超链接文本格式化标签注释列表无序列表有序列表自定义列表 表格表格结构table属性tr属性td属性 表单form表单域里的inputH5新增的input的type类型H5新增的input的属性 语义化标签h5新增语义化布局标签 实体字符div和spanHTML5新增媒体标签音频媒体标签视频媒体标签source CSShtml中引入csscss选择器基础选择器关系选择器合并选择器 标准（W3C)盒模型content 内容区域border 边框paddingmargin 字体属性colorfont-sizefont-weightfont-stylefont-family 文本属性text-aligntext-decorationtext-transfertext-indent 背景属性background-colorbackground-imagebackground-repeatbackground-sizebackground-attachmentbackground-positionbackground 列表属性list-style-type:list-style-imagelist-style-positionlist-style 样式单位emrem 表格属性borderborder-collapseheight和widthtext-align和vertical-alignpaddingbackground-color 内容溢出overflow一行文字溢出省略号显示 操练tipshtml, css (魅族官网首页）

HTML

汪汪汪！加油！

文档类型声明

作用：告诉浏览器按什么标准来解析页面

html5 的声明，不区分大小写，结束标签可省但不推荐，单标签的/可省但不推荐

html 4.01 有3个版本 严格 传统（过渡） 框架

xhtml 严格的html 区分大小写结束标签不能省略

若无文档类型声明，浏览器按照怪异模式（混杂模式）解析页面，就是按照自己的标准解析页面

有文档类型声明的页面，浏览器按标准模式解析页面，就是按照当前标准解析页面

DTD文档是指有文档类型声明的文档

注意！文档类型声明不是标签

基本结构

head：

head标签里的属性 lang属性，对页面中的主要语言进行声明，对搜索引擎和浏览器更友好。en英文 zh-CN中文

head标签里包含的标签 meta, title, link, style, script…

一个网页只有一个titlemeta用来描述一个html网页文档 charset属性描述页面主要用的语言 中文常用utf-8,国外常用gbk name和content属性 name:keywords，description或author content就有不同对应,对搜索引擎更友好

body:页面显示的内容

块级元素和行内元素

区别： 1.块级元素独占一行，行内元素在同一行显示 2.块级默认宽度为100%，%相对于父元素来说 行内元素默认宽度由内容决定 3.块级元素可以设置宽高，行内元素设置宽高不生效

块级：h1-h6,hr,p，ul，li 行内：img，文本格式化标签，input

图片 文件路径

绝对路径： 1.网址 2.盘符 html去找图片 相对路径： 1.平级： 直接写 2.下一级：/ 先写平级再写下一级 3.上一级：…/ 上两级：…/…/

常用属性

alt 图片不能正常显示给的提示 title 鼠标悬停在图片上给的提示

还有出br，其他标签都有的属性： width height 注意若宽高只设一个，就等比例缩放 html默认单位px

让图片居中

无法直接对img用align定义水平对齐位置，可以用一个p把它包起来，p里用align="center"让它居中

超链接

作用：跳转 属性： href 路径 href="#" 空链接 效果是返回页面顶部

target: _blank 打开新窗口 _self 默认值：原窗口打开

name: 锚点名 可以用于同一页面跳转(只能a有) 1.点击a跳转到a a 跳转到 href="#另一个a的name" a name

2.点击a跳转到块级元素 块级 id a 跳转到 href="#块级a的id"

图片之间的跳转 a href=“要跳转的图片路径” img a

文本格式化标签

浏览器默认字体为16px b 加粗 i 倾斜 u 下划线 H5淘汰了 del和s 删除线 em和strong 强调 em是斜体 strong是加粗

sup上标 sub下标

small小号字体 big 大号字体 H5已经淘汰

注释

1.注释之间不能相互嵌套

列表 无序列表

ul li ul 内容写在li里 li里可以写a或者img

ul的type属性全部都用，li的type属性写是什么就是什么 有默认的disc黑色实心圆 circle空心圆 square黑色实心矩形 none不显示

li里还可以嵌套一个ul和li的组合 嵌套展示级别如上，直到黑色实心矩形就一直

有序列表

ol li ol type有 默认值1，或者 a A i II 对应有个start属性，就是起始的序号 还有一个reversed(=“reversed”)可能有负的

也可以相互嵌套，有序和无序也可以相互嵌套

自定义列表

dl 嵌套 dt和dd 平级 dt 主题 dt描述 一个dl里可以有多个dt dd

一般可以用 图片dt+文字内容dd

表格 表格结构

table tr定义行 td定义单元格（列) th特殊单元格和td类似，但是内容默认居中加粗 caption 表格的标题

table属性

border 边框 （作用于最外边的）单位像素 align 给table是作用于table width height bgcolor backgroud 放背景图片 背景颜色和背景图片同时都有，图片的优先级高

gif支持图片透明

cellpadding 单元格内边距（内容到单元格边框） cellspacing 单元格之间的距离 值为0时变成一条线

tr属性

height 内容默认水平居左 align bgcolor background valign 默认middle 垂直

td属性

height width align valign bgcolor background

rowspan 跨行 colspan 跨列

表单 form

form的作用:可以把用户输入的数据提交到服务器，使得页面具有交互性。

表单组成：表单标签，表单域，表单按钮 表单标签：form 表单域：用来收集用户输入内容的每一项。（input) 表单按钮：用来确认提交表单信息到服务器的按钮

form之间不能相互嵌套 但是页面里有多个form表单，name区别不同表单

action=“提交到的地址” method 提交方式，get,pos 默认get

get和pos的区别 1.安全性：get的提交方式不安全，数据会在地址栏中显示，post比较安全。 2.数据体量：get只能提交少量数据（不能大于2kb)，post可以提交大量数据。

表单域里的input

input是行内元素 type=“text ”单行文本框 如用户名，邮箱，手机号等 name=“ ”小驼峰命名法 首字母小写，后面每个单词首字母大写 value=“ ” 当前值，默认值

其他： type: password 密码 radio 单选按钮 (注意:同一类选项都要有name属性) checkbox 复选框,记住常用 submit 提交按钮 默认value是提交，可以改value成登录 reset 重置 默认value是重置，可以通过修改value button 普通按钮 没有任何功能的按钮

按钮标签button,行内元素 button 默认是由提交功能的按钮 若要改成重置功能，需要把它的type=“reset” 没有任何功能的按钮 type=“button”

select 下拉列表 （还只是框） 选项：option

textarea 多行文本框 通过cols rows属性设置行列数量 右下角有一些斜线可以拖动，默认情况下只有此元素可拖动

可以用label标签，利用其for属性设置和表单元素的id一致绑定联动 label提升用户体验度，无任何样式 点击label之间内容，相关标签会被选中

input: type=file 上传文件 默认的form的编码格式不支持上传，改成enctype="multipart/form-data"二进制 type=hidden 隐藏域，不是给用户看的，但是携带的信息可以提交 type=image 图片提交按钮

H5新增的input的type类型

email邮箱 必须含@，@前后都有内容 url网址 必须含协议 协议后必须有内容 search 搜索 搜索框可用，一般用text color 颜色选择框 tel 电话 number 数字框，min max定范围 step定每一步加减多少 range 范围滑块 默认在中间 min max step date 日期 具体到天 默认当前这一天 week周 具体到周 默认当前 month 月

H5新增的input的属性

placeholder 提供默认提示

checked 可以直接写

语义化标签

语义化的标签，旨在让标签有自己的含义。 看到标签，直到它的涵义。

标签去干合适的事情，如标题就用h,段落就用p

语义化标签的优点： 1.代码结构清晰，方便阅读和后期维护，有利于团队合作开发 2.有利于搜索引擎优化（SEO) 理解：比较容易通过meta里的keywords,description还有网页的标题之类的抓取网页。 3.方便其他设备（屏幕阅读器，盲人阅读器，移动设备）以语义化的方式来渲染网页

例子：

请使用语义化标签创建头部标签且包含导航标签。 注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。

<header> <nav> </nav> </header> h5新增语义化布局标签

这些新增的语义化布局标签在IE8以下浏览器不兼容

实体字符

空格 &nbsp 小于号 < &lt 大于号 > &gt 版权 &copy

div和span

div和span都是没有语义的容器，div是块级元素而span是行内元素。

块级元素可以嵌套行内元素和块级元素，行内元素一般不要嵌套块级元素

hn或p一般不嵌套div span里不许嵌套div

HTML5新增媒体标签 音频媒体标签

audio行内元素 支持格式 mp3 ogg wav < audio src="" > 提示浏览器不支持播放 </ audio> controls 控制面板 loop循环播放 autoplay muted

请写出具有控件功能的音频媒体标签。

<audio controls> </audio> 视频媒体标签

video是行内元素 支持的格式 mp4 ogg(移动端） webM(高清） width height < video src=" " >提示浏览器不支持播放 </ video> 属性名等于属性值 autoplay 自动播放一次 controls 播放暂停等控件 显示控制面板 loop 循环播放 muted 默认静音 （想要声音就用controls控件打开声音） poster 海报 视频播放前显示的图片

source

source标签为vedio和audio标签定义媒介资源，可以规定可替换的音频或视频文件由浏览器对支持的格式进行选择

CSS

层叠样式表，级联样式表，内容和样式分离

作用： 1.实现了内容和表现的分离 2.提高代码的可重用性和可维护性 （重复的样式可以只写一遍）

文件后缀.css

语法： 属性：属性值；

特点： 1.继承性 子元素可以继承父元素的样式 子元素样式都一样时，设置父元素样式就好 2.层叠性 对一个元素可以多次设置同一个样式，这样它的样式就是最后一次设置的样式。（当样式冲突时，根据优先级应用样式） 3.优先级 样式冲突时，优先级高的样式被应用 优先级相同时，后写的样式生效 （css由浏览器解析执行，由上往下，由左往右）

注释： /* */ 不能相互嵌套

html中引入css

1.内联方式 行内样式 利用html元素的style属性引入css stye=“css的样式” 除了br外，都有 弊端：样式只对当前样式生效

2.内部方式 利用stye标签，在head里

语法： 选择器{样式}

选择器：选择写样式的元素 弊端：样式只对当前页面生效

3.外部方式 利用link 连接引外部样式 在head里 < link rel=“stylesheet” hrf="…css" >

实现了内容和表现得完全分离，提高了代码得可重用性和可维护性

语法： 选择器：{样式}

一个css可被多个html引用 一个html可引用多个css

三种引入方式的优先级：

外部样式和内部样式<行内样式

如果style写在link前，外部样式大于内部样式 否则反之，后写的样式优先级高生效

推荐用外部样式

还有一种：导入式 等于： import “CSS文件路径”

@import和link的区别 1.加载顺序不同: @import先加载html，后加载css link同时加载html和css 2.加载内容不同，import只能引入css，而link里还可以引入icon 17x17 3.兼容性不同，imporIE5以上支持，link都可以 4.@import会增加页面http请求 5.js操作dom时，只能操作link引入css(原因1）

css选择器

选择器作用：选中页面要写样式元素

基础选择器

1)全局选择器（通用选择器） *{ }

2)元素选择器 div{ } img{ } 选中所有指定元素

3）类选择器 .className{ } 利用html的class属性 html里class可以多个名字，用空格隔开

4)id选择器 利用html的id属性 #idName{ } idName具有唯一性

优先级： 行内样式>id选择器>类选择器>元素选择器>全局选择器 权重：1000 100 10 1

HTML的四大通用属性 除了br标签外，其他标签都有的属性 title style class id

关系选择器

1、后代选择器 空格 选择器1 选择器2{ } 含义：选择器1里的所有后代选择器2

2、子代选择器 > 选择器1>选择器2>…选择器n{ } 含义：选择器1的直接子代选择器2

注意 优先用子代

3、相邻兄弟选择器 + 选择器1+选择器2{ } 含义：选择器1后面相邻的选择器

4、通用兄弟选择器 选择器1~选择器2{ } 含义：选择器1后面所有的兄弟选择器

超链接a不会继承样式

合并选择器

选择器1，选择器2…选择器n{ 公共样式 }

标准（W3C)盒模型

content、padding、border、margin margin 外边距设置两个元素之间的距离 padding 内边距设置内容和边框之间的距离

content 内容区域

width 宽 px % height 高 px % 相对于父元素

min-width max-width min-height max-height

默认情况下，块级元素宽度为100%。行内元素宽度由内容撑开。块级元素可以设置宽高，行内元素设置宽高不生效。

border 边框

border-style 边框样式 必须设置否则不生效 默认为黑色 3px solid实线 dashed 虚线 dotted 点线 double 双直线 none border-color border-width

可简写为border，不对顺序有要求

背景颜色可以到边框的下面

双直线每条线1px 设置宽度是两条直线加缝隙的宽度，所以要求边框宽度至少为3px

border-top border-bottom border-left border-top-width等

单边四个角是斜着接到一起

padding

设置内容到边框的距离，不能取负值和auto 背景颜色也能到padding(连border都能到) padding: value; 四周 padding: value1 value2; 上下 左右 padding: value1 value2 value3; 上 左右 下 padding: value1 value2 value3 value4; 上 右 下 左（顺时针）

padding-top padding-left

padding会撑大容器

margin

设置元素之间的距离,可以取负值和auto 背景颜色到不了，margin是透明的 margin: value; 四周 margin: value1 value2; 上下 左右 margin: value1 value2 value3; 上 左右 下 margin: value1 value2 value3 value4; 上 右 下 左（顺时针）

margin-top margin-left

块级元素居中： margin: 0 auto; auto可以自动计算使得居中 随着浏览器的缩放都能居中

字体属性

字体属性具有继承性

color

设置字体颜色 取值方式： 1.关键字 red 2.十六进制 3.rgb 4.rgba a表示透明度 0-1 若取值0.x则0可以省略

font-size

设置字体大小 注意：不能通过调整字体大小使得段落看上去标题，标题看上去像段落。 浏览器支持的最小字体为12px

font-weight

设置字体是否加粗 默认值：normal 定义标准字符 bold粗体字符 bolder更粗体字符 lighter更细字符 0~100px 粗到细 400是normal 700是bold

font-style

定义字体是否倾斜 normal标准字符 italic斜体

font-family

指定字体 可以写多个，浏览器不支持前面的时会尝试下一个，每个值用逗号隔开，字体名称之间有空格时要用引号

文本属性

文本属性具有继承性

text-align

设置文本对齐方式

默认left

text-decoration

设置添加到文本的装饰，如下划线，上划线，删除线等。 none 默认（用以去掉a的下划线） underline下划线 overline 上划线 line-through 穿过文本的线

text-transfer

设置英文大小写字母转换 none标准文本 lowercase 全部转换成小写 uppercase 全部转换成大写 capitalize 每个单词首字母变成大写

text-indent

设置文本的首行缩进 允许负值，负值会向左缩进 取值： px em 相对当前字体大小

背景属性 background-color

设置背景颜色 transparent 默认值 背景是透明的

background-image

background-image：url (" "); 设置背景图片 默认情况下放在元素左上角 如果图片小于容器大小，会在垂直方向和水平方向平铺 大于时，图片不完全显示。

background-repeat

设置背景图片是否平铺 no-repeat repeat-x repeat-y

background-size

设置背景图片大小 cover 就覆盖调整个容器,但图片可能显示不完全 content 不完全覆盖，图片等比例缩放至最大显示完全 px 只取一个值时，等比例缩放 % 只取一个值时，等比例缩放

background-attachment

默认值scroll fixed 固定 不随滚动条滚动

设置背景图片是否固定或滚动

background-position

设置背景图片的起始位置 px 取正值向右下角 取负值向左上角 只有一个值就是水平方向的，垂直方向没设置时居垂直中 % 左上 0% 0% 右下 100% 100%

关键词 center right bottom left bottom right top left top

background

复合属性：

背景颜色 背景图片 背景图片是否平铺 背景图片大小 背景图片定位 背景图片是否固定

没有取值属性取默认值

单个属性和简写属性同时存在，把简写属性写在单个属性值上面（避免后写简写属性把单个属性也初始化）

注意 背景图片大小和图片定位取像素值或者百分比时，单独来写

列表属性 list-style-type:

设置列表项标记的类型 none 无标记 disc 默认 实心圆 circle 空心圆 等等

list-style-image

设置用图像来替换列表项的标记 方法： ul{ list-style-image: url(" "); } 一般不用，因为用它和后面的文字内容很难居中对齐

list-style-position

用来指示如何相对于对象内容绘制列表项标记 在li里边还是外边

list-style

简写 ：类型 图片 定位

样式单位 em

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。

.box { /*补全代码*/ height:4em; width:4em; }

所有浏览器默认字体大小为16px,在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间。1em=1倍的字体大小

rem

请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。

div { /*补全代码*/ height:4rem; width:4rem; }

rem是相对于HTML标签字体大小的单位 默认根字体1rem=16px

表格属性 border border-collapse

设置表格边框是否折叠或者隔开 取值： collapse折叠 相当于html写内联样式里的cellspacing

height和width text-align和vertical-align

vertical-align表格内容的垂直对齐方式

padding

设置表格填充

background-color 内容溢出 overflow

默认内容大于容器直接溢出 取值： hidden 溢出部分隐藏掉 auto 溢出部分自动生成一个滚动条 不溢出无滚动条 scroll 不管是否溢出都显示滚动条

一行文字溢出省略号显示

white-space: nowrap 内容在同一行显示 overflow: hidden 溢出部分隐藏 text-overflow：ellipsis 文本溢出省略号显示

操练tips html, css (魅族官网首页）

图标 < link rel=“icon” href=“图片路径” link > 为了适应不同分辨率的电脑或者显示设备，容器大小不要定死 最好用%

放一行的块可以用width: x%

注意 横向不能出现滚动条 width: 100%时就不要设置左右的margin和padding

可专门设置一个水平居中的class

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。