1+X考试课程（一）HTML基础标签

认识网页

网页主要由 文字 、图像 和 超链接 等元素组成。还可以包含音频、视频以及Flash。

浏览器内核

渲染引擎	负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机（内核倾向）
JS 引擎	解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。（独立）

Web标准的好处

1.让Web的发展前景更广阔。
2.内容能被更广发的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度。

Web标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准	结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分
样式标准	表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS
行为标准	行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分

理想状态源码：.HTML .css .js

HTML初识

HTML（Hyper Text Markup Language）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML骨架格式及作用

标签	作用
HTML标签	所有HTML中标签的一个根节点
head标签	用于存放：title、meta、base、style、script、link（在head标签中必须设置title标签）
title标签	让页面拥有一个属于自己的标题
body标签	主体部分，用于存放所有的HTML标签：p,h,a,b,u,i,s,em,del,ins,strong,img

HTML标签分类

标签：放在“< >”标签符中表示某个功能的编码命令。
1.双标签

<标签名> 内容 

开始标签———结束标签，“/”：关闭符。
2.单标签（空标签）

<标签名  />

一个标签符号即可完整地描述某个功能的标签。

HTML标签关系

1.嵌套关系

2.并列关系

文档类型

位于文档最前面，向浏览器说明当前文档使用哪种HTML或XHTML标准规范。

字符集

UTF-8 ：是目前最常用的字符集编码方式，包含全世界所有国家需要用到的字符。
GB2312 ：简单中文 包括6763个汉字。
GBK：包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312。
BIG5：繁体中文、港澳台等用。

HTML标签的语义化

指标签的含义。

为什么要有语义化标签

1.方便代码的阅读和维护。

2.同时让浏览器或是网络爬虫可以很好地解析，更好分析内容。

3.更好的搜索引擎优化。

核心：合适的地方给一个最为合理的标签。

语义是否良好：当去掉CSS后，网页结构依然组织有序，并且有良好的可读性。

原则：先确定语义的HTML，再选择合适的CSS。

HTML标签

HTML和CSS是两种完全不同的语言。

标题标签

语义：作为标题使用，并且依据重要性递减。

、
、
、
、
、

基本格式：

   标题文本   

注意：h1标签重要至极，一般给Logo使用。

段落标签

  文本内容  

默认情况下，文本在一个段落中会根据浏览器窗口的大小 自动换行

水平线标签

换行标签

div、span标签

div：分隔、分区。（大盒子）
span：跨度、跨区。（小盒子）

 这是头部 
    今日价格

例：div背景色顶满格，span背景色止于长度。

文本格式化标签

标签	显示效果
、	粗体
、	斜体
、	删除线
、	下划线

后者语义更强烈，XHTML推荐使用。

图像标签

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像 不能显示 时的替换文本
title	文本	鼠标 悬停 时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像 边框 的宽度

链接标签

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开，_parent为在当前窗口中打开。

文本或图像

注意：
1.外部链接 需要添加http:// www.baidu.com

2.内部链接 直接链接内部页面名称，例< a href="index.html"> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

用户快速定位到目标内容。

“链接文本”

base标签

设置页面上的所有链接打开的地址。

注意：标签必须位于 head 元素内部。

注释标签

路径

相对路径

相对于自己的目标文件位置。

1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如。

2.图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如。

3.图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如。

绝对路径

文件在硬盘上真正存在的路径，或者完整的网络地址。

D:\web\img\logo.gif

列表标签

特点：整齐、整洁、有序。

无序列表

各个列表项之间没有顺序级别之分，为并列关系。

  
列表项1
  
列表项2
  
列表项3
  ......

注意：
1.

中只能嵌套

，直接在

标签中输入其他标签或者文字的做法是不被允许的。

2.

与

之间相当于一个容器，可以容纳所有元素。

3.无序列表会带有自己样式属性，通过CSS修改。

有序列表

有排列顺序的列表，其各个列表项按照一定的顺序排列定义。

  
列表项1
  
列表项2
  
列表项3
  ......

定义列表

对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

  
名词1
  
名词1解释1
  
名词1解释2
  ...
  
名词2
  
名词2解释1
  
名词2解释2
  ...

特殊字符

符号	说明	编码
"	双引号	"
&	and符号	&
<	小于	<
>	大于	>
	空格