一、关于HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
-
属性总是以名称/值对的形式出现，比如：name="value"。
-
属性总是在 HTML 元素的开始标签中规定。
二、常用基础标签
- <h></h> —— 标题标签
- <b></b> <u></u> <i></i> —— 格式化标签
- <sup></sup> <sub></sub> —— 上下标标签
- <p></p>—— 段落标签
- <ul><li></li></ul> <ol><li></li></ol>—— 有序和无序列表标签
- <span></span>—— 文字标签
- <div></div>—— 块标签 （容器 做网站的布局)
- <table><tr><td></td></tr></table>—— 表格标签
- <iframe name="ifName" src=" "></iframe> —— 标签里面的框架
- <a href=" "></a>—— 超链接
注：锚标记是a标签的另一种用法，用来标记某个元素以便快速跳转。
<a href="#targetC">找HTML</a>
<a name="targetC">HTML</a>
11.<img src=" " alt="加载失败">—— 插入图片
注：src 路径有三种： 相对路径（引用在该html文件中的图片 ，每一个“./ ”向外跳一级）绝对路径（引用存储于电脑某个位置的图片） 远程路径（打开网页中的某个图片），常用相对路径和远程路径。
三、样式的写法
样式的写法—— 属性：值；
在样式里面 有一些样式是复合样式： border
eg: border-width ;border-style ; border-color ; border-left-style等
1.行内样式的写法
eg: <div style=" width: 200px; height: 300px; border:1px solid black;"></div>
2.内嵌样式的写法
需要使用选择器来匹配元素,选择器写在<style></style>里
(1)基本元素选择器
eg:
(2)class类名称选择器
eg:
(3)id选择器
eg:
(4)子父元素选择器
eg:
(5)属性选择器
eg:
3. 外部样式
即将内嵌样式中元素的属性写在其他文件中，再进行导入。
优先级：样式相同，则优先级顺序为行内样式>内嵌样式>外部导入
样式不同，则混合使用。
四、定位
元素定位分为相对定位、绝对定位和固定定位。 常用相对定位和绝对定位。
元素相对定位或者绝对定位之后 可以使用一些样式 —— z-index； left ；right ；top； bottom
相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置 ，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。
绝对定位： 绝对定位使元素的位置不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
通过 float 属性实现元素的浮动。可以通过设置元素样式或者使用float属性来实现元素位置的调整，如
五、网页框架搭建
实例：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.center {
position: relative;
margin: 0 auto;
width: 1000px;
height: 500px;
border: 1px solid black;
}
.center_left {
position: relative;
width: 230px;
height: 500px;
border-right: 1px solid black;
float: left;
}
.center_right {
position: relative;
width: 769px;
height: 500px;
background-color: rgba(255, 22, 162, 0.15);
float: left;
}
.menu {
margin: 0;
padding: 0;
}
.menu > li {
text-align: center;
list-style: none;
height: 82.433px;
line-height: 82.433px;
border-bottom: 1px solid black;
}
.menu > li:hover {
background-color: #ffe879;
color: blue;
}
.menuli_child {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 231px;
width: 769px;
height: 500px;
background-color: white;
}
.menu > li:hover .menuli_child {
display: block;
}
</style>
</head>
<body>
<div class="center">
<div class="center_left">
<ul class="menu">
<li>第一栏
<div class="menuli_child">星期一</div>
</li>
<li>第二栏
<div class="menuli_child">星期二</div>
</li>
<li>第三栏
<div class="menuli_child">星期三</div>
</li>
<li>第四栏
<div class="menuli_child">星期四</div>
</li>
<li>第五栏
<div class="menuli_child">星期五</div>
</li>
</ul>
</div>
<div class="center_right"></div>
</div>
</body>
</html>悬停（伪类的应用）： 鼠标悬停出来的层 必须是当前悬停的元素的子集
居中：（1）水平居中：margin:0 auto
（2）垂直居中：设置line-height的值=height的值
元素横排排列：（1)使用float属性，设置相对定位后设置float:left或者float:right
(2)设置为行级元素—— display: inline-block
六、多级菜单
实例：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.first{
border: 1px solid black;
height: 50px;
background-color: white;
}
.first>li{
float:left;
width: 150px;
height: 50px;
list-style: none;
text-align: center;
line-height: 50px;
}
.first>li:hover{
background-color: royalblue;
color:white;
}
.second{
display: none;
background-color: white;
border: 1px solid black;
}
.second>li{
position: relative;
list-style: none;
height: 50px;
line-height: 50px;
color:black;
}
.second>li:hover{
background-color:silver;
}
.first>li:hover .second{
display: block;
}
.third{
position: absolute;
display: none;
left: 148px;
top: 0;
width: 150px;
border: 1px solid black;
}
.third>li{
list-style: none;
}
.second>li:hover .third{
display: block;
}
.third>li:hover{
background-color:black;
color: white;
}
</style>
</head>
<body>
<ul class="first">
<li>报名申请
<ul class="second">
<li>考级报名
<ul class="third">
<li>英语四级</li>
<li>英语六级</li>
</ul>
</li>
<li>补考报名
<ul class="third">
<li>无线通信原理</li>
<li>现代通信网</li>
<li>光纤通信技术</li>
</ul>
</li>
</ul>
</li>
<li>信息维护
<ul class="second">
<li>个人信息维护
<ul class="third">
<li>修改信息</li>
<li>修改密码</li>
</ul>
</li>
</ul>
</li>
<li>选课
<ul class="second">
<li>自主选课
<ul class="third">
<li>公开课选课</li>
<li>尔雅选课</li>
</ul>
</li>
</ul>
</li>
<li>信息查询
<ul class="second">
<li>查询个人信息
<ul class="third">
<li>学号</li>
<li>班级</li>
<li>宿舍</li>
</ul>
</li>
<li>课表查询
<ul class="third">
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
</li>
<li>选课名单查询
<ul class="third">
<li>科技英语</li>
<li>英语翻译</li>
</ul>
</li>
<li>成绩查询
<ul class="third">
<li>必修课</li>
<li>选修课</li>
</ul>
</li>
<li>考试信息查询
<ul class="third">
<li>期中考试</li>
<li>期末考试</li>
</ul>
</li>
<li>空闲教室查询
<ul class="third">
<li>A楼</li>
<li>B楼</li>
<li>自习室</li>
</ul>
</li>
</ul>
</li>
<li>教学评价
<ul class="second">
<li>学生评价
<ul class="third">
<li>课程评价</li>
<li>最美教师评选</li>
</ul>
</li>
<li>课程问卷调查
<ul class="third">
<li>课程满意度调查</li>
<li>教师满意度调查</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
