HTML基础知识点总结

从这篇笔记开始总结看过的《从0到1 HTML+CSS+JavaScript》书籍笔记，记录HTML以及CSS的相关知识点，为之后从事相关工作打好基础
简单介绍
基本标签
文本
列表
表格

一.简单介绍

HTML：超文本标记语言，HTML是一门描述性的标记语言
CSS：层叠样式表，用来控制网页外观的一种技术
JavaScript: 嵌入到HTML页面的脚本语言，由浏览器一边解释一边执行
HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为

1.1HTML

① 概念：超文本标记语言，是网页的标准语言，并不是一门编程语言，而是一门描述性的标记语言

② 语法：<标签符>内容</标签符>

③ 说明：标签符一般都是成对出现的，包含一个“开始标签”和一个“结束标签”

④ 学习HTML就是学习各种标签，搭建网页的骨架

二.基本标签

2.1 HTML结构

1. 基本结构

<!DOCTYPE html>:文档声明，表明这是一个html页面
<html></html> : 告诉浏览器，这个页面是从<html>这个标签开始，然后到</html>这个标签结束
<head></head> ：网页的头部，用于定义一些特殊的内容，比如页面标题，定时刷新，外部文件等
<body></body>: 网页的身体

2. head标签

只有6个标签可以放到head中，title标签，meta标签，link标签，style标签，script标签，base标签

① title标签：定义网页的标题

② meta标签：定义页面的特殊信息，比如页面关键字，描述等，不是提供给用户看的，而是提供给搜索引擎蜘蛛看的，meta的作用就是告诉“搜索蜘蛛”这个页面是做什么的

name属性

（1）name属性的取值

属性值	说明
keywords	网页的关键字，可以是多个
description	网页的描述
author	网页的作者
copyright	版权信息

（2）name属性的语法

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http-equiv属性

作用1：定义网页所使用的编码

语法：

<meta http-equiv="Contentype-Type" content="text/html; charset=utf-8">

在HTML5中的简写形式，必须放在title标签以及其他meta标签前面
<meta charset="utf-8">

作用2：定义网页自动刷新跳转

语法：

<meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com">

含义：表示当前页面6秒后会自动跳转到url指向的这个页面，很多小广告就是这种方式实现定时跳转的

③ style标签

定义元素的CSS样式
语法

<html>
<head>
    <style>
        /* 这里写CSS样式 */
    </style>
</head>
<body>
</body>
</html>

④ script标签

定义页面的JavaScript代码，也可以引入外部的JavaScript文件
语法

<html>
<head>
</head>
<body>
  <script>
      /*这里写JavaScript代码*/
  </script>
</body>
</html>

⑤ link标签

引入外部样式文件（CSS文件）
语法

<link type="text/css" rel="stylesheet" href="css/index.css">

3.body标签

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>

</html>

4.注释

三. 文本

3.1 标题标签

① 在html中，共有6个级别标签：h1, h2, h3, h4, h5, h6, h1标签的重要性最高，h6标签的重要性最低

② 一个页面只能有一个h1标签，而h2到h6可以有多个

③ title和h1标签的区别

title标签是用于显示地址栏的标题
h1标签是显示文章的标题

3.2 段落标签

① <p></p> ：段落标签，用来显示一段文字，段落标签会自动换黄，并且段落和段落之间有一定的间距

②<br/>: 换行标签，对文字进行换行处理，br标签是自闭和标签

3.3 文本标签

作用：对文字进行修饰，比如粗体，斜体，上标，下标(下面红色标签需要重点掌握)

① 粗体标签： <strong></strong> 或 <b></b>，尽量使用strong标签，更加具有语义化

② 斜体标签：<i></i> <em></em> <cite></cite>, 尽量使用em标签，语义化更好

③ 上标标签：<sup></sup>标签，比如表示平方，次方等,把数字或某些文字放到这个标签中，就可以变成上标

④ 下标标签：<sub></sub>,比如表示一些化学物质，硫酸分子等

⑤ 中划线标签：<s></s>标签，也成为删除线，常用于商品促销的标价

⑥ 下划线标签：<u></u>, 实现文本的下划线效果

⑦ 大字号标签和小字号标签：<big></big> <small></small>

3.4 水平线标签

① hr标签实现水平线效果

3.5 div标签

div标签来划分HTML结构，配合CSS来整体控制某一块样式

3.6 自闭合标签

一般标签：有开始符号和结束符号，可以在内部插入其他标签或文字
自闭合标签：只有开始符号没有结束符号，不可以在内部插入其他标签或文字

标签	说明
<meta/>	定义网页的信息（供搜索引擎查看）
<link/>	引入“外部CSS文件”
<br/>	换行标签
<hr/>	水平线标签
<img/>	图片标签
<input/>	表单标签

3.7 块元素和行内元素

① 块元素

在浏览器显示状态下将独占一整行，排斥其他元素与它在同一行
一般情况下，块元素内部可以容纳其他块元素和行内元素

② 行内元素

行内元素只能容纳其他行内元素，不可以容纳块元素

3.8 特殊符号

① 空格：  

② 特殊符号：以&开头，以;结尾，需要通过代码实现（本书42页可以查阅）

四.列表

列表分为三种：有序列表，无需列表，定义列表

有序列表：列表项有先后之分
无序列表：列表项之间没有先后顺序之分
定义列表：一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分

4.1 有序列表

① 有序列表中各个列表项是有顺序的

② 语法：

<ol>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
</ol>

③ ol表示有序列表，li表示列表项，一个有序列表可以包含多个列表项

④ ol的子标签只能是li标签，不能是其他标签

⑤ type属性

语法：

<ol type="属性值">
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
</ol>

type属性的取值：

属性值	列表项符号
1	阿拉伯数字：1 2 3 4
a	小写英文字母：a, b, c, ...
A	大写英文字母：A，B, C...
i	小写罗马数字：i, ii, iii...
I	小写罗马数字：I， II， III...

4.2 无序列表

① 无序列表的列表项是没有顺序的

② 语法

<ul type="属性值">
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
</ul>

③ ul 无序列表，li 列表项

④ ul和li标签需要配合一起使用，不可以单独使用，ul标签的子标签只能是li标签，不能是其他标签

⑤ ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加

⑥ type属性

语法：

<ul type="属性值">
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
</ul>

取值：

属性值	列表符号
disc	实心圆
circle	空心圆
square	正方形

4.3 定义列表

① 定义列表由两部分组成：名词和描述

② 语法

<dl>
    <dt>添加要解释的名词</dt>
    <dd>添加该名词的具体解释</dd>
</dl>

③ dl 定义列表，dt 定义名词， dd定义描述

五.标签语义化

目的：不是为了记住所有标签，而是在你需要的地方能使用正确的语义化标签，学会把标签用在对的地方

六.表格

6.1 表格基本结构

① 表格的组成部分

表格：table标签
行：tr标签
单元格：td标签

② 语法：

  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

③ 说明

tr表示行，td表示表格单元格
有多少组tr，就有多少行

6.2 表格完整结构

① caption 表格标题：一个表格只能有一个标题，默认情况下，标题位于整个表格第一行

② 默认情况下表格是没有边框的

③ 表头单元格 th:

单元格有两种，表头单元格（th）和表格单元格(td)
浏览器会以“粗体”和“居中” 来显示th标签的内容，td不会
th用于表头，td用于表行

6.3 语义化

HTML引入了thead, tbody, tfoot三个标签，把表格划分成三部分，表头，表身，表脚

使代码更加语义化，方便用分块控制表格CSS的样式

6.4 合并行

① rowspan 属性来合并行：纵向合并n个单元格

② 语法： <td rowspan="跨域的行数"></td>

6.5 合并列

① colspan属性来合并列: 横向的N个单元格

② 语法：<td colspan="跨域的行数"></td>

七.图片

7.1 图片标签

① 图片标签用来显示一张图

② <img src="" alt="" title="" />

1. src属性

① 用于指定这个图片所在的路径，路径可以是相对路径，也可以是绝对路径

② 语法：<img src="img/picture.png">

③ 任何一张图必须指定src属性才可以显示，src属性是img不可缺少的属性

2. alt属性和title属性

alt属性用于图片描述，这个描述文字是给搜索引擎看的，当图片无法展示时，页面会显示alt 中指定的文字
tiltle属性用于图片描述，这个描述文字是给用户看的，当鼠标指针移到图片上时，会显示title中的文字

7.2 图片路径

① 绝对路径：图片在计算机中的完整路径

② 相对路径：图片相对当前页面的为止

③ 在实际开发中，不管是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径

③ 在使用图片时，建议图片名或者文件夹名都使用英文名

7.3 图片格式

① 位图

又称为像素图，它是由像素点组成的图片，放大图片后，图片会失真
缩小图片后，图片同样也会失真
最常见的位图格式 jpg, png, gif
jpg格式可以很好的处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片，高清，图片等，jpg格式的图片体积比较大，不支持保存透明背景
png格式是一种无损格式，可以无损压缩以保证页面打开速度，png格式的图片体积较小，并支持保存透明背景，不过不适合存储颜色丰富的图片
gif格式的图片效果最差，不过它适合制作动画
如果想要展示颜色丰富的高质量图片，就使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png图片，如果是动画图片，可以使用gif格式

② 矢量图

又称为向量图，以一种数学描述的方式来记录内容的图片格式
优点是无论图片放大，缩小或者旋转都不会失真
最大缺点就是难以表现色彩丰富的图片
常见格式：.ai .cdr .fh .swf swf的格式比较常见，它指的是flash动画

③ 矢量图和位图的区别

位图适用于展示色彩丰富的图片，矢量图不适合展示色彩丰富的图片
位图的组成单位“像素”，矢量图的组成单位是“数学向量”
位图受分辨率影响，当图片放大时会失真，而矢量图不受分辨率影响，图片放大时不会失真
网页中的图片绝大多数都是位图，而不是矢量图

八. 超链接

1.超链接简介

超链接能够在各个独立的页面之间方便地跳转

① a标签

语法： <a href="链接地址">文本或图片</a>
href: 表示你想要跳转到的页面的路径，可以是相对路径，也可以是绝对路径
将文本设置成超链接称为“文本超链接”，将图片设置为超链接称为“图片超链接”
不管是哪种超链接，都是把文字或者图片放到a标签内部来实现的

② target属性

用来定义超链接打开窗口的方式
语法：<a href="链接地址" target="打开方式">文本或图片</a>
target的属性取值

属性值	说明
_self	在原来窗口打开链接（默认值）
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

2.内部链接

① 外部链接：“外部网站”的页面

② 内部链接：自身网站的网页

3.锚点链接

① 锚点链接：内部链接的一种，链接地址指向的是当前页面的某个部分

② 单击某一个超链接，就会跳到当前页面的某一部分

③ 实现方式

目标元素的id
a标签的href指向该id
给a标签的href属性赋值时，需要在id前面加上"#", 用来表示这是一个锚点链接

<a href="#article">推荐文章</a>
<a href="#music">推荐音乐</a>

<div id="music">
   <h3>推荐音乐</h3>
   <ul>
   <li>歌曲1</li>
   <li>歌曲2</li>
   <li>歌曲3</li>
   </ul>
</div>

九.表单

9.1 简单介绍

① 表单的主要作用：在浏览器端收集用户信息，将数据交给服务器来处理

② 表单标签：form input textarea select option

③ 外观：

单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

9.2 form标签

① 将所有表单标签放在form标签内部

② form标签属性

属性	说明
name	表单名称
method	提交方式
action	提交方式
target	打开方式
enctype	编码方式

name属性

作用：为了区分页面中的表单，可以使用name属性给表单命名

<form name="myForm"></form>

method属性

作用：用于指定表单数据使用哪一种http提交方法，一种是get; 一种是post, get的安全性较差，post的安全性较好，大多数情况下使用post

<form method="post"></form>

action 属性

作用：指定表单数据提交到哪个地址进行处理

<form action="index.php"></form>

target属性

作用：指定窗口的打开方式，与a标签的target属性值是一样的，一般情况下只会用到_blank这一个属性

<form target="_blank">

enctype属性

作用：指定表单数据提交的编码方式，一般情况下，不需要设置，除非用到上传文件功能

9.3 Input标签

① input 是自闭合标签，没有结束符号

<input type="表单类型"/>

② type的属性值

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button submit reset	按钮
file	文件上传

9.4 单行文本框

语法： <input type="text" value="hello">

属性：

属性	说明
value	设置单行文本框的默认值，在默认情况下单行文本框显示的文字,如果没有设置，文本框就是空白的
size	设置单行文本框长度，一般不会使用，都是使用css属性控制
maxlength	设置单行文本框中最多可以输入的字符数

9.5 密码文本框

① 在密码文本框中输入的字符不可见

② 语法： <input type="password">

③ 密码文本框属性

属性	说明
value	设置密码文本框的默认值，在默认情况下密码文本框显示的文字,如果没有设置，文本框就是空白的
size	设置密码文本框长度，一般不会使用，都是使用css属性控制
maxlength	设置密码文本框中最多可以输入的字符数

9.6 单选框

① 单选框是使用input标签来实现的，type属性值为"radio"

② 语法：<input type="radio" name="组名" value="取值">

③ name属性表示单选按钮所在的组名，value属性表示单选按钮的取值，这两个属性必须设置

④ 举例

  <input type="radio" name="gender" value="男">男
  <input type="radio" name="gender" value="女">女

⑤ 对于这一组单选按钮，只能选中其中一项，不能同时选中两项

⑥ 默认让一个选中：使用checked属性，没有属性值是因为采用的是简写形式

  <input type="radio" name="gender" value="男" checked>男
  <input type="radio" name="gender" value="女">女

⑦ 对于同一组的单选框，name的值必须相同

9.7 复选框

① type的属性为checkbox

② 复选框可以选择多项

③ 语法：<input type="checkbox" name="组名" value="取值">

④ name属性表示复选框所在的组名，value属性表示复选框的取值，这两个属性都必须要设置

⑤ 让复选框选中也可以使用checked属性来实现

9.8 按钮

常见按钮：普通按钮（button）提交按钮（submit）重置按钮（reset）

value 就是按钮上的文字

① 普通按钮：<input type="button" value="取值"/>

② 提交按钮：<input type="submit" value="取值"/>

③ 重置按钮：<input type="reset" value="取值"/>

点击重置按钮之后，表单中的内容被清空了，但是重置按钮只能清空它 “所在form标签” 内表单的内容，对于当前所在form之外的表单清除是无效的

④ 三种按钮的区别

普通按钮一般情况都是配合JavaScript来进行各种操作的
提交按钮一般都是用来给服务器提交数据的
重置按钮一般是用来清空用户在表单中输入的数据的

button标签 <button></button>

9.9 文件

① 通过input标签来实现，type的属性取值为file

<input type="file">

9.10 多行文本框

① 多行文本框可以输入多行文字，多行文本框使用的是textarea标签

② 语法：

<textarea rows="行数" cols="列数" value="取值">默认文本<textarea>

③ 多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的

9.11 下拉列表

① 使用select和option两个标签来配合使用

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

② select标签属性

multiple 设置下拉列表可以选择多项，使用ctrl + 鼠标左键来进行选取
size 设置下拉列表显示几个列表项，取值为整数

<select multiple>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

③ option标签属性

selected: 是否选中
value: 选项值

<select multiple>
    <option selected>选项内容</option>
    <option value="选项值">选项内容</option>
</select>

十.框架

① iframe标签：实现一个内嵌框架，内嵌框架是指在当前页面再嵌入另外一个网页

② 语法：<iframe src="链接地址" width="数值" height="数值"></iframe>

③ src是必选的，用于定义链接页面的地址，width和height这两个属性是可选的，分别用于定义框架的高度和宽度

④ 也可以同时嵌入多个页面