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:[email protected]" > 邮箱邮件< /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