1. HTML常识
1.1 HTML常用英文
target 目标
contents 内容
markup tag 标记标签
paragraph 段落标签<p>
1.2 浏览器内核
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome/Opera | Blink | chrome/opera浏览器内核。Blink其实是Webkit的分支 |
目前国内一般浏览器都会采用Webkit/Blink内核、如360、UC、QQ、搜狗等。
1.3 Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准集合。W3C（万维网联盟）是国籍最著名的标准化组织。
1.3.1Web标准的构成
主要包括结构（Structure）、==表现（Presentation）和行为（Behavior）==三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类、现阶段主要学习的是HTML。 |
| 表现 | 表现用于设置网页元素的板式、颜色、大小等外观样式、主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写、现阶段主要学的是javaScript |
Web标准提出的最佳体验方案：结构、样式、行为相分离
简单理解：结构写到HTML文件中、表现写到CSS文件中、行为写到JavaScript文件中
目录Contents
◆ HTML语法规范
◆ HTML基本结构标签
◆ 开发工具
◆ HTML常用标签
◆ HTML中注释和特殊字符
2. HTML语法规范
2.1 基本语法概述
- HTML标签是由尖括号包围的关键字，例如< html>
- HTML标签通常是成对出现的、例如<html></html>、我们成为双标签。标签对中的标签是开始标签、第二个是结束标签。
- 有些特殊的标签必须是单个标签（极少情况）、例如<br />、我们称为单标签。
2.2 标签关系
- 双标签关系可以分为两类：包含关系和并列关系。
3. HTML基本结构标签
3.1第一个HTML
骨架标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称为跟标签 |
| <head></head> | 文档头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主题 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
文档类型的声明
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是：当前页面采取的是HTML5版本来显示网页
- <!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
- <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
lang="zh-CN"用来定义当前文档显示的语言。
- en英语
- fr法语
- japanese日语
charset=“utf-8” 字符集
- 字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
- 在<head>标签内。可以通过<mete>标签的charset属性来规定HTML文档应该使用哪种字符编码。
HTML常用标签
<p> 标签自动分段
文本格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong >< 或者b></b > | 更推荐使用<strong >标签加粗 语义更强烈 |
| 倾斜 | < em></em >或者< i></ i> | 更推荐使用<em>标签加粗 语义更强烈 |
| 删除线 | <del ></del >或者<s></s > | 更推荐使用<del>标签加粗 语义更强烈 |
| 下划线 | <ins ></ins >或者<u ></u > | 更推荐使用<ins>标签加粗 语义更强烈 |
<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
<div>是division的缩写，表示分割，分区。span意为跨度、跨距。
特点：
- <div>标签用来布局，但是现在一行只能放一个<div>。大盒子
- <span>标签用来布局，一行可以多个<span>。小盒子
图像标签和路径（重点）
1. 图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src=“图像URL”/>
单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。所谓属性：简单理解就是属于该图像标签的特性。
2. 图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示时的文字 |
| title | 文本 | 提示文本。鼠标放到图片上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
① 图像标签可以拥有多个属性，必须卸载标签名的后面。
② 属性自己不放先后顺序，标签名与属性，属性与属性之间均以空格分开。
③ 属性采取键值对的个数，即key="value"的个数，属性=“属性值”。
相对路径和绝对路径
相对路径正斜杠，绝对路径反斜杠。
超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
- 链接的语法格式
<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像 </a>
单词anchor的缩写，意为:锚。
链接分类
- 外部链接，例如<a href="">百度</a<
- ;内部链接，相对路径
- 空连接“#”
- 下载链接：href=“需要下载的文件路径”
- 网页元素链接：如文本，图像，表格，音频，视频等都可以添加超链接。
锚点链接
- 锚点链接：点击链接，可以快速定位到页面中的某个位置。
扫一扫
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
