目录
超链接标记链接的伪类
第4章、CSS样式规则与引入CSS样式与CSS基础选择器与定义CSS样式与CSS字体样式属性与CSS文本外观样式属性与复合选择器的定义与CSS样式规则
第5章、CSS盒子模型与认识盒子与边框属性与内外边距属性与设置背景图像与行内元素及块元素
前言
这是一个超级简单的HTML的网页基础学习。
第1章、网页的分类与扩展名、WEB标准
网页分类：
静态网页、动态
扩展名：
HTML网页: .html、.htm
CSS: .css
Javascript: .js
web标准（前端三剑客）:
结构标准: html
表现标准:css层叠样式表
行为标准：javaScript
第2章、常见的HTML标记、常用的图片格式
HTML标记
<!DOCTYPE >：声明文档类型
<html>< /html>：创建一个HTML文档,也称根标记。
<head>< /head>：设置文档标题和其它在网页中不显示的信息，也成为头部标记。
<title>< /title>：设置文档的标题。
<meta charset=”utf-8”/>：定义页面元信息标记。
<style>
XXX
< /style>：CSS样式标记
<body>< /body>：用于定义HTML文档所要显示的内容,也称主题标记。
例子
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- 网页的具体内容 -->
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
<img src="image.jpg" alt="示例图片">
</body>
</html>.CSS
<link href=”url” rel=stylesheet type=”text/css” />引入CSS样式表文件
--------------------------------------------------------------------------
<hr />：用来定义一条水平线。
颜色：Color
大小：粗细size
宽度：width
--------------------------------------------------------------------------
<br />：换行,插入换行符。
--------------------------------------------------------------------------
<h1 align=”center”>XXX< /h1>~<h6>< /h6>：最大的标题到最小的标题。
--------------------------------------------------------------------------
使用align属性加以下：
left：设置标题文字左对齐；
center：设置标题文字居中对齐；
right：设置标题文字右对齐；
--------------------------------------------------------------------------
<p></p>：创建一个段落。
<p align="">：将段落按左、中、右对齐。
使用align属性加以下：
left：设置标题文字左对齐；
center：设置标题文字居中对齐；
right：设置标题文字右对齐；
--------------------------------------------------------------------------
<pre></pre>:预格式化标签
--------------------------------------------------------------------------
<blockquote></blockquote>:缩排
--------------------------------------------------------------------------
<font ></font>：规定文本的字体、字体尺寸、字体颜色。
--------------------------------------------------------------------------
<img src=”url” />
src：图像的路径
alt：图像不能显示时的替换文本
title：鼠标悬停时显示的内容
width：设置图像的宽度
height：设置图像的高度
border：设置图像边框的高度border=”0”去掉图像边框
vspace：设置图像顶部和底部的空白（垂直边距）
hspace：设置图像左侧和右侧的空白（水平边距）
--------------------------------------------------------------------------
能用align属性： p hn img table tr td th
--------------------------------------------------------------------------
left：将图像对齐到文字的左边(文字环绕)
right：将图像对齐到文字的右边
top：将图像的顶端和文本的第一行文字对齐，其他文字居于图像下方
middle：将图像的水平中线和文本的第一行文字对齐，其他文字居于图像下方
bottom：将图像的底部和文本的第一行文字对齐，其他文字居于图像下方
--------------------------------------------------------------------------
<div ></div>区域容器标记
--------------------------------------------------------------------------
<span></span>行内容器标记常用的图片格式
JPEG（.jpg）、GIF、PNG
预格式化标签
<pre> 文本块</ pre>
常见的 HTML 特殊符号及对应的实体编码：
小于号（<）：
<大于号（>）：
>和号（&）：
&引号（"）：
"单引号（'）：
'或'版权符号（©）：
©注册符号（®）：
®商标符号（™）：
™不断行的空格：
半个空白位：
 一个空白位：
 
第3章、列表与超链接
列表
/*------------------------------------------------------------------------*/
<ul type=" ">定义项目符号
disc：● 默认
circle：○
square：■
/*------------------------------------------------------------------------*/
<li></li>列表项，块状元素 结合<ul>无序与<ol>有序使用
<ul>
<li></li>列表项，
</ul>无序列表
<ol type=”1、a、A、i、I”>
<li></li>列表项，
</ol>有序列表
/*------------------------------------------------------------------------*/
<dl></dl>定义列表列表的css样式：
list-style-type:8+1（none）
常见的用于设置列表（<ul> 无序列表和 <ol> 有序列表）样式的 CSS 属性：
list-style-type：用于设置列表项标记的类型。
对于无序列表（<ul>）可选值有：
disc（实心圆，默认值）
circle（空心圆）
square（实心方块）
对于有序列表（<ol>）可选值有：
decimal（数字，1、2、3 等，默认值）
lower-roman（小写罗马数字，i、ii、iii 等）
upper-roman（大写罗马数字，I、II、III 等）
lower-alpha（小写英文字母，a、b、c 等）
upper-alpha（大写英文字母，A、B、C 等）
list-style-image:
属性用于使用图像来替换列表项的标记。可以使用自定义的图片作为列表项的标记。
list-style-image: url('图片的路径及全称');
ul {
list-style-image: url('marker.png');
}list-style-position：
属性用于设置列表中列表项标记的位置。指示如何相对于对象的内容绘制列表项标记。
<!DOCTYPE html>
<html>
<head>
<style>
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
</style>
</head>
<body>
<p>"inside"：</p>
<ul class="inside">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<p>"outside"：</p>
<ul class="outside">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>
</html>
超链接标记<a>链接的伪类
超链接标记
<a href=”#”></a> #空链接
href:用于链接目标的url地址
target: _self在原窗口打开 _blank在新窗口打开链接的伪类
a:link{CSS样式规则;}未访问时超链接的状态
a:visited{CSS样式规则;}访问后超链接的状态
a:hover{CSS样式规则;}鼠标经过、悬停时超链接的状态 img:hover p:hover
a:active{CSS样式规则;}鼠标单击不动时超链接的状态<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="https://www.example.com">示例链接</a>
</body>
</html>
a:link选择未访问过的链接，将其颜色设置为蓝色。
a:visited选择已访问过的链接，将其颜色设置为紫色。
a:hover当鼠标悬停在链接上时，将链接颜色设置为红色，并添加下划线。
a:active当链接被点击时，将其颜色设置为绿色。
实例导航栏
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none; /* 去除列表的默认标记（如项目符号） */
margin: 0; /* 去除外边距 */
padding: 0; /* 去除内边距 */
overflow: hidden; /* 处理可能出现的溢出内容 */
background-color: #333; /* 设置背景颜色为深灰色 */
}
li {
float: left; /* 使列表项向左浮动，以便水平排列 */
}
}
li a {
display: block; /* 使链接元素占据整个父元素（列表项）的空间，以便可以设置宽高和内边距等 */
color: white; /* 文本颜色为白色 */
text-align: center; /* 文本居中对齐 */
padding: 14px 16px; /* 内边距设置，上下 14 像素，左右 16 像素 */
text-decoration: none; /* 去除链接的默认下划线 */
}
li a:hover {
background-color: #111;/* 鼠标悬停时，背景颜色变为更深的灰色 */
}
ul ul {
display: none;/* 二级菜单默认隐藏 */
position: absolute; /* 绝对定位，脱离文档流 */
background-color: #333; /* 背景颜色为深灰色 */
}
ul li:hover>ul {
display: block; /* 当鼠标悬停在父级列表项上时，显示对应的二级菜单 */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="#">产品 1</a></li>
<li><a href="#">产品 2</a></li>
<li><a href="#">产品 3</a></li>
</ul>
</li>
<li>
<a href="#">服务</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
</body>
</html>超链接的四大状态
a:link未访问过
a:visited已访问过
a:hover悬停
a:active点击
第4章、CSS样式规则与引入CSS样式与CSS基础选择器与定义CSS样式与CSS字体样式属性与CSS文本外观样式属性与复合选择器的定义与CSS样式规则
CSS样式规则
选择器{
属性1：属性1值; 键值对
属性2：属性2值;
}
例：
P{
Color : red ;
Border :
}
或
h2{
font-size : 20px ;
color : red ;
} 标签选择器、类选择器、ID选择器、通配选择器
引入CSS样式方式
行内式（内联式）
<标记名 style=” 属性1：属性1值; 属性2：属性2值;”>内容</标记名>
例：
<h2 style = “ font-size : 20px ; color : red ; ”></h2>内嵌式（内部式）
例：
<style type=”text/css”>
选择器{
属性1：属性1值;
属性2：属性2值;
}
</style>链入式（外部式）
<link href=”css/01.css” rel= “stylesheet” type=”text/css” />CSS基础选择器
（1）标记选择器
p{ } （局限性）
（2）类选择器
.ls
class=”ls”
（3）id选择器
#zs
id=”zs”
（4）通配符选择器
*{}复合选择器
(1)标签指定式选择器
p.speacial{ }
<p class=”speacial”>
<h1 class=”speacial”>
(2)后代选择器
p
strong{ }
(3)并集选择器
p
div
a{
color：red;
}
集体声明CSS字体属性
font-family：字体
font-size:字体大小
font-style：字体风格
italic:斜体
oblique 倾斜
font-weight：字体粗细
blod
bloder
100-900
color:文本颜色
font：综合设置字体样式外观属性
text_decoration:文本装饰
underline下划线
overline上划线
line-through删除线
-----------------------------------------------------------------------------
text_decoration:none 去掉下划线
-----------------------------------------------------------------------------
text-align:水平对齐方式
left左对齐
right右对齐
center居中对齐
-----------------------------------------------------------------------------
text-indent:首行缩进 2em：2字符
-----------------------------------------------------------------------------
line-height:行间距
垂直居中: 容器的height/n(行数)=line-height
-----------------------------------------------------------------------------
对象（p）:first-letter:首字下沉
lerter-spacing：字符间距
word-spacing：单词间距
-----------------------------------------------------------------------------
text-transform:文本转换
首字母大写capitalize
大写uppercase
小写lowercase第5章、CSS盒子模型与认识盒子与边框属性与内外边距属性与设置背景图像与行内元素及块元素
认识盒子
基础属性：
width：宽 默认与父元素一样
height：高 默认与内容高度一致
padding：内边距 元素内容与边款之间的距离DIV盒子
方向值
top：上
right：右
left：左
bottom：下四个方向值
上、右、下、左；
两个值
上下、左右；
一个值
四边；
三个值
上、左右、下；
margin: 外边距：边框以外，与其他对象之间的距离
border：边框边框属性
border-style:
solid：实线
dashed：虚线
dotted：点线
double：双实线
默认：none
border-width:
border-color:
综合：
border: border-width 边框宽度
border-style 边框样式
border-color 边框颜色;
border:1px solid red; 四个方向都是相同的设置某个方向设置
border-top-style:上边框样式
border-top -width:上边框宽度
border-top -color:上边框颜色
综合：
border-top
border-top-width
borde-top-style
border-top-color
border-top:1px solid red; 只是对上边框的设置背景属性
background-color：背景颜色
background-image/background：背景图像url(xxx)背景图像默认平铺
background-repeat:
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺
no-repeat不平铺
background-position： 水平 垂直background-position： 水平 垂直
水平与垂直的属性
| Left/center/right | top/center/bottom |
| 20px/-10px | 30px; |
| 20px | center |
综合：
background-position: center center| background：颜色 | url | no-repeat | 水平位置 | 垂直位置 |
| backgournd：red | image/1.jpg | repeat-x | left | center; |
| backgournd：red | image/1.jpg | repeat-x | 20px | 50px; |
行内元素及块元素
行元素
<span>
<img/>
<a>
<input />
<select>块元素
<h1>
<p>
<div>
<ul>
<li>
<form>元素转换
display: 显示
Inline: 行内元素 不独占一行，不能设置宽度高度
Block：块元素 独占一行，能设置宽度高度
Inline-block：行内块元素 不独占一行，能设置宽度高度
None：隐藏第6章、HTML表格与表单
表格
表格：table
行：<tr></tr>
单元格：<td></td>
表头：<th></th>
内容居中加粗
表标题：<caption></caption>/*例子*/
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</table>
</body>
</html>认识表单、认识表单、创建表单、input控件
表单
<form> </form>
<input type=""/>表单输入控件
<textarea> </textarea>定义多行文本框（文本域）
<select size> </select>定义一个下拉列表
size指定下拉菜单的可见选项数
<option>用selected属性时，当前项就为默认选中项
action用于指定接收并处理表单数据的url地址
method用于设置表单数据的提交方式，其取值为get和post创建表单
<form action=”url地址” method=”提交方式” name=”表单名称” > </form>例子
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="fname">姓名：</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="city">城市：</label><br>
<select id="city" name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select><br>
<label>性别：</label><br>
<input type="radio" id="male" name="gender" value="男">
<label for="male">男</label><br>
<input type="radio" id="female" name="gender" value="女">
<label for="female">女</label><br>
<input type="submit" value="提交">
</form>
</body>
</html>input控制
P143表6-2
| 属性 | 属性值 | 描述 |
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| hidden | 隐藏域 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示宽度 |
第7章、浮动与定位
浮动
float属性、clear属性 元素的定位属性、利用盒子模型与浮动进行页面布局
float：left左浮动 right右浮动 none不浮动
clear：清除当前元素的浮动对其后元素影响。
left清除左侧浮动影响 right清除右侧浮动影响 both同时清除左右两侧浮动影响
overflow：hidden清除子元素浮动对父元素的影响。定位
相对定位：
相对自己【本身】原来的位置变化。保留原位置
绝对定位：
相对于【父元素的位置】变化。 记得：在父元素中，对父元素设置为相对或者绝对定位，这样子元素的绝对定位才会有效。不保留原位置
固定定位属性：
postion：relative相对定位
absolute绝对定位
fixed固定定位
static自动定位位偏移量：
top：顶部
left：左侧
right：右侧
bottom：底部style：风格
type：类型
font：字体
text：文本
3399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
