一、标记语法

   1.封闭类型标记:也叫双标记

    语法:<标记>内容</标记>

    注意:封闭标记必须成对出现,在结束标记里,先写一个/,再写标记名称如果没有在结束标记里写/,会报错

    

html5 html语法对比 html常用语法_HTML

 

    2.非封闭类型标记:也叫单标记

    语法:<标记/>  或  <标记>

    注意:非封闭标记不包含内容

二、标签

   1.html标签:定义HTML文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在他

    里面,标签限定了文档的开始点和结束点

    

html5 html语法对比 html常用语法_表单_02

   2.head标签:head标签用于定义文档 的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中

    的位置以及其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

    

html5 html语法对比 html常用语法_HTML_03

  3.body标签:body元素定义文档的主体。

             boyd元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)

        它会直接在页面中显示出来,也就是用户可以直观看到的内容

    

html5 html语法对比 html常用语法_HTML_04

 

   4.title标签: ①可定义文档的标题

           ②它显示在浏览器窗口的标题栏或状态栏上

             ③title标签是head标签中唯一必须要求包含的东西,就是说写head一定要写title

        ④title的增加有利于SEO优化,SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求

    

html5 html语法对比 html常用语法_表单_05

 

   5.meta标签:meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"是说当前使用的是

         utf-8编码格式

    

html5 html语法对比 html常用语法_HTML_06

 

 三、标题之标签

  1.标题介绍与应用:标题是通过<h1>-<h6>标签进行定义的。<h1>定义最大的标题<h6>定义最小的标题

             生成h1~h6快捷键:h$*6

    

html5 html语法对比 html常用语法_表单_07

html5 html语法对比 html常用语法_文本标签_08

  2.标题标签的位置摆放:在标签中添加属性:align="left | center | right"默认居左

    

html5 html语法对比 html常用语法_html5 html语法对比_09

 

 三、标签之段落、换行、水平线

  1.标签之段落:段落是通过<p>标签定义的

   

html5 html语法对比 html常用语法_表单_10

 

   2.换行:<br>换行标签,<br>是一个单标签

  

html5 html语法对比 html常用语法_表单_11

  3.水平线:<hr/>标签在HTML页面中创建水平线

  

html5 html语法对比 html常用语法_表单_12

  ·属性:color:设置水平线的颜色、width:设置水平线的长度、size:设置水平线的高度、align:设置水平线的对齐方式,默认居中

 四、标签之图片

  1.<img>标签定义HTML页面中的图像,<img>是单标签,不需要进行闭合操作

  

html5 html语法对比 html常用语法_HTML_13

  2.属性:src:图片路径、alt:规定图像的代替文本、width:规定图像的宽度、height:规定图像的高度、title:鼠标悬停在图片上给予提示

五、标签之超文本链接

  1.HTML使用标签<a>来设置超文本链接,可以跳转到新的文档或者当前文档中的某个部分

  

html5 html语法对比 html常用语法_html5 html语法对比_14

 

   2.超链接的属性:在标签<a>中使用了href属性来描述链接的地址,默认情况下,链接将以一下形式出现在浏览器中:

    ①一个未访问过的链接显示为蓝色字体并带有下划线。

    ②访问过的链接显示为紫色并带有下划线

    ③点击链接时,链接显示为红色并带有下划线

    ④后期CSS样式修改掉这些效果

六、标签之文本

  1.常用文本标签:常用文本标签和段落是不同的,段落代表一段文字,而文本标签一般表示文本词汇 

  

html5 html语法对比 html常用语法_html5 html语法对比_15

 

 七、列表标签之有序列表

  1.有序列表是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li> 

  

html5 html语法对比 html常用语法_html5 html语法对比_16

  

html5 html语法对比 html常用语法_HTML_17

  2.<ol>的属性type拥有的选项

  ①1  表示列表项目用数字标号(1,2,3...)

  ②a  表示列表项目用小写字母标号(a,b,c...)

  ③A  表示列表项目用大写字母标号(A,B,C...)

  ④i  表示列表项目用小写罗马数字标号(i,ii,iii...)

  ⑤I  表示列表项目用大写罗马数字标号(I,II,III...)

  

html5 html语法对比 html常用语法_表单_18

  3.有序列表是可以进行嵌套的

  

html5 html语法对比 html常用语法_文本标签_19

 

 八、列表标签之无序列表

   1.无序列表是一个项目的列表,此列项目使用粗体圆点进行标记,无序列表始于<ur>标签,每个列表项始于<li> 标签  

   

html5 html语法对比 html常用语法_表单_20

 

   2.<ul>的属性type拥有的选项

    ①disc默认实心圆

    ②circle空心圆

    ③square小方块

    ④none不显示

  3.无序列表也是可以嵌套的,而且可以和有序列表相互嵌套

九、标签之表格

  1.表格在数据展示方面非常简单,并且非常优秀,表格组成:行、列、单元格

  2.表格标签,表格:<table>,行:<tr>,单元格(列):<td>

  

html5 html语法对比 html常用语法_表单_21

 

   3.表格快捷键:table>tr*2>td*2{文本内容}

  4.表格属性:border:设置表格的边框、width:设置表格的宽度、height:设置表格的高度

  

html5 html语法对比 html常用语法_html5 html语法对比_22

 

 

 十、表格单元格合并

  水平合并与垂直合并

  

html5 html语法对比 html常用语法_HTML_23

  

html5 html语法对比 html常用语法_文本标签_24

 

 十一、form表单

  1.表单在web网页中用来给用户填写信息,从而能采取用户信息,使网页具有交互的功能

  2.所用的用户输入内容的地方都用表单来写,如登录注册,搜索框等

  3.表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框、按钮等。

   这些输入框、按钮叫做控件,表单就是容器,它能容纳各种各样的空间

   

html5 html语法对比 html常用语法_表单_25

 

 

   4.表单元素:一个完整的表单包含三个基本组成部分:表单标签、表单域(输入框)、表单按钮

  

html5 html语法对比 html常用语法_表单_26

 

 

 十二、表单元素

  

html5 html语法对比 html常用语法_html5 html语法对比_27

  

html5 html语法对比 html常用语法_HTML_28

 

 

 十三、块元素与行内元素(内联元素)

  1.内联元素和块元素的区别:

  

html5 html语法对比 html常用语法_文本标签_29

 

  2.常见的块级元素:div、form、h1~h6、hr、p、table、ul、等

  3.常见内联元素:a、b、em、i、span、strong、等

  4.行内块级元素(特点:不换行、能够识别宽高):button、img、input、等

十四、H5新增标签

        1.<header></header>头部

        2.<nav></nav>导航栏

        3.<section></section>定义文档中的内容,比如章节、页眉、页脚

        4.<aside></aside>侧边栏

        5.<footer></footer>脚步

        6.<article></article>代表一个独立的,完整的相关内容块。例如一遍博客文章