一：什么是 HTML 文件？ 1):HTML 指超文本标签语言。 2):HTML 文件是包含一些标签的文本文件。 3):这些标签告诉 WEB 浏览器如何显示页面。 4):HTML 文件必须使用 htm 或者 html 作为文件扩展名。 5):HTML 文件可以通过简单的文本编辑器来创建。 二：结构 4 HTML语言的结构 <html> <head> 编码规范的(gbk/utf-8) -头文件标签 <title>标题标签</title> </head> <body> html主体部分:这些内容最终会在浏览器中显示 </body> </html> -有标签体的标签
三：HTML标签的分类
-
标题标签:从到<h6>,<h1> 定义最大的标题。<h6> 定义最小的标题。
-
换行标签：<br>
-
水平线标签:<hr> 4)换行标签:<br/> 5)段落标签:<p> 6)段落缩进:<blockquote> 7)上下标标签:<sup>和<sub> 8)原样输出标签:<pre> 9)字体标签:<font> 10)居中标签:<center> 11)图像标签:img 空标签体 <img/> 属性: src:链接到的资源图片 width:图片的宽度 两种方式:一种指定px(像素) 第二种:百分比 title:悬停状态,会显示文字 alt:当图片失效的时候,用来解释说明该图片 height:图片的高度 12)转义字符: 空格: 注意事项(分号一定要带上) <: < ; (letter than) >:>(greater than) <h1> 注册商标:® ® 版权所有:© © 13)有序列标签 ol li列表项 14)无序列标签 ul li列表项 15)超链接标签 1>连接到某个资源文件或者资源地址(URL) 2> 作为锚连接来使用 在同一个html页面下: a> 打锚点: <a name=”锚点名称”></a> b)创建跳转 <a rel="nofollow" href=”#锚点名称”>跳转</a>
不同页html页面下: c)打锚点: <a name=”锚点名称”></a> d)创建跳转标记 <a rel="nofollow" href=”资源文件或者资源地址#锚点名称”>跳转</a> 16)表格标签: 1>table标签 属性:border 表格的边框 width 表格的宽度 height表格的高度 2>align:标签在浏览器中的对齐方式 bgColor:背景色 3>tr:行标签 4>td:列(单元格) 5>th:表头标签(默认为：居中,加粗) 6>行合并:rospan 7>列合并:colspan
四：CSS网页布局 1）css的使用方法有三种： 1> 行内样式 标签 style属性:指定样式 弊端:style属性它和html标签混合使用,不利于后期维护 2>内部样式 书写格式: 选中某个标签名{ 书写样式; } 3> 外部方式 a) 创建css文件:指定标签的样式 标签选择器{ 书写样式; } b) 需要外部导入该css文件 rel属性:关联层叠样式表 <link href=”需要被导入的css文件” ref=”stylesheet”>
2)css背景
1> 背景边框的设置:首先在头文件中加入<style type="text/css">
2>在body属性中进行颜色的选择 body {background-color: yellow}
3)css文本
1>文本颜色的设置<style type="text/css">
eg： h1 {color: #00ff00}
</style>
</head>
<body>
This is header 1
</body>
4)css字体
1>首先在头文件中加入<style type="text/css">
2>在p {font-family: .......}进行设定
<head>
<style type="text/css">
p {font-family: courier}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
5)css边框的设定 1>首先在头文件中加入<style type="text/css"> 2>在p.**** {border-style：....:}进行边框样式的设定 eg： <head> <style type="text/css"> p.dotted {border-style: dotted} </style> </head> <body> <p class="dotted">A dotted border</p> </body> 3>在p.*** { border-color: .......}进行颜色的设定 eg: <html> <head> <style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
</body>
</html>
6)css边距 1>首先在页面中建立一个<div>....</div>块标签 2>块标签的位置可以根据 a>magin的属性值来进行设定 b>可以用浮动来进行移动（多个图片重叠在一起的时候） 7）选择器的分类 1)标签选择器 标签名称{ 样式; } eg; div{ font-size: 24px; color: #f00; } 2)id选择器 在使用的时候,给标签一定要指定id属性且指定id属性值 #id属性值{ 样式; } eg: #dl1{ font-size: 24px; color: #0f0; } （在同一个html页面下,不要给多个标签指定同名的id属性,id属性唯一的 javascript:根据id属性值获取当前的标签对象 document.getElementById("id是唯一的") ; 3)类选择器 在使用的时候,给标签一定要指定class属性且指定class属性值 .class属性值{ 样式; } eg: .cls1{ font-size: 36px; color: #00f;}
(在同一个html页面中可以给多个标签指定同名class属性)
派生选择器:
1)并集选择器
选择器1,选择器2,选择器3{
样式;
}
eg: #dl1,.cls1{
font-size: 24px;
color: #ff0;}
2)交集选择器
选择器1 选择器2 选择器3{
样式;
}
eg: #dl1 span{
font-size: 36px;
color: #000;}
3)通用选择器
* :所有的意思,通配符号
*
8)css伪类选择器
1>伪类选择器有4种状态:
a)鼠标没有访问过的状态 link
b)鼠标经过的状态 hover
c)鼠标激活状态(鼠标点击了,但是没有松开的状态)active
d)鼠标已经访问过的状态(点击了,并且松开的状态) visited
2>格式为
标签名称:分别四种状态
1> a:link{
color: ****;
}
2> a:visited{
color:***** ;
}
3> a:hover{
text-decoration: none;/
color: ****;
}
4> a:active{
text-decoration: underline;
color: ****;
}
注意：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
