######Html与Css样式######
## 01_文本标签
h1-h6:标题
b/strong:加粗
u:下划线
s:横杠划去
 :加入空格
换行标签: br-----(第一个没有成对出现的标签)
水平分隔符标签: hr-----(第一个没有成对出现的标签)
预格式化文本标签(保留文本的原有格式): pre标签
上标和下标: sup， sub
块引用标签: blockquote
普通的文本: span --- 行内标签
普通文本的标签:div------块级标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3 style="color: aqua"><span>hello world</span></h3>
<p>hello</p>
<hr>
<p>world</p>
hello<br>
world
<blockquote style="color: blue">
x<sup>2</sup>+2x+3=5
<br>
x<sub>1</sub>=3;x<sub>2</sub>=5
</blockquote>
</body>
</html>
## 02_超链接标签<a>
<!--a标签-->
<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一个浏览器窗口并打开-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>
<!--2. 跳转到当前页面的指定位置（锚点）-->
<a href="#C1">第一个标题 </a>
<a href="#C2">第2个标题 </a>
<a href="#C3">第3个标题 </a>
<a href="#C4">第4个标题 </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<!--_blank重新打开一个网页页面-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--_parent当前页面直接跳转至百度-->
<a href="http://www.baidu.com" target="_parent">百度</a>
</body>
</html><!--标题跳转-->
<a href="#t1">第1个标题</a>
<a href="#t2">第2个标题</a>
<a href="#t3">第3个标题</a>
<h1><a name="t1">第一个标题</a></h1>
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
<h1><a name="t2">第二个标题</a></h1>
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
<h1><a name="t3">第三个标题</a></h1>
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
## 03_图片标签
<!--1. 插入图像并设置大小
src指定图片的位置， 可以是url地址， 也可以是本地的图片;
alt: 如果图片不能正常加载， 则显示alt里面的文字;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>picture</title>
<style>
.Local{
width: 20px;
height: 20px;
}
.Url{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="Local">
<img src="AJ.jpg" alt="local">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="Url">
<img src="http://img1.imgtn.bdimg.com/it/u=3348906052,3622627393&fm=26&gp=0.jpg" atl="url">
</div>
</body>
</html>
## 04_序列化标签
<!--1. 无序标签之ul和li-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>无序标签</h2>
<!--去掉ul里面的所有li标签里面的样式-->
<!--案例1： 实现水平导航栏
list-style-type: none ---- 去掉圆点
display: inline-block ---- 变为行内元素， 并且可以设置高度和宽度
width: -----可以使用300px表示， 也可以用百分比来表示； 20%
-->
<ul style="list-style-type: none">
<li style="display: inline-block;width: 5%;background: crimson">
<a href="http://www.w3school.com.cn/h.asp">HTML</a>
</li>
<li style="display: inline-block">CSS</li>
<li style="display: inline-block">JavaScript</li>
</ul>
</body>
</html>
<ul style="list-style-type: none">
<li style="display: block; width: 20%; background: azure;">HTML</li>
<li style="display: block; width: 20%; background: azure;">CSS</li>
<li style="display: block; width:20%; background: azure;">JS</li>
<li style="display: block; width: 20%; background: azure;">python</li>
</ul>
<!--2. 有序标签之ol和li-->
type可以指定有序列表符号的类型
text-decoration: none; ---去掉原有标签的文本装饰
<h2>有序标签</h2>
<ol type="A">
<li>
<a href="http://www.w3school.com.cn/h.asp">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ol>
<!--3. 嵌套标签之dl, dt和dd-->
<dl>
<dt>HTML</dt>
<dd>li</dd>
<dd>span</dd>
<dd>div</dd>
<dd>hr</dd>
<dd>sub</dd>
<dt>CSS</dt>
<dd>text-decoration</dd>
<dd>color</dd>
</dl>
## 05_表格标签
<!--
1. table代表一个表格
2. caption 表示表格的标题
3. td:列 (th 表头加粗)
4. tr: 行
5. cellpadding="3" -----设置表格的内边距
6. cellspacing="5" ----设置表格的外边距
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.server{
text-align: center;
}
</style>
</head>
<body>
<table style="width: 80%;" border="1px" cellpadding="5px" cellspacing="0px">
<caption>services</caption>
<tr class="server">
<th>主机名</th>
<th>IP地址</th>
</tr>
<tr class="server">
<td>server1</td>
<td>172.25.254.40</td>
</tr>
<tr class="server">
<td>server2</td>
<td>172.25.254.50</td>
</tr>
<tr class="server">
<td>server3</td>
<td>172.25.254.60</td>
</tr>
<tr class="server">
<td>server4</td>
<td>172.25.254.250</td>
</tr>
</table>
</body>
</html>
## 合并列单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table style="width: 80%" border="1px">
<caption>这是一个表格</caption>
<tr>
<th>主机名</th>
<!--<th>IP地址</th>-->
<!--<th>IP地址</th>-->
<!--<th>IP地址</th>-->
<th colspan="3">IP地址</th>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.1</td>
<td>172.25.0.1</td>
<td>172.25.0.254</td>
</tr>
</table>
</body>
</html>
## 合并行单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table style="width: 60%" border="2px">
<tr>
<td>IP地址</td>
<td>server1</td>
<td>server2</td>
<td>server3</td>
</tr>
<tr>
<td rowspan="2">IP</td>
<td>172.25.254.1</td>
<td>172.25.254.1</td>
<td>172.25.254.1</td>
</tr>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
</table>
</body>
</html>
## 表格嵌套标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table style="width: 80%" border="2px">
<tr>
<td>
<img src="AJ.jpg">
</td>
<td>
<ul style="list-style-type: none">
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
</td>
</tr>
<tr>
<td>
<pre>
hello
world
</pre>
</td>
<td>
<strong>houzeyu</strong>
</td>
</tr>
</table>
</body>
## 06_表单标签
<form></form>表单标签的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
<span>用户名：<input type="text"></span><br>
<span>密码：<input type="password"></span><br>
<span>出生日期：<input type="date"></span><br>
<input type="submit" value="login">
<input type="reset" value="reset">
</form>
</body>
</html>注：表单标签中method=get 在url显示操作内容；而method=post 直接跳转
type 类型里根据表单需求来选择，有文本、密码等
value 值是显示的信息
## <!--单选按钮以及多选按钮-->
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>性别：</span>
<span style="font-size: medium">男</span><input type="radio" name="gender" value="1">
<span style="font-size: medium">女</span><input type="radio" name="gender" value="2">
<br>
<br>
<br>
<br>
<br>
<span>课程</span>
<ul>
<li><span>html</span><input type="checkbox" name="html"></li>
<li><span>css</span><input type="checkbox" name="css"></li>
<li><span>javascript</span><input type="checkbox" name="javascript"></li>
</ul>
</body>
</html>
## <!--下拉列表-->
<select>
<option>选择省份</option>
<option>陕西</option>
<option>沈阳</option>
<option>成都</option>
<option>河南</option>
</select>
## <!--围绕数据的标签-->
<fieldset>
<legend>个人简介</legend>
<h1>用户登陆</h1>
<hr/>
用户名: <input type="text"><br/>
<input type="submit" value="登陆">
</fieldset>
## 总结:
1. 学习的行内标签和 块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
2. 两者的区别与特性；
1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;
2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效；
3. 如何让块级元素居中? 如何让行内元素居中?
1); 块级元素居中： margin: 0 auto
2> 行内元素居中: text-aligin:center
## CSS样式
## CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
<!--引入方式:
1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.
三种引入方式的优先级: 就近原则
-->
## CSS样式——类选择器和标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height: 100px;
border-radius:25px;
border: 1px solid blueviolet;
text-align: center;
margin: 0 auto;
padding-top: 20px;
text-shadow: 5px 5px 5px gray;
}
.num{
width: 20px;
height: 20px;
font-size: large;
padding-top: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="num">one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</body>
</html>
## CSS样式_ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#num{
width:100px;
height: 100px;
border-radius:25px;
border: 1px solid blueviolet;
text-align: center;
margin: 0 auto;
padding-top: 20px;
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<div id="num">one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</body>
</html>
## 利用CSS选择器进行分页练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
}
li {
text-decoration: none;
display: inline-block;
width: 10%;
padding-top: 5px;
padding-bottom: 5px;
background: snow;
color: #333333;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}
.active {
background: gray;
}
#pageintor {
width: 80%;
margin: 0 auto;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div id="pageintor">
<ul>
<li><a href="#">上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">...</a></li>
<li><a href="#">28</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>
扫一扫
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
