一、基本概念
1.超文本标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
2.超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容
3.HTML 文档 = 网页,HTML 文档包含 HTML 标签和纯文本
4.HTML 不是一种编程语言,而是一种标记语言 (markup language),标记语言是一套标记标签
5.适用于大多数 HTML 元素的属性: class,id,style,title
二、HTML5常用标签分类
1.HTML文档标签
1)<!DOCTYPE> 定义文档类型
2)<html> 定义HTML文档.
3)<head> 定义文档的头部.(头部内包含)
(1) <meta> 定义元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词
(2) <base> 定义页面上的所有链接规定默认地址或默认目标
(3) <title> 定义文档的标题
(4) <link> 定义文档与外部资源的关系
(5) <style> 定义 HTML 文档样式信息
4) <body> 定义文档的主体.(脚本在非必须情况时在主体内容最后)
(1) <script> 定义客户端脚本,比如 JavaScript
(2) <noscript> 定义在脚本未被执行时的替代内容.(文本)
2.布局标签&语义化
1) <div> 定义块级元素
2) <span> 定义行内元素
3)<header>5 定义区段或页面的页眉.(头部)
4)<footer>5 定义区段或页面的页脚.(足部)
5)<section>5 定义文档中的区段
6) <article>5 定义文章
7) <aside>5 定义页面内容之外的内容
8)<details>5 定义元素的细节
9)<summary>5 定义 <details> 元素可见的标题
10)<dialog>5 定义对话框或窗口
3.表格标签
(1)<table> 定义表格.
(2)<thead> 定义页眉.
(3)<tbody> 定义主体.
(4)<tfoot> 定义页脚.
(5)<caption> 定义标题.
(6)<th> 定义表头.
(7)<tr> 定义一行.
(8)<td> 定义单元格.
4.表单标签
(1)<form> 定义表单.(表单包含在form标签中)
(2)<input> 定义输入域.
(3)<textarea> 定义文本域.(多行)
(4)<label> 定义一个控制的标签.(input 元素的标注)
(5)<fieldset> 定义域.
(6)<legend> 定义域的标题.
(7)<select> 定义一个选择列表.
(8)<optgroup> 定义选择组.
(9)<option> 定义下拉 列表的选项.
(10)<button> 定义按钮.(定义围绕表单中元素的边框.)
(11)<fieldset> 定义围绕表单中元素的边框.
(12)<legend> 定义 fieldset 元素的标题.
(13)<fieldset>5 定义选项列表.与input 元素配合使用该元素,来定义 input 可能的值.
(14)<keygen>5 定义表单的密钥对生成器字段.
(15)<output>5 定义不同类型的输出,比如脚本的输出.
5.列表标签
(1)<ul> 定义无序列表.
(2)<ol> 定义有序列表.
(3)<li> 定义列表项.
(4)<dl> 定义自定义列表.
(5)<dt> 定义自定义列表项.
(6)<dd> 定义自定义的描述.
6.图像&链接标签
(1)<img> 定义图像.注意加上alt属性
(2)<a> 定义超链接.
(3)<map> 定义图像映射。
(4)<area> 定义图像地图内部的区域.
(5)<figure>5 定义媒介内容的分组.
(6)<figcaption>5 定义 <figure> 元素的标题.
7.音频/视频
(1)<audio>5 定义声音内容.
(2)<source>5 定义媒介源.
(3)<track>5 定义用在媒体播放器中的文本轨道.
(4)<video>5 定义视频.
8.框架标签
1)<iframe> 内联框架.
9.格式标签
1)文章标签
(1)<h1>-<h6> 定义 HTML 标题.
(2)<p> 定义段落.
(3)<br> 定义换行.
(4)<hr> 定义水平线.
(5)<bdo> 定义文字方向.
(6)<pre> 定义预格式文本.
(7)<abbr> 定义缩写.
(8)<address> 定义文档作者或拥有者的联系信息.
(9)<ins> 定义被插入文本.
(10)<del> 定义被删除文本.
(11)<time> 定义日期/时间.
2)短语元素标签
(1)<em> 定义强调文本.
(2)<strong> 定义语气更为强烈的强调文本.
(3)<dfn> 定义定义项目.
(4)<code> 定义计算机代码文本.
(5)<samp> 定义计算机代码样本.
(6)<kbd> 定义键盘文本.
(7)<var> 定义文本的变量部分.
(8)<sup> 定义上标文本.
(9)<sub> 定义下标文本.
(10)<cite> 定义引用.
(11)<blockguote> 定义长的引用.
(12)<q> 定义短的引用.
3)字体样式标签
(1)<i> 显示斜体文本效果.
(2)<b> 呈现粗体文本效果.
(3)<big> 呈现大号字体效果.
(4)<small> 呈现小号字体效果.
(5)<mark>5 定义有记号的文本.
10.其他标签
(1)<canvas>5 定义图形容器,必须使用脚本来绘制图形。
(2)<meter>5 定义预定义范围内的度量.
(3)<progress>5 定义任何类型的任务的进度.
三、HTML中标签元素三种不同类型
1.HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素
2.块级元素(display:block)
1)特点
(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行
(2)元素的高度、宽度、行高以及顶和底边距都可设置
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度
(4)它可以容纳内联(行内)元素和其他块元素
2)常用的块状元素:<div> <p> <h1>.....<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
3.行内元素(display:inline)
1)特点
(1)和其他元素都在一行上
(2)元素的高度、宽度及顶部和底部边距不可设置
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变
(4)行内元素只能容纳文本或者其他行内元素
2)常用的行内元素:<a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var>
4.行内块状元素(display:inline-block)
1)特点
(1)和其他元素都在一行上
(2)元素的高度、宽度、行高以及顶和底边距都可设置
2)常用的行内块状元素:<img> <input>
四、HTML与HTML5的区别
参考网址
注:文章是经过参考其他的文章然后自己整理出来的,有可能是小部分参考,也有可能是大部分参考,但绝对不是直接转载,觉得侵权了我会删,我只是把这个用于自己的笔记,顺便整理下知识的同时,能帮到一部分人。
ps : 有错误的还望各位大佬指正,小弟不胜感激