HTML: HYper Text language超文本 标记（标签）语言有多种标签组成，用来制作网页，告浏览器该如何显示页面

 

　　制作网页，控制网页、内容的显示

 

　　插入图片、音乐、视频、动画等多媒体

 

　　通过链接检索信息

 

　　使用表单获取用户信息，实现交互

 

　　W3C：world wide wed consortium万维网联盟，制定WEB技术相关表尊和规范的组织，HTML就是由W3C制定的标准

 

　　常用的两个版本：HTML4.0和HTML5.0

 

　　官网：

 

　　HTML文件的拓展名是以.html或.htm来结尾

 

　　HTML标签是由尖括号括起来的关键词，如html,通常都是成对出现的，如

 

　　以为根标签，包含：头部和主体部分

 

　　头部提供关于网页的相关信息，如标题、字符编码、文档类型、关键词等摘要信息

 

　　主体部分提供网页的具体内容，真正显示在页面中

 

　　合理的进行缩进

 

　　标签名不区分大小写，但一般习惯用小写

 

　　记事本notepad、sublime、notepad++、Dreamweaver、VScode、Webstorm等

 

　　1.新建文件（ctrl+N),然后保存（ctrl+S)，指定扩展名为.hmtl （代码无颜色提示）

 

　　2.编写HTML文件

 

　　3.在浏览器中打开文件

 

　　先保存在编写代码，否则没有颜色提示

 

　　建议创建一个文件夹，用与保存所有的网页内容，将文件夹拖拽到sublime中打开，便于管理

 

　　显示/隐藏侧边栏

 

　　：查看–>侧边栏–>显示/隐藏侧边栏

 

　　：ctrl+K再按B

 

　　显示多栏

 

　　：查看–>布局–>列数，2列

 

　　：alt+shift+2

 

　　常见浏览器：IE浏览器、Chrome谷歌（IT）工作者常用、firefox火狐、safari（苹果电脑浏览器）

 

　　浏览器的作用就是来读取html文件，并以网页的形式进行显示

 

　　浏览器不会直接显示html标签，而是使用标签来解释网页的内容

 

　　一个完整的html标签的组成：

 

　　<标签名 属性名=“属性值”>内容</标签名>

 

　　属性值要用引号引起来，一般用双引号

 

　　根据标签是否关闭，分为：关闭型、非关闭型

 

　　关闭型标签：有开始标签也有结束标签，即标签成对出现

 

　　非关闭标签：只有开始标签，没有结束标签!

 

　　根据标签中的内容是否独占一行，分为：行级标签、块级标签

 

　　块级标签：块级标签包起来的内容，独占一行

 

　　行级标签：在行内显示，可以与其它内容在同一行显示

 

　　注释在浏览器中是不会显示的，是用来标注解释html语句，但通过查看源代码的方式可以看到

 

　　语法格式:

 

　　也称为特殊字符，用于显示一些特殊符号，如：<>&空格等

 

　　语法：

 

　　在html文档的第一行，使用声明HTML文档的类型

 

　　用来告诉浏览器页面的文档类型，简单来讲，用来指定html版本的规范

 

　　目前基本上最常用的html5,

 

　　标签含义和说明br换行标签、说明：非关闭型p段落标签、说明：关闭型，块级标签、前后有明显间隔h1、h2…、h6标签标签、说明：按照h1到h6逐渐变小，块级标签、加粗显示。pre欲格式化标签、说明：保留编码时格式div分区标签、说明：常作为容器来使用，一般用于页面布局，块级标签span范围标签、说明：默认情况下没有任何效果，一般用来设置行内的特殊格式，行政标签ol，li有序列表、说明：有顺序的项目列表ui，li无序列表、说明：无序列表的项目列表di，dt，dd定义列表、说明：多术语，图片进行描述的定义列表hr水平线的标签、说明：非关闭性的标签，块级标签img含义：图像标签、说明：非关闭性标签，行级标签i含义：斜体标签、说明：italicem含义：强调的内容、说明：在浏览器中显示一般为斜体address含义：地址标签、说明：在浏览器中一般显示委斜体，块级标签b含义：加粗显示、说明：blodstrong含义：强调的内容、说明：在浏览器中显示一般为加粗del含义：删除线、说明：deleteins含义：下划线、sud含义：下标、sup上标bdo含义：设置文本方向、说明：通过属性dir=rtl right to left从右到左显示或 ltr left to rightaddr含义：设置文字缩写、说明：通过title属性设置当鼠标停留在文字上显示的提示内容small含义：相当于当前字号缩小一个字号big相当于当前字号增大一个字号

 

　　ol:ordered list li:list item 默认情况下使用阿拉伯数字，从1开始作标记，可以通过属性进行修改

 

　　type属性：设置列表前的符号标记，取值：数字（默认），字母形式(a或A)，罗马数字(i或I)

 

　　start属性：设置起始值，起始值必须是数字

 

　　ul:unordered list

 

　　li:list item

 

　　默认情况下使用实心圆作为符号标记，可以通过属性进行修改

 

　　type属性：设置列表前的符号标记，取值：disc实心圆（默认的）、circle空心圆、square正方形、 none不显示符号

 

　　dl:definition list

 

　　dt:definition title

 

　　dd:definition descripion

 

　　hr:horizontal

 

　　常用属性：

 

　　color:颜色

 

　　两种方式：

 

　　颜色名称：如red、green、blue、white、black、pink、orange等

 

　　16进制的RGB：Red、Green、Blue用法：#RRGGBB 每个颜色的取值范围是0-255,转换为16进制00-

 

　　FF

 

　　如:#FF0000红色 #00FF00绿色 #0000FF蓝色 #000000黑色 #FFFFFF白色 #CCCCCC灰色 #FF7300

 

　　桔色

 

　　size粗细，数值

 

　　width:宽度

 

　　两种写法：

 

　　像素：绝对值（固定值）

 

　　百分比：相对值，相对于该标签所在的上一级父容器的宽度的百分比

 

　　align对齐

 

　　取值：center默认 left right

 

　　img:image

 

　　常见的图片格式：.jpg .png .gif .bmp

 

　　常见属性：

 

　　src:source指定图片的路径（来源），必选参数

 

　　如果图片与html源码在同一个文件夹中，可以直接书写图片的名称

 

　　习惯上，会将多个图片存放到一个单独的文件夹中，如project\image,此时，需要在图片名称的前面添加路

 

　　径

 

　　相对路径

 

　　表示： 当前路径

 

　　…/当前位置的上一级文件

 

　　提示：…/image

 

　　alt:当图片无法正常显示时提示的信息

 

　　title:当鼠标停留在图片上时显示的提示信息

 

　　width/height:设置图片的宽度和高度

 

　　1| 默认情况下原始尺寸显示

 

　　如果只设置其中一个，则另一个按比例自动缩放

 

　　如果同时设置宽和高，可能会导致图片变形

 

　　两种写法：

 

　　像素：绝对值（固定值）

 

　　百分比，相对值，相对该标签所在的上一级父容器的宽度的百分比