HTML-1

HTML文件结构的说明

· < html > < /html > 标记的含义：告诉浏览器，其中的代码用什么格式（图片，视频）来编译。

· < head > < /head > 标记的含义：告诉浏览器，网页中的汉字用什么字符集（gb2312【简体中文】,big5【繁体中文】,jis【日文】,utf-8【多国语言】)显示；不使用正确的字符集，网页会出现乱码。

· < title > < /title > 中只能是纯文本，任何标记都会原封不动的显示
HTML单边双边标记

· 双边标记

双边标记语法格式：< 标签 属性1="值1" 属性2="值2" > 内容< /标签 >

< font size="17px" color="red" face="楷体" > < /font >

· 单边标记
单边标记一般起特殊功能，常用的只有十多个，例如：< br > < hr > 语法格式：< 标签 属性1="值1" 属性2="值2" >
HTML标签编写规范

· 不区分大小写

· 标记属性可有可无

· 双边标记的内容在开始和结束标记之间，单边标记没有内容

· 标记可以相互嵌套，但一定注意嵌套顺序，外层套内层，一层套一层

· < meta http-equiv:"content-type" content="text/html;charset=utf-8" >
功能：告诉浏览器，如何翻译汉字。

· content-type:内容类型

· content：详细内容类型介绍

· text/html：网页是text格式，html是文本中的小格式。

· charset:字符集，主要控制汉字如何显示。
body常用属性

· bgcolor:网页背景色,如：< body bgcolor="" >

· background:网页背景图片地址,如：< body background="" >
HTML文本修饰标记

· < b > < /b > ：加粗

· < i > < /i > ：斜体

· < u > < /u > 下划线

· < s > < /s > 删除线

· < sup > < /sup > 上标

· < sub > < /sub > 下标

· < font > < /font > 字体标记

·

o size：文本大小，取值1-7。1< 7

o color：字体颜色

o face：字体
HTML排版标记

· < p > < /p > 表示一个段落

·

o 常用属性：align:水平对齐方式，取值：left、center、right

· < br > 换行标记

· < hr > 分割线标记

·

o 常用属性：Size：水平线粗细，单位默认像素（px）

o

§

§ color:水平线颜色

§ width:水平线的宽度

§ noshade：去掉水平线的阴影,（在HTML中，noshade是没有值的属性）。如：noshade

· < pre > 预排版标记

·

o 功能：将保留所有的空白字符

· < h1 > .......< h6 > 标题

·

o 功能：定义各种标题。

o 属性：align：水平对齐。取值：left、center、right
< div > 和< span > 标记

· < div > 是没有任何意义的标记，但是，又是使用最多的标记，< div > 一般要与CSS配合使用。< div > 是一个块元素。

· < span > 是没有任何意义的标记，但是，又是使用最多的标记，< span > 一般要与CSS配合使用。< span > 是一个行元素。

· 块元素：

·

o 块元素：一般是单独占一行，不管内容多少，总是占一行。

o 块元素有哪些：< div > < p > < h1 > < pre > 等

· 行内元素：

·

o 行内元素，不会单独占一行

o 行内元素的宽度根据内容决定。

o 多个行内元素，会排在同一行

o 行内元素有哪些：< b > < span > < font > < i > < u > < sub > < sup > 等

· 结论：在标记嵌套时，一般是块元素嵌套行内元素。
HTML字符实体

· 空格：&nsbp;代表一个半角空格。

· < ：<</font>

· > ：>

· &：&

· ￥：¥

· X：×

· /：÷
HTML项目符号

· < ul >
< li > 内容1< /li >
< li > 内容2< /li >
< /ul >

· 注意：在HTML标记中，内容应该放在最底层标记中。

· < ul > < li > 的常用属性

·

o type：项目符号的类型，取值：dis(小黑点)、circle(空心圆）、square（实心方块）
HTML编号列表（有序列表）

· < ol >
< li > 内容1< /li >
< /ol >

· < ol > < li > 的常用属性

·

o type：编号类型，取值：1、A、a、i、I、

o start：数字从第几个开始
HTML图片标记，行内标记，单边标记

· 语法格式：< img 属性="值" >

· 属性：

·

o width：图片宽度

o height：图片高度

o border：图片边框粗细

o src：图片路径（相对路径）

o align：图片的水平对齐方式，取值：left,center,right

o hspace：图片与左右文字之间的距离

o vspace：图片与上下文字之间的距离

· 注意事项

·

o 如果图片相等比例缩放，只需要width或height其中一个。

o 要想让图片实现剧中效果，可以给图片增加一个< div > 元素

o

§ < div style="text-align:center;border:1.5em solid blue" >
< p > < img src="images/01.jpg" width="300" > < /p >
< /div >

·

· align属性只能让文本剧中，不能让图片单独剧中。

· align可以实现“图片混排”效果。align=“left|right”
HTML超级链接：行内元素，不能再嵌套一个< a >

· 语法格式：< a 属性=“值” > 内容< /a >

· 常用属性

·

o href：目标文件的地址url，url可以是相对路径,也可以是绝对地址。

o target：目标文件的显示窗口

o

§ _blank：在新窗口中打开目标文件。

§ _self：在当前窗口中打开目标文件，相当于“替换”操作。

§ _parent：在父级窗口中打开目标文件。

§ _top：在最顶级窗口来打开目标文件。

§ 其中_parent、_top常用在框架网页中

o name：定义锚点链接的名称

o

§ < a name="xxxx" > 内容< /a > ：对锚点进行命名

§ < a href="#xxxx" > 内容< /a > :创建指向该锚点的链接

· 绝对地址URL

·

o 远程的绝对地址

o

§ 访问远程的文件，总是以域名、主机名开头。

§ < a href="http://sina.com.cn/" target="_blank" > 云南祥鹏航空< /a >

o 本地的绝对地址（很少使用）

o

§ 访问本地的绝对地址，是以file:///开头的绝对地址

§ < a href="file:///C:/电影/传智播客-PHP基础视频_html+css+js_video/" > 啦啦啦啦< /a >

· 相对地址RUL

·

o 当前文件和目标文件是平级关系，链接地址直接写目标文件名。

o

§ < a href="01.jpg" > 相对地址测试< /a >

o 当前文件与目标文件所在的文件夹是平级关系，先找“文件夹名”，然后再找“文件名”。

o

§ < a href="images/01.jpg" > 相对地址测试< /a >

o 目标文件位于上一层目录中，想上找一级对应的目录，再找目录中的文件。

o

§ 往上找，使用“../”

§

§ "../"代表上一级目录

§ "../../"代表上两级目录

§ < a href="../人力资源" > 上一级地址查找< /a >

· 特殊的链接

·

o 下载链接

o

§ 什么样的文件会出现下载提示？

§

§ 反过来说就是哪些文件网页可以直接执行？如：.jpg、.png、.gif、.html、.htm、.php、.txt

§ 大部分文件，浏览器是不能执行的，如：.do、.xls、.ppt、.rar、.psd......

§ < a href="01.zip" > 下载文件< /a >

o 邮箱链接

o

§ < a href=mailto:lyangye@163.com" > 邮箱邮件< /a >

o 普通空链接

o

§ < a href="#" > 普通空链接< /a >

o JS链接

o

§ < a href="javascript:window.close()" > 关闭窗口< /a >

§ firefox下如何使用window.close()关闭窗口：

§

§ about.config--dom.allow_scripts_to_close_windows 值改成true