CSS&HTML复习笔记
CSS&HTML复习笔记（课堂笔记便于复习）
HTML基本标签
HTML – 超文本标记语言
1. 结构标签 – html5
< !DOCTYPE HTML > --文档类型声明
< meta charset=“UTF-8” > – 设置字符集编码
< body >标签 -网页的背景图片和颜色 background,bgcolor
2. 文本相关的标签
设置颜色与字体 font color="" size="" face=""；
其他关于字体格式：< b > < /d >字体加粗，< i >< /i >斜体，< u >< /u >下划线，< de l>< /del >删除线，sup,sub上标与下标；
行控制标签： < p >< /p > – 行级容器 [上下自动产生空行] （paragraph）；
h1~h6 – 自动加粗，单独一行；
< br > 不产生空行的换行；
列表标签：
无序 ul —> li
有序 ol —> li
定义 dl —> dt、dd
特殊字符： & nbsp 空格; & quot 双引号; … [字符实体] – 转义字符
预格式文本：< pre >< /pre >
水平线：< hr width="" size="" color="" >
3.图像标签
<img src="" alt="替换文本" title="提示文本信息" width="" height="" />
4. 超链接
< a href="" >文本和图像< /a >
< a name="锚记名" >< /a > ---> < a href="#锚记名" >链接的文本或图像< /a >
<a href="mailto:email地址">a>
5. 滚动标签marquee
direction,scrolldelay,scrollamount,behavior,onmouseover,onmouseout
表格与表单相关的标签 :
1.表格标签
表格作用：
显示整齐页面的数据 – 边框
用于布局的表格 —> 不显示边框+单元格填充与单元格间距设置为0
表格标签：
<table>
<caption align="top|bottom">表格的标题caption>
<tr>
<td>普通单元格td> 或 <th>标题单元格th>
tr>
table>
单元格的跨行与跨列 (合并单元格)
跨行: rowspan
跨列：colspan – column
2.表单相关的标签
2-1.表单标签
用于收集用户填写的信息，向服务器发送请求
action – 动作，行为, method – 方式
<form action="服务器处理请求的程序名称或者地址" method="发送请求的方式-get|post" id="" name="" onsubmit="">
form>
2-2. 输入类型的元素 – 表单元素
<input type="text|radio|checkbox|button|submit|reset|file|date|email" name="名称" value="初始值" />
可选属性：size – 文本框是的宽度
maxlength – 最大字符数
readonly – 只读
disabled – 禁用|置灰
多行文本框：< textarea >
按钮：
<input type="submit" value="确定" /> ---> 转入表单 action
<input type="reset" value="重填" />
<input type="button" value="普通按钮" />
<button type="submit">提交按钮button> 与 <button>按钮button> 效果相同
<button type="button">普通按钮button> 如果省略type="button"则为提交按钮
3.选择型元素
<select name="" id="" size="">
<option value="">textoption>
<option value="">textoption>
<option value="">textoption>
...
select>
< input type="file" / > 文件选择器,用于选择本地文件上传时使用
（注意：编写表单元素，为了显示整齐，通常使用表格布局。）
<form>
<table>
<tr>
<td><input type=""/>td>
tr>
table>
form>
作业练习：
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
/* 主板面样式 */
#container {
background-color: lightgray;
width: 60%;
margin-left: 50px;
margin-top: 100px;
}
/* 顶部面板样式 */
#header {
font-size: small;
font-family: verdana;
color: black;
}
#content-1 {
color: dimgray;
background-image: url(素材3/warning.gif);
margin-left: 10px;
padding-left: 15px;
line-height: 14px;
background-repeat: no-repeat;
}
#content-2 {
font-size: small;
font-family: verdana;
}
#footer {
text-align: right;
}
a {
font-size: small;
font-family: verdana;
color: orangered;
}
.mybutton {
border-color: palegreen;
background-color: palegreen;
font-size: small;
color: red;
}
.username {
border: 2px palegreen;
text-indent: calc();
border-style: dashed;
background-image: url(素材3/username.gif);
background-repeat: no-repeat;
text-indent: 20px;
}
.password {
border: 2px palegreen;
text-indent: calc();
border-style: dashed;
background-image: url(./素材3/password.gif);
background-repeat: no-repeat;
text-indent: 20px;
}
style>
head>
<body>
<div id="container">
<div id="header">
<form action="" method="post">
<table border="0" cellspacing="0" cellpadding="">
<tr>
<th>User Loginth>
tr>
table>
form>
div><br>
<div id="content-1">
<form action="" method="post">
<table border="0" cellspacing="0" cellpadding="">
<tr>
<th>请输入您的用户名和密码th>
tr>
table>
form>
div><br>
<div id="content-2">
<form action="" method="post">
<table border="0" cellspacing="0" cellpadding="">
<tr>
<th align="left"> Usernameth>
tr>
<tr>
<td>
<input class="username" type="text" name="username" id="" value="" />
td>
tr>
<tr>
<th align="left"> Passwordth>
tr>
<tr>
<td>
<input class="password" type="password" name="password" id="" value="" />
<br>
<a href="#">Forget Password?a>
td>
tr>
table>
form>
div>
<div id="footer">
<form action="" method="">
<br>
<input class="mybutton" type="button" name="" id="" value="登录" />
form><br>
div>
div>
body>
html>
4.Html5 新增的表单元素标签
<input type="date" />
<input type="time" />
<input type="datetime-local" name="" id=""> 日期与时间d
<input type="email" /> 提交时会提示格式上检查消息
<input type="image" src="" alt=""> 将图片作为提交按钮-->等同<input type="submit"/>
<input type="number" />只能输入数字的文本框
<input type="color" />
总结：
（1）行内元素：a，b，span，img，input，strong，label，button，select，textarea，em
（2）块级元素：div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用）
（3）空元素（void）：即没有内容的HTML元素。br（换行），hr（水平分割线），meta，link，input，img
CSS
1.CSS概念
层叠/级联 样式表 （Cascading Style Sheet）定义如何显示 HTML 元素 —> 位置，大小，颜色（外观）。
网页的三层结构：
结构层 – HTML标签
表现层 – CSS
行为层 – Javascript 脚本语言
2.CSS应用场景的分类
行内样式 – 利用每个标签具有style属性来指定样式规则，只能针当前一个标签生效。
<p style="color:red;font-size:30px;font-family: 华文行楷;">这是一个段落!!!p>
注意语法： "规则名：值;规则名:值;..."
内部样式 – 写在之间
<style type="text/css">
/*针对当前页面中的所有p元素*/
/*p 称为HTML元素选择器selector */
p {
color:red;
font-size:30px;
font-family: 华文行楷;
}
style>
外部样式–可用于网站中多个页面的样式 [用来确定网站的整体风格]
两种方式使用外部样式：
a) 导入
b) 链接 （推荐）
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的
内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS
（2）页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载
（3）link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别
（4）link支持使用JavaScript控制DOM修改样式；而@import不支持。
实际开发中：三种样式同时使用 (就近原则)
(1) 网站的整体风格的样式使用外部样式 ；
(2) 单个网页内的多个元素使用内部样式 ；
(3) 某个元素标签与众不同时，使用行内样式
3.选择器
当使用内部与外部样式时，需要指定选择器。
(1).选择器的分类
a. HTML元素选择器 -- p,h1,h2,body,input....
b. 类选择器 --使用".类名" 声明 ,在标签元素中使用class="类名"
c. ID选择器 --使用"#id名" 声明,在标签元素中使用id="名称"
类选择器与ID选择器区别：
1.类选择器用于网页中多个同类型元素，使用统一风格样式
2.ID选择器用于网页中唯一元素，表示网页结构的标签元素.
块级容器标签--局部的网页
(2) 选择器声明方式
a. 并列声明
多个元素使用同一组规则 --选择器分组 使用逗号分隔
#p1,.myh2 { /并列声明/
background-color:aqua;
}
b.嵌套声明 --使用空格分隔,表示所有的后代元素 --后代选择器
#ul1 li { /从属声明/
list-style-image: url(“images/list_icon.gif”);
}
c.子元素选择器 – 使用 > 分隔
#ul1>li { /子元素声明/
list-style-image: url(“images/list_icon.gif”);
}
d. 相邻兄弟选择器 – 使用 + 分隔
选中的是+后面的元素，前提这两个元素是兄弟，有一个共同的父元素
#ul1 + #ul2 { /*子元素声明*/
list-style-image: url("images/list_icon.gif");
}
e.属性选择器 --[属性名=值]
[id=p1]{
font-size:30px;
color:blueviolet;
}
f. 所有元素选择器 *
g. 伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
举例：
a:link { /*针对有效的a元素*/
color:#ccc;
text-decoration: none; /*不显示下划线*/
}
a:hover {
color:red;
text-decoration: underline; /*显示下划线*/
font-size:30px;
background-color:deepskyblue;
}
a:active {
color:yellow;
}
a:visited {
color:aqua;
}
选择器优先级：id > class > 元素
（1）选择符：id（ID）；class（类）；element（标签）；element
element（后代）；element>element（子）；element，element（群组）；element+element（相邻同胞）；伪类（:link,:visited,:active,:hover,:focus:first-child,:lang(language)）；
伪元素（:first-letter,:first-line,:before,:after）；属性选择器
（2）可继承的选择符：主要是文本方面的可继承，盒模型相关的属性基本没有继承特性。font-size，font-family，color，ul
（3）不可继承的选择符：border，padding，margin，width，height
（4）优先级：同权重下样式定义最近者高。！important>内联样式（即定义在HTML标签内的样式，1000）>id（100）>
class/伪类/属性（10）>伪元素/element（1）
（5）CSS引入伪类和伪元素的原因：用来修饰DOM树以外的部分。
4.盒子模型
Box Model – 将页面中的所有元素看成一个盒子.每个盒子占所在页面空间由以下几个部分组成:
-
盒模型的组成content+padding+border+margin
-
水平方向:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
-
垂直方向:
margin-top + border-top + padding-top + hegiht + padding-bottom + border-bottom + margin-bottom
元素content[width|height]+内边距(填充)[padding]+边框[border]+外边距(间隔)[margin]
注意：外边距合并的情况：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
div -块级容器标签
1.布局div
2.定位div – 位置页面的上层(脱离页面的文档流) - position:absolute;绝对定位
span -行级容器标签
3.针对文本
5.定位与浮动
5-1. 定位
使用position样式属性来定位元素
四个值:
absolute -绝对
|-脱离文档流
|-位置相对于整个浏览器body窗口
|-如果当前设置absolute的元素存在父级元素也设置postion为absolute或relative，则相对于父级元素进行定位
relative -相对
|-相对于自身原来位置进行定位
fixed -固定
|-脱离文档流
|-定位效果与absolute类似，只是在滚动窗口时，对象是固定的
static - 默认值,不作定位
5-2 浮动
|- 向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
|- 脱离文档流
float:left | right
5-3 元素的显示
display: block 显示块级
inline 显示为行级 --style=“display:inline;”
inline-block – 前两者的合体
解释一下display的几个常用的属性值inline ， block， inline-block
inline（行内元素）:
. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
. 不能更改元素的height，width的值，大小由内容撑开.
. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
. 能够改变元素的height，width的值.
. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内与块级）:
. 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
. 用通俗的话讲，就是不独占一行的块级元素。
总结：
display: inline,block,inline-block,none
inline- 内联 -元素显示为内联元素，与其他行级元素是显示在同一行
block –块元素 –单独占一行
inline-block --内联与块元素结合
none –不显示 [占用的空间会被替换] visibility: hidden | visible
注意：display:none; 与 visibility:hidden区别
display:none; 占用的空间会被替换
visibility:hidden 元素依然占用空间
5-4 元素的隐藏：
两种方式：
display: none; /*隐藏元素，不占页面中的空间*/
visibility:hidden; /*隐藏元素，占据页面中的空间*/
5-5 元素水平对齐
用于布局时使用.
元素： width,margin
这是一个div容器
六、Frameset框架标签与IFrame标签
• 网页布局
1.表格布局
显示整齐的数据页面部分
Table表格布局的核心是:
设计一个能满足版式要求的表格结构,将内容装入每个单元格中,最终的结构是一个复杂的表格(有时会出现多次嵌套),显然这样不利用设计和修改。
2.框架布局
•Frameset框架是能够在网页中包含其它网页的一种元素
适用于：论坛，学习教程网站，管理后台
缺点：
1）保存时存在多个页面，复杂
2) 浏览器的兼容性不好
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<frameset rows="20%,*" frameborder="1" bordercolor="red">
<frame src="lx1.html" noresize="noresize" />
<frameset cols="200,*">
<frame src="css-4.html" noresize="noresize"/>
<frame src="css-lx1.html" name="mainFrame" />
frameset>
frameset>
<noframes>
<body>
对不起，您的浏览器不支持本页面的显示！
body>
noframes>
html>
作业练习：
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<frameset rows="110,*" frameborder="1" bordercolor="" border="0">
<frame src="menu1.html" scrolling="no" name="top">
<frameset cols="180,*" frameborder="1" bordercolor="" border="0">
<frame src="menu2.html" scrolling="no" name="left" noresize="noresize">
<frame src="main.html" scrolling="no" name="main" noresize="noresize">
frameset>
frameset>
<noframes>
<body>
您的浏览器不支持该页面的显示！
body>
noframes>
html>
•IFrame – 内联框架
<iframe src="cssbox.html" width="400" height="300" scrolling="no" frameborder="0" name="main">
*您的浏览器不支持本页面的显示*
iframe>
<br><br>
<a href="http://www.baidu.com" target="main">百度一下a><br/>
<a href="http://www.taobao.com" target="main">淘宝一下a><br/>
作业练习：
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
#layout1{
position: fixed;left: 0px;top: 0px;
background-color: lightgray;
width: 120px;
height: 100%;
padding-top: 50px;
padding-left: 10px;
}
#layout1 ul{
margin: 0px;
padding: 0px;
}
#layout1 li{
background-color: rgb(163, 157, 157);
/* float: left; */
list-style-type: none;
margin-bottom: 5px;
margin-left: 10px;
width: 90px;
height: 30px;
}
a:link {
text-decoration: none;
color: rgb(56, 14, 14);
line-height: 30px;
text-align: center;
display: block;
}
a:hover{
color: white;
background-color: blueviolet;
}
iframe{
margin-left: 200px;
margin-top: 0px;
}
style>
head>
<body>
<div id="layout2">
<div id="layout1">
<ul id="layout">
<li><a href="http://www.baidu.com" target="mainmenu">百度a>li>
<li><a href="http://www.qq.com" target="mainmenu">腾讯a>li>
<li><a href="http://www.163.com" target="mainmenu">网易a>li>
<li><a href="https://www.sina.com.cn/" target="mainmenu">新浪a>li>
ul>
div>
div>
<iframe src="main.html" width="1200px" height="1000px" frameborder="0" name="mainmenu">iframe>
body>
html>
3.DIV布局
DIV+Table [CSS]
DIV+CSS
DIV层 layer (布局) 分为两种：
- Ap层 应用 postion:absolute; z-index=1,left,top
z-index属性：使用了relative、absolute、fixed三种定位后，都会使正常的文档流发生一定程度的改变，造成元素出现重叠的情形。为了能让重叠的元素有序的显示出来，需要在定位的相关元素加上z-index属性。其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，该属性只对使用了定位的元素有效。
z-index auto | number
auto:默认值
number:无单位的整数，可以为负数
这里需要特别说明的是：Z-index只能工作在被明确定义了absolute，fixed或relative
这三个定位属性的元素中，如果没有定义position属性，则z-index属性不起作用。所以Z-index 仅能在定位元素上奏效（例如 position:absolute;）
- Div布局层
作业练习：
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style type="text/css">
#wrap {
position: absolute;left: 0px;top: 0px;
width: 100%;
height: 100%;
}
#top {
background-color: seagreen;
position: position;left: 0px;top: 0px;
width: 100%;
height: 100px;
}
#left {
background-color: orangered;
position: position;left: 0px;top: 100px;
width: 40%;
height: 500px;
}
#right {
background-color: saddlebrown;
position: relative;left: 40%;top: -500px;
height: 500px;
}
#botton {
background-color: deepskyblue;
position: relative;left: 0px;top: -500px;
width: 100%;
height: 60px;
}
style>
<body>
<div id="wrap">
<div id="top">头部内容，可用于导航等。div>
<div id="left">中左部分，可用于导航，主体内容，相关新闻等。div>
<div id="right">中右部分，可用于导航，主体内容，相关新闻等。div>
<div id="botton">底部内容，可用于显示辅助信息。div>
div>
body>
html>