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-717

o color:字体颜色

o face:字体

HTML排版标记

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

· 

o 常用属性:align:水平对齐方式,取值:leftcenterright

· br > 换行标记

· hr > 分割线标记

· 

o 常用属性:Size:水平线粗细,单位默认像素(px

o 

§ 

§ color:水平线颜色

§ width:水平线的宽度

§ noshade:去掉水平线的阴影,(在HTML中,noshade是没有值的属性)。如:noshade

· pre > 预排版标记

· 

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

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

· 

o 功能:定义各种标题。

o 属性:align:水平对齐。取值:leftcenterright

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:编号类型,取值:1AaiI

o start:数字从第几个开始

HTML图片标记,行内标记,单边标记

· 语法格式:img 属性="" > 

· 属性:

· 

o width:图片宽度

o height:图片高度

o border:图片边框粗细

o src:图片路径(相对路径)

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

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

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

· 注意事项

· 

o 如果图片相等比例缩放,只需要widthheight其中一个。

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 > 

· 常用属性

· 

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

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

 

 

你可能感兴趣的:(HTML-1)