本文已参与「新人创作礼」活动，一起开启掘金创作之路。 ​

HTML简介

什么是HTML？

HTML是超文本标记语言，用来描述网页的一种语言，它不是编程语言而是标记语言，标记语言是一套标记标签。

什么是超文本？

1.可以假如图片，声音，动画，多媒体等内容（超越了文本限制）

2.可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

网页的形成

前端人员开发代码->浏览器显示代码（解析，渲染）->生成web页面

浏览器之所以能够解析和渲染，是因为不同的浏览器有其浏览器内核（渲染引擎）。

​编辑

web标准

web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。

为什么需要web标准？

 浏览器不同，显示页面或排版就会有差异。比如不同浏览器的默认字体就会不同。如果没有标准，程序员就需要针对不同浏览器开发不同的代码。

​编辑

web标准的构成

​编辑

标签简介

 大致有以下几个种类

布局：

文本：

图像：

各种组件：

        超链接

        表单

        表格

        列表

初始化的标签

​编辑

文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。这句话的意思是告诉浏览器用HTML5来解析网页。这不是HTML标签，因为不在HTML标签里面，它是文档类型声明标签。

lang属性

定义当前文档显示的语言，en是英语，zh-CN是中文，fr是法文。这个属性是告诉浏览器的翻译功能是否检查翻译的，不管选什么值，页面中都可以显示任何内容。

charset属性

指定字符集，指定当前页面中的字符编码后属于某个字符集中的编码。

有关文字的标签 

1.标题标签

标签：

....

全写：head

特点：一个标题独占一行

2.段落标签

标签：

 

全写：paragraph

特点：1.段落会根据浏览器窗口的大小自动换行。2.段落和段落之间有间隙，不是单纯的换行。

其他修饰标签

换行

标签:

全写：break

特点：1.换行。2.不像段落那样中间有空隙。

加粗

标签：和

全写：strong和bold

特点：

倾斜

标签：和

全写：emphasize和italic

特点：

删除线

标签：和

全写：delete和strikethrough

特点：

下划线

标签：和

全写：Inserted和underlined   插入的文本和被划线的

特点：

有关布局的标签

盒子

标签：

全写：division  分割 分区

作用：没有语义，像一个盒子，用来装内容 ，是一个大盒子，一行只能放一个div

标签：

全写：span  跨度，跨距

作用：装内容，小盒子，一行可以放多个。

有关图像的标签

属性：

1.src        source        图片的路径。

2.alt        alter 替用        替换文本，当图片不能显示时显示该文字。

3.title        当鼠标放到图片上时显示的文字。

4.width        

5.height

6.border        设置图像的边框粗细        单位像素

注意：width和height一般只设置一个值，当设置一个时，另一个会等比例放大或者缩小。

路径问题

相对路径

相对于HTML文件的位置

​编辑

相对路径用/ 

绝对路径

1.从盘符开始定位。位于电脑的磁盘的位置。

这种方式只在个人电脑上可以，每台电脑的文件夹的路径不同。如果将项目拷贝的别的电脑上，用绝对路径显示的图片就会不适用了。

绝对路径用\

2.图片的地址也可以使用该图片的url

各种组件

超链接

标签：

全写：anchor 锚

属性：

href        Hypertext reference        跳转的目标        

target        目标窗口弹出的方式        _self在当前窗口打开，_blank在新窗口打开。

链接href的分类

外部连接：http：//这种格式

内部链接：一个文件夹中会有很多html文件，如果两个文件在同一个文件夹，可以直接通过文件名填写路径。

空链接：当没有确定链接目标时，用#先代替。

下载链接：当链接是.zip或.exe等时，点击这个超链接浏览器就会下载这个文件。

应用

1.可以在a标签中写img中标签，点击图片可以实现跳转。

2.可以快速定位到页面中的某个位置。

给一个标签设置id，给超链接的href属性设置#加该id值，点击超链接就会定位到相应的标签。

表格

表格不是用来布局的，是用来展示数据。会使数据展示的很清晰。 

标签:

                                       

全写:tableRow        tableDataCell        tableHead

thead定义表格头部，放在表格第一行，tbody定义表格主体。只是为了让表格看起来结构更加清晰。

表格的属性-HTML标签的表格属性不常用，通常用css来设置

​编辑

 也可以设置height，同样设置一个的话另一个会等比例放大或缩小。

合并单元格

合并单元格方式：rowspan跨行合并，colspan跨列合并。

列表

无序列表

标签:

       

•        

注意:

1.ul里面只能放li，不能放其他标签，而li里面可以放任何标签。

2.列表项前面会有自带的样式，但通常会用css将这些样式去掉

有序列表

标签：

        

1.        

自定义列表

标签：DefinitionList定义列表        DefinitionTerm定义术语        DefinitionDescription定义描述

       

名词1

       

名词解释1

        

名词解释2

注意：

1.dl里面只能有dt和dd

2.dt和dd的个数没有限制经常是一个dt对应多个dd

表单

标签:

属性：

action        表单提交的服务器程序地址

method        提交方式

name        表单域的名字，可能有好几个表单，通过name区分不同的表单 

表单控件（表单元素）

input        输入表单元素

        type属性        根据type不同，输入字段有多种形式

                ​编辑

         ​编辑

         注意：

        1.radio要实现多选1，必须要有相同的name。

        2.value是input中默认显示的值。

           在text中，要是写value会默认显示在文本框中，提交到后台时value值等于框内容。

           在password中，跟text规则相同。

           radio中要设置value，因为自己没法输入，不然后台没法识别。

           checkbox也是。

        3.单选按钮和多选按钮都要有相同的name值。

        4.每个标签都需要设置name和value，以便于后台使用。

        5.checked用在radio和checkbox中，打开页面时默认选中。

        6.maxlength用来text和password中，规定输入字符的个数。

label        为input元素定义标注，绑定一个表单元素，比如将其绑定到一个单选按钮上，当点击label字体，就会选中这个单选按钮。绑定的是id，id是有唯一性的。

​编辑

select        下拉表单元素

        ​编辑

        可以在option中定义一个selected，即当前项为默认选中项。

textarea        文本域元素

        当输入内容较多时，可以使用文本域标签。

        ​编辑

其他

​编辑

​