HTML的基本知识点

一 HTML概述

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

二、基本结构

一个html文档会包含以下基本标签

html:html文档的根标签

head：头标签。用于指定html文档的一些属性。引入外部的资源

title：标题标签。

body：体标签

：html5中定义该文档是html文档

​

​

​

注意点：

html文档后缀名 .html 或者 .htm

标签可以嵌套：建议不要 你中有我，我中有你不建议的写法：

在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

html的标签不区分大小写，但是建议使用小写。

注释：

三、 常用标签

####3.1 标题

-

标题（Heading）是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

This is a heading

This is a heading

This is a heading

####3.2 段落标签可以把 HTML 文档分割为若干段落。段落是通过

标签定义的。

This is a paragraph

This is another paragraph

####3.3 换行如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签

This is
a para
graph with line breaks

注意点：
元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

####3.4 水平线

---

标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

属性：

color：颜色

width：宽度

size：高度

align：对其方式

center：居中

left：左对齐

right：右对齐

This is a paragraph

---

This is a paragraph

---

This is a paragraph

####3.5 文本格式化标签

：字体加粗

：字体斜体

属性定义：

color：

英文单词：red,green,blue

rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)

#值1值2值3：值的范围：00~FF之间。如： #FF00FF

width：

数值：width='20' ,数值的单位，默认是 px(像素)

数值%：占比相对于父元素的比例

示例：

​

This text is bold

This text is strong

This text is big

This text is italic

This text is small

####3.6 图片标签在 HTML 中，图像由 标签定义。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

属性：

src：指定图片的位置

alt  :  替换文本属性,在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

       

       

####3.7 列表标签

有序列表：

ol:

li:

无序列表：

ul:

li:

​

• Coffee
• Tea
• Milk

Coffee

Tea

Milk

Coffee

Tea

Milk

​

Coffee

Tea

Milk

Coffee

Tea

Milk

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

####3.8 链接标签

a:定义一个超链接

属性：

href：指定访问资源的URL(统一资源定位符)

target：指定打开资源的方式    * _self:默认值，在当前页面打开    * _blank：在空白页面打开

 

点我

​

点我

点我

列表标签

联系我们

####3.9 div和span

div:每一个div占满一整行。块级标签

span：文本信息在一行展示，行内标签 内联标签

###四 表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 ：表示表格的头部分

：表示表格的体部分

：表示表格的脚部分

1

杨过

：表格标题

学生表

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 table：定义表格 width：宽度 border：边框 cellpadding：定义内容和单元格的距离 cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、 bgcolor：背景色 align：对齐方式 tr：定义行 bgcolor：背景色 align：对齐方式 td：定义单元格 colspan：合并列 rowspan：合并行 th：定义表头单元格
3	小龙女	20
编号	姓名	年龄
2	小龙女	20

###五 表单

表单的作用：用来收集用户的信息的;form包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

属性：action：指定提交数据的URLmethod:指定提交方式

分类：2种比较常用

get：

请求参数会在地址栏中显示。

请求参数大小是有限制的。

不太安全。

post：

请求参数不会再地址栏中显示。

请求参数的大小没有限制。

较为安全。

####5.1 input表单元素

5.1.1 文本框

注意：placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

5.1.2 密码框

5.1.3 单选框/单选按钮

男

​

女

注意：

要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。

一般会给每一个单选框提供value属性，指定其被选中后提交的值

checked属性，可以指定默认值

5.1.4 复选框

注意：(disabled="disabled" :禁用)(checked="checked" :默认选中)

一般会给每一个单选框提供value属性，指定其被选中后提交的值

checked属性，可以指定默认值

5.1.5 提交按钮

5.1.6 重置按钮

####5.2 下拉菜单

    请选择

    选择项1

    选择项2

注意点：

子元素：option，指定列表项

size:默认显示的选项

提交表单要设置name属性

默认选择用selected属性

####5.3 多行文本框（文本域）

注意：    * cols：指定列数，每一行有多少个字符

rows：默认多少行。