HTML5 和CSS3 基础知识

来源：互联网发布：数据共享与交换编辑：程序博客网时间：2024/05/21 08:52

一、HTML5

1.HTML：Hyper Text Markup Language--超文本标记语言

2.<!DOCTYPE html> : html版本 -- 浏览器的怪异模式 / 标准模式

3.<html></html>: 根标签，声明html

4.<head></head>:头部标签

5.<title></title>:网页标题

6.<meta>: 网页编码，关键词，网页描述，viewport

7.<link>: 链入外部文件 -- style , icon图标

8.<style></style>:内部样式表

9.<body></body>:网页主体内容

10.<div></div>:没有任何样式的块标签

11.<span></span>:没有任何样式的行标签

12.<h1>....<h6>:标题标签 --依次变小

13.<a>:超链接标签

属性:href:链接地址

:title:鼠标移上去时显示的文字

target:链接打开方式_self / _blank

14.相对地址/绝对地址 (以当前文件为起点来寻找/以http://开头的地址)

15.<img>:图片标签

属性:src:图片的地址或路径

alt:图片不显示时显示的文字

title:

16.相对路径/绝对路径:路径(文件保存的磁盘位置)

17.<p></p>:段落标签

18.列表标签: <ul><li></li></ul>:无序列表

<ol><li></li></ol>:有序列表

<dl><dt></dt><dd></dd></dl>:项目列表

19.<table>

<thead>

<tr><th></th></tr>

</thead>

<tbody>

<tr><td></td></tr>

</tbody>

<tfoot>

<tr><td></td></tr>

</tfoot>

</table>

20.<!---->:html注释

21.<br>:换行标签

22.<hr>:水平线

23.加粗标签<b></b>

<strong> </strong>

24.斜体标签:<em></em> <i></i>

25.删除线:<s> </s>

26.框架集标签:在一过页面中引入多个页面

<frameset></frameset>:框架集，用来定义页面结构的

属性:rows:将页面划分成上下结构（px,百分比，*）

cols:将页面划分成左右结构

<frame>:引入页面

属性:src:引入的页面地址

scorling:设置是否i有滚动条(yes/no/auto)

<noframes></noframes>:当浏览器不支持框架时显示的提示信息

<iframe>:在一个页面中嵌入另一个页面

27. 表单控件 ： 收集用户信息，与用户做交互

<form></form>:表单标签 --有表单控件的，就一定要用表单

属性：action:提交的页面

method:提交的方式 get/post

enctype:上传文件时必须写成 enctype="multipart/form-data"

<input>: type:表单控件的类型（text/password/radio/chexbox/file/submit/reset/buttom/image/hidden）

<textarea></textarea>:文本域

<select> <option></option></select>:下拉选框

表单控件常用属性: name / value / paleceholder /checked / selected/disable

28.H5新增标签：<cancas></cancas>:画布

<svg></svg>:画布

<video></video>:视频标签

<audio></audio>:音频标签

<embed></embed>:flash等其他

布局标签:<header></header>

<asiide></aside>

<nav></nav>

<section></section>

<article></article>

<footer></footer>

表单标签：email,url,color,number....

二、CSS

1.CSS:Cascading Style Sheets 层叠样式表

2.如何使用样式表: a.行内样式表--style属性

b.内部样式表--style标签

c.外部样式表--导入外部样式表（1.<link> 2.@import）

3.link导入样式与import的区别？

①link除了链接CSS文件外，还可以链接其他文件，@import不可以

②link是html标签 ，@import是css属性

③link加载的文件随着页面加载同步进行，@import是网页加载完成之后才加载的

④link的权重高于@import 

⑤link没有兼容问题 @imort有兼容问题

⑥link支持js控制相关属性;@import则不可以

4.css选择器: 通配符选择器，标签选择器，class选择器，ID选择器，组选择器，组合选择器

伪类选择器 ， 后代选择器，子集选择器，属性选择器，结构选择器，伪元素选择器

6.:after与::after的区别

::after是css3中的，注意为了和伪类区分，不过:after兼容性更好

7.盒子模型：块元素

margin+border+padding+content(width,height)

8.常用样式:文本：font-size,font-family,font-weight,color,text-decoration,text-align,line-height, letter-spacing,text-indent,@font-face

盒子模型：margin,padding border(border-width ;border-color;border-style,border-radius,border-image,box-sizing)

背景：background-color,background-image,background-position,background-repeat,background-attachment,background-size,background-origin

浮动：float

定位：position

其他样式：z-index ，list-style,vertical-align,opacity , cursor,fifter,box-shadow,

box-reflect,transform,transition,animation,mask,overflow,display

9.盒子塌陷：什么是盒子塌陷？如何解决？

外部盒子本应该包裹住内部的浮动盒子，结果却没有。

1 .给外部盒子也添加浮动

2.在外部盒子内最下方添上带clear属性的空盒子

3.用overflow:hidden清除浮动

4.用after伪元素清除浮动

10.CSS SPRITES:css精灵 可伸缩按钮

11.浮动产生的影响？BUG？如何清除浮动？

12.postion常用属性有那些？分别有什么用？

static：默认值。没有定位，元素出现在正常的流中（忽略 top,bottom,left,right或者z-index声明）。

relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级

inherit：规定应该从父元素继承 position 属性的值。

13.css选择器的优先级？ ! important

14.新增属性值：rgba() transparent blur() flex

15.overflow:hidden,display:none,visibility:hidden 有什么区别?

1.display:none;

隐藏元素，不占网页中的任何空间，让这个元素彻底消失

2 visibility:hidden;

他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的

3 Overflow:hidden；

对行内元素无效，必须是块级元素，并且设置宽度高度。

隐藏之后元素依然占据着位置。

16.BFC

17.移动端布局:viewport , @media，rem , em , flexbox

18css hack

19.浏览器厂商前缀：webkit, moz , o ,ms

阅读全文

2 0