目录
HTML概述
1.HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
2.HTML标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
3.HTML文档
- HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
- 谁来解析并显示HTML文档？浏览器，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
4.Web浏览器有哪些？
- IE
- Chrome（360极速、世界之窗、QQ浏览器、傲游、UC……)
- Opera
- FireFox
- Safari
5.浏览器解析原则
- 浏览器认识的标签就解析为对应的网页效果
- 浏览器不认识的标签直接忽略
- <input>
- <table>
HTML基本结构
1.HTML网页的基本结构
- <html>与</html>，HTML文档根标记
- <head>与</head>，定义文档的各种属性和信息
- <body>与</body> ，定义HTML可见的页面内容
2.HTML 标签语法
- HTML 标签以开始标签起始
- HTML 标签以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 标签具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 标签可拥有属性
- HTML标签对大小写不敏感：<P> 等同于 <p>
3.HTML元素结构
A.<标签名 属性名="属性值">标签体</标签名>
- 可以有0个、1个或多个属性，始终为属性值加引号
- 可以没有标签体，没有标签体时可简写成<标签名 属性名="属性值"/>
- 比如：，<body bgcolor="red"></body>
- 标签属性可查阅帮助文档
B.常用属性
|
属性 |
值 |
描述 |
|
class |
classname |
规定元素的类名（classname） |
|
id |
id |
规定元素的唯一 id |
|
style |
style_definition |
规定元素的行内样式（inline style） |
|
title |
text |
规定元素的额外信息（可在工具提示中显示） |
HTML简单标记
简单标签
1. <h1> - <h6>
- <h1> 定义最大的标题。
- <h6> 定义最小的标题。
- 浏览器会自动地在标题的前后添加空行。
- 标题很重要,搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
2.<hr/>
水平线 hr 元素可用于分隔内容。
- 水平分隔线（horizontal rule）
- 可以在视觉上将文档分隔成各个部分
3.<p>
段落
- <p> 是块级元素，
- 浏览器会自动地在段落的前后添加空行。
4.<br/>
换行
- 如果希望在不产生一个新段落的情况下进行换行（新行），
- 使用 <br /> 标签 <br /> 元素是一个空的 HTML 元素
5.<a>
- HTML 使用超级链接与网络上的另一个文档相连。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像
- 通过使用 <a> 标签在 HTML 中创建链接
- 有两种使用 <a> 标签的方式： 通过使用 href 属性 - 创建指向另一个文档的链接 通过使用 name 属性 - 创建文档内的书签
<a>语法：
- <a href="url">Link text</a>， href 属性规定链接的目标。 开始标签和结束标签之间的文字被作为超级链接来显示。 示例： <a href="http://www.baidu.com/">Visit Baidu</a>
- 其他属性， target：打开新页面 ，name：在页面中定义锚点名称， title：提示信息
- target： target="_blank"， 示例 ：<a href="http://www.baidu.com/" target="_blank">Baidu</a>
- 定位到本页面某个地方，在定位处先定位锚点 ：<a name="C4">Chapter 4</a></h2> 。通过href属性跳转到锚点处： <a href="#C4">查看 Chapter 4</a>
6.<img>
- 显示图像
- <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
- src属性用于指定图像
<img>常用属性
- src 图片
- alt 图片不存在时，用文字代替
- width 图片宽度
- height 图片高度
- border 图片边框粗细