本文是HTML学习笔记，介绍了HTML的基本概念、网页结构、浏览器识别的图片格式，以及常用的HTML标签，包括链接、图片、列表、表格和表单元素的使用方法，适合初学者入门。
HTML的相关知识
术语
- web 互联网
- w3c 万维网联盟，非盈利性的组织 w3.org 为互联网提供各种标准。
- XML 可扩展的标记语言：extension markup language，用于定义文档结构的。
什么是HTML
Hyper Text Markuo Language 超文本标记语言，定义网页中有什么。
HTML是w3c组织定义的语言标准：HTML是用于描述页面结构的语言。
结构：有什么东西，该东西表示什么含义？
基本网页结构
<!DOCTYPE html>
<html lang="en">
<!-- lang="en" 和下面的搜索关键字及描述是告诉搜索引擎爬虫我们的网站是关于什么内容的 -->
<head>
<!-- 字符集 万国码 -->
<meta charset="utf-8">
<!-- 把 content 属性关联到 HTTP 头部。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>网页的标题</title>
<!-- 搜索关键字及描述 -->
<meta name="description" content="这是一个你穿了就不想脱的衣服">
<meta name="keywords" content="服装">
<!-- 网页小图标 -->
<link href="favicon.ico" rel="shortcut icon">
<!-- 引入样式表 -->
<link href="css/index.css" rel="stylesheet" type="text/css">
<!-- 所有a标签都在新窗口打开 -->
<base target="_blank" />
</head>
<body>
</body>
<!-- 引入js -->
<script type="text/javascript" src="js/index.js"></script>
</html>
主流浏览器及内核
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| Firefox | Gecko |
| Google chrome | webkit/blink |
| Safari | webkit |
| Opera | presto |
网页中识别的图片格式
jpg、png、gif、webp
- webp 图片格式（大小变小，清晰度不变）
- 用js来判断是否支持.webp格式，支持就加载，不支持加载 .png、 .jpg
特殊字符设置
| 字符 | 设置 |
|---|---|
| < | < (less than) |
| > | > (great than) |
| 空格 | |
| & | & |
| © | © |
| " | " |
注释
快捷键Ctrl+/
- html 文档中的注释为：
<!-- --> - css文档中的注释为：
/* */ - js文档中的注释为：
//
常用标签
双标签
<div></div>、<span></span>容器（绑定化操作）<p></p>段落<h1></h1>—<h6></h6>，标题文字设置h1一般用于 logo、大标题， 一个页面只能有一个h1h2一般用于 副标题h3一般用于 页面中板块的标题h4一般用于 板块里的标题h5-h6一般少用 板块套板块
<a></a>超链接<b></b>、<strong></strong>加粗<u></u>、<ins></ins>下划线<i></i>、<em></em>倾斜<del></del>删除线<sup>2</sup>上标<sub>2</sub>下标
单标签
<img>图片<br>换行<meta>提供有关页面的元信息<hr />水平线，默认空心线，属性：noshade="noshade"实心线width="xx"绝对长度，不随窗口大小改变size="像素/百分比"值越大线越粗
注意：空格、回车在html中代表文本分隔符；
行级元素（display:inline;）
span、strong、em、a、del
特点：
- 内容决定元素所占位置
- 不可以通过css改变宽高
块级元素（display:block;）
div、p、ul、li、ol、form、address
特点：
- 独占一行
- 可以通过css改变宽高
行级块元素（display: inline-block;）
img
特点：
- 内容决定大小
- 可以改变宽高
元素嵌套规则
- 行内元素不能单独存在，必须嵌套在块级元素内；
- 行内元素不能嵌套块级元素；
- h1-h6、p、dt 里不能嵌套块级元素（如果p元素里嵌套块会被分割成两个p元素）
- div、li 可嵌套块级元素
注意：凡是带有inline的元素，都有文字特效（换行、空格会有被当成空格）；例：
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
解决办法：
- 把空格去掉；
- 给父级设置
font-size:0;子级再设font-size:XXpx;display：block; - 把图片设置为：
display：block;
链接(anchor 锚)
- link： 设置链接默认样式
- vlink：设置点击后链接样式
- hlink：设置鼠标悬停时链接样式
- alink：设置点击时链接样式
文字链接去掉下划线的方法：
text-decoration:none;
a标签中可以放很多东西，比如图片、文字、span等等；
图片链接
有蓝色边框（默认）
<a href="javascript:void(0)"><img src="1.jpg" /></a>
/*去掉蓝色边框的方法*/
img {
border: 0;
}
文字链接
<a href="#" target="new">文字</a>
外部链接
<a href="http://www.baidu.com" target="_blank">外部链接</a>
书签链接(锚点)
<div id="demo1"></div>
<div id="demo2"></div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
<a name="n1">锚点</a>
<a href="#n1">书签链接</a>
<!-- 其他页面跳转到锚点-->
<a href="a.html#n1">书签链接</a>
打电话
<a href="tel:138*******">给谁谁打电话</a>
发邮件
如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
下面是一个完整的实例:
最低0.47元/天 解锁文章
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
