html5基础总结

常用标签：
标题标签：
h1---h6   默认样式 加粗、变大    h1最大，h6最小

        作用：可以帮助浏览器检索页面，推广的重要性仅次于title标签

段落标签：
<p></p>     行与行之间有较大间距，独占一行，是块元素。只放文字或图片

图片标签：
<     img src=”  ”     alt= “ ” width=” ”>

src引入图片的路径        ./（在同一目录下）或../（不在同目录下）

alt对图片的描述，当引入不成功时，显示文字

width 设置图片宽度、hight 设置图片高度

注意：一般情况不会同时设置宽高，防止出现变形

               设置一个宽或高，另一个设置自适应

<hgroup>标签：
用来标题分组     从样式上看，加不加hgroup没有区别，但从语义上看，两者就有关系了

<em>标签：
表示语气加重    默认样式 有一点点倾斜，不独占一行，行内元素

<strong>标签：
表示强调            默认样式 有一点点加粗，不独占一行，行内元素

blockquote标签：
引用别人的话，长引用，会换行，块元素

q标签：
短引用        

<hr>标签：
分隔线  自结束标签

<br>标签：
换行标签，强制换行，自结束标签

<del>标签：
表示一个删除的内容

<center>标签：
文本居中效果

<div>标签：
用来布局，没有意义的块元素，只表示一个区块

<span>标签：
没有语义，一般就用来包裹文字，行内元素
 

布局标签
header标签         网页的头部

main标签            网页的主体部分

footer标签          网页的底部

nav标签             网页的导航

aside标签           和主体相关的内容，侧边栏

article标签          文章之类的

section标签         独立的区块，上面的标签都不合适，就用这个，一般用来代替div

列表标签
列表标签分为三种，分别为：有序列表、无序列表和定义列表

一、有序列表：

                ol创建，li表示列表项

二、无序列表

ul创建，li表示列表项

        disc       默认值，实心的原点

        square 实心的方块

        circle    空心的圆

三、定义列表

        Dl创建，dt下定义，dd解释定义

        有序列表、无序列表默认样式：左边有间距，有项目符号

        type属性改变项目符号

        列表可以相互嵌套

图片标签
<  img src=”  ”     alt= “ ” width=” ”>

src     是引入图片的路径        ./（在同一目录下）或../（不在同目录下）

alt      是对图片的描述，当引入不成功时，显示文字

width    是设置图片宽度

hight     是设置图片高度

注意：一般情况不会同时设置宽高，防止出现变形：

               设置一个宽或高，另一个设置自适应

超链接标签
超链接:  可以是字、图片、一句话、表格等等

< a href=””>        行内元素

2个功能、2个属性、1个补充

功能：1.从一个页面跳到另一个页面

               2.当前页面进行跳转

属性：

        1.Href属性：设置超链接跳转的地址

                填写超链接跳转地址：

                相对地址：通过./进行跳转，./是默认的路径，可以省略

                通过../跳出当前目录，如果没有，再跳

                绝对地址：如京东、淘宝等

        2.Target属性：控制超链接打开的方式

                _self（锚点功能）   在当前页面打开 默认写法

                _blank   在新网页打开超链接

补充：

        锚点功能：

                1.回到顶部：href属性设置为#即可

                2.去任意位置：id=、href=#id

                            第一步：给要去的位置打个标记

                            第二步：在href属性的属性值，将标记写上       #id属性值

       注意：id属性值：不能数字开头，不要是汉字，独一无二的

                空链接： 1.加个#     2.JavaScript：；

行内与块元素
元素区分为：块元素、行内元素、行内块元素

块元素（block element）：常用来布局、独占一行、从上到下顺序排列、宽度是父元素的100%、高度默认是被内容撑开的

什么都能放，块元素、行内元素、行内块元素

例如：div、h1—h6、p、header、footer、nav

行内元素（inline element）:常用来包裹文字，不会独占一行，从左到右排列，宽高都是被内容撑开的，不可以自定义宽高

只能放行内元素如文字

例如：span、em、啊、

行内块元素：兼容块元素和行内元素的特点，不会独占一行、可自定义宽高

特殊的块元素p标签，一般放文字或图片

特殊的行内元素a标签，里面什么都能放

元素之间可以相互转换---display属性

Block 成块元素

Inline 转成行内元素

Inline-block 转成行内块元素

None 将元素隐藏

音视频标签
Audio标签：引入一个外部音频文件

Controls:控制是否允许用户点击播放

Loop：是否循环播放

Video标签：引入一个外部视频文件

Autoplay 自动播放 这个属性除了ie，大部分浏览器已经废弃

图片格式
Jpeg（支持颜色多）、gif（动图）、png（转为网页而生）、webp（兼容性不好）、base64（和网页一起加载的图片）

网站解析代码顺序：先解析结构、解析css、解析其他：js，图片