文章目录
- 1.html：HTML（用于创建网页结构），CSS（对页面进行美化），JavaScript（用于与用户交互）
- 2.文本标签：字体属性
- 3.a标签：anchor(锚) 超链接
- 4.列表标签：list (嵌套)
- 5.图像标签：img标签
- 6.标签分类：div，span
- 7.表格标签：快捷键，table(嵌套)
- 8.合并单元格：rowspan="2"
- 9.实体字符：copy
- 10.form表单标签：和列表或表格标签一样不能单独，需嵌套
- 11.input标签：type/name/value/checked属性
- 12.select和textarea标签：< form >下
- 13.css三种引入方式：< style >
- 14.css三种基本选择器：优先级：id > class > 标签tag
- 15.扩展选择器：层级/并集/属性/伪类
- 16.css属性：背景/文本/字体/边框/浮动/展示
- 17.盒子模型：每个标签都可看成一个盒子，width height border，padding margin
- 18.注册案例：中间 < div > < form >
- 19.css的优先级
1.html：HTML（用于创建网页结构），CSS（对页面进行美化），JavaScript（用于与用户交互）
#两种软件架构
1. C/S : client to server 客户端对服务端
2. B/S : browser to server 浏览器对服务端
前后端的概念
1. 前端: 直接跟用户打交道
1. 大前端: 网页,app,小程序...
2. 前端: 网页
2. 后端(后台) : 提供数据支持 (服务器)
前端的学习
1. html + css : 标签语言
2. JavaScript : 编程语言
3. Jquery : 基础框架
4. BootStrap : 高级框架
//1111111111111111111111111111111111111111111111111111111111111111
开发工具: idea (HBuilder)
运行环境: 浏览器(google : chrome)
# 浏览器
-- 1. 内核 : 引擎
a. IE : MS -> edge
b. Chrome : google
c. safari : apple
d. firefox : 火狐
e. Opera : 欧朋
-- 2. 外壳(皮肤)
360浏览器
前端开发: 适配(写了一套网页)
//1111111111111111111111111111111111111111111111111111111111111111111111
## HTML：HyperText Markup Language 超文本标记语言，html的语法不需要像xml那么严谨, 浏览器会自动补全
1. 超文本 : 不仅仅是文本(文本,图片,超链接...)
2. 标记语言 : 标签
File-New-Project-Static Web，右击New-HTMLFile。
<!DOCTYPE html>
<!-- 文档声明 : 文档类型html 版本5.0
H5 : html 5.0
html5.0 + css3.0 + js
Html基础结构
1. 根标签 : 必须名为html
2. head标签 : 头部
元标签: 编码utf-8
title: 网页的标题,显示在标签栏
3. body标签 : 主体
网页主体内容写在这里面
标签分两类
1. 成对标签 : <start> 内容 </end>
2. 单独标签 : <自关闭/>
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello Html
<hr> <!-- 横线 -->
<hr/>
<div>div </div> <!-- 浏览器自动解析加上闭标签 -->
xx
</body>
</html>
2.文本标签：字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. h1: headline 内容标题。title：网页标题
编号: 1~6 , 大到小
2. hr : horizontal 水平线
3. font : 字体
1. face : 字体样式
2. color:颜色
3. size : 大小
1~7 小到大
4. b : bold 加粗
5. i : italic 斜体
6. br : break line 换行(间距比较小)
7. p : paragraph 段落也是换行 (间距比较大)
html属性不好用:
1. 不是所有的标签属性都一样
A标签有abc属性 B标签只有c属性
2. 不同的标签的同种属性效果可能不同
A标签的a属性大小 B标签的a属性长度
属性(以hr标签为例):
1. size 大小(高度)
单位 : px (pixel 像素) 1920*1080 fhd
2. color 颜色
1. 单词
2. RGB(red green blue : 光三原色)
每个颜色取值(0~255 -> 16进制 00~ff)
#ff0000
3. width 宽度
1. 固定
2. 百分比 : 默认占浏览器的显示宽度
4. align : 排列
left center right
-->
中文
<font face="楷体">中文</font>
<font face="楷体" color="#a0522d">中文</font>
<font face="楷体" color="#a0522d" size="1">中文1</font>
<font face="楷体" color="#a0522d" size="3">中文3</font>
<font face="楷体" color="#a0522d" size="7">中文7</font>
<b>
<i>
<font face="楷体" color="#a0522d" size="8">中文8</font>
</i>
</b>
<hr>
<h1>何以生肖莫</h1>
NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...
<hr>
<hr size="50px" color="green"/>
<hr size="50px" color="pink"/>
<hr size="50px" color="#ffff00" width="500px" align="left"/>
<hr size="50px" color="#000000" width="50%" align="center"/>
<hr size="50px" color="#FFB3D2" width="50%" align="right"/>
<hr>
NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪... <br>
NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪... <br>
<p>NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...</p>
<p>NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...</p>
</body>
</html>
3.a标签：anchor(锚) 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 必要属性: href (hypertext reference 超文本链接)
1. 远程地址: 网址
2. 本地地址: 当前页面所在的网页位置
3. 发邮件(h5): 了解
4. 锚点: 1. 设置锚点: 给网页中的某个标签添加一个属性 id (值唯一性)
2. 跳转: a标签的href = #id值
5. # : 当前网页(测试)
2. target
1. _self : 自己 (默认)
2. _blank : 新的页面
3. title : 鼠标停留在这个标签的提示内容
-->
<h1 id="start"> h1</h1>
<a>百度一下,你就知道</a> <br>
<a href="http://www.baidu.com">百度一下,你就知道</a> <br>
<a href="00_基本语法.html">基本语法</a> <br>
<a href="mailTo:liuyan@163.com?subject=约会&cc=高圆圆">发邮件</a> <br>
<a href="#start">回到h1的位置</a> <br>
<a href="#">当前页面</a> <br>
<hr>
<a href="http://www.baidu.com" >百度一下,你就知道</a> <br>
<a href="http://www.baidu.com" target="_self">百度一下,你就知道</a> <br>
<a href="http://www.baidu.com" target="_blank" title="点击了解更多">百度一下,你就知道</a> <br>
</body>
</html>
4.列表标签：list (嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 有序列表（ol li） order list
1. type属性
1. 1 默认使用数字序列
2. a,A 使用字母序列
3. i,I 罗马数字
2. 无序列表（ul li） unordered list
1. type属性
1. disc ● 默认
2. circle ○
3. square ■
-->
<h1>奥运奖牌榜</h1>
<ol type="I">
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ol>
<h1>优秀男性榜</h1>
<ul type="square">
<li>东哥</li>
<li>坤哥</li>
<li>凡哥</li>
</ul>
</body>
</html>
5.图像标签：img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 必要属性src: 图片的地址
a. 本地地址
b. 远程地址
2. alt :图片加载失败的提示
3. width / height：宽/高
原图片: 480*320
特点: 设置单边, 另一边会等比例缩放
4. title : 鼠标放上去有提示
-->
<img src="img/a.jpg" alt="查无此图片" title="呵呵">
<img src="img/b.jpg" alt="查无此图片">
<!-- <img src="https://img.ixiumei.com/uploadfile/2019/0422/20190422095425634.jpg" alt=""> -->
<img src="img/a.jpg" alt="查无此图片" width="160px">
<img src="img/a.jpg" alt="查无此图片" height="320px">
<img src="img/a.jpg" alt="查无此图片" width="320px" height="240px">
</body>
</html>
6.标签分类：div，span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 按是否包裹内容
1. 成对标签
2. 单独标签
2. 按是否自动换行
1. 块级标签: block -> 自动换行: h1
div : divide + css
2. 内联标签: inline -> 不会自动换行: a
span + css 取代font标签
-->
<font>font</font> <!--成对-->
<hr> <!--单独-->
<img src="" alt=""> <!--单独-->
<a href="#">嘻嘻</a> <!--成对-->
<hr>
啦啦
<h1>h1</h1>
嘻嘻 <br>
<a href="#">a</a> <br>
呼呼
<hr>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
7.表格标签：快捷键，table(嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 子标签
1. tr : table row 行
2. caption : 表格的标题 (正中上)
2. 子子标签
1. td : table data 数据
2. th : table header 数据标题(td的居中加粗)
属性: 1. border : 边界
2. cellspacing : 单元格之间的距离 (默认2px) -> 外间距
3. cellpadding : 单元格边框到内容的距离(默认1px) -> 内间距
4. width : 表格的宽度
渲染的优先级: 属性的绘制是有顺序：先左后右, 先上后下(网页坐标原点: 左上角)
特殊的属性：align : center：1. table : 整个表格居中
2. tr : 整行的内容居中
3. td : 单元格内容居中
-->
<table border="1px" cellspacing="0px" cellpadding="10px" width="500px" >
<caption>学生成绩表</caption>
<tr>
<td align="center"><b>姓名</b></td>
<th>年龄</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td>180</td>
<td>180</td>
</tr>
<tr>
<td align="center">李四</td>
<td>18</td>
<td>180</td>
<td>180</td>
</tr>
</table>
</body>
</html>
8.合并单元格：rowspan=“2”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 先把所有的单元格都写出来
2. 然后进行合并
1. 跨越: 让其中一格占多个位置, 然后删除多余的单元格
2. 规则: 同行跨列,同列跨行
需求A: 第一行的第一列和第二行的第一列 合并
td标签的属性:
rowspan : 跨行
colspan : 跨列 (column)
需求B: 第一行的第三列和第一行的第四列 合并
-->
<table width="500px" border="1px" cellspacing="0px">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="500px" border="1px" cellspacing="0px" cellpadding="10px">
<caption>
<h1>学生成绩表</h1>
</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>100</td>
<td>zs</td>
<td>male</td>
<td>30</td>
</tr>
<tr>
<td>200</td>
<td></td>
<td></td>
<td rowspan="2">90</td>
</tr>
<tr>
<td>300</td>
<td></td>
<td></td>
</tr>
<tr>
<td>总成绩</td>
<td colspan="3">900</td>
</tr>
</table>
</body>
</html>
9.实体字符：copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
&开头 ;结尾
lt : less than <
gt : >
nbsp : 空格
-->
<
>
©版权归百度所有
¥988
< > © ¥ 可以直接写
</body>
</html>
10.form表单标签：和列表或表格标签一样不能单独，需嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
子标签: 1. input 输入框
2. select 下拉框
3. textarea 文本域
属性: 1. action: 数据提交的地址
实际: 服务器的地址
现在: # （当前网页）
2. method : 请求方式(http协议)
1. get 默认
2. post
-->
<form action="#" method="get">
用户名: <input type="text" name="username"> <br> <!-- 写name为了点击提交后username=显示在url中 -->
密码: <input type="text" name="password"> <br>
<input type="submit"> <!-- 点击有跳转效果 -->
</form>
</body>
</html>
百度服务器不会理你。
11.input标签：type/name/value/checked属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.input标签的type属性即type = :
1. text : 默认值, 文本
2. password : 密码(输入隐藏)
3. radio : 单选框(像收音机一样按一个按钮，其他按钮弹出来)
4. checkbox: 复选框
5. date : 日期
6. file : 文件
7. submit : 提交
8. image : 还是提交(通过src属性设置背景图片)
9. reset : 重置(恢复初始状态，不是清空)
10. hidden : 隐藏 (用于提交用户不需要知道的内容)
-->
<form action="#">
用户名: <input type="text" value="zs"> <br>
密码: <input type="password"> <br>
性别: <input type="radio"> 男
<input type="radio"> 女 <br>
喜好: <input type="checkbox"> 抽烟
<input type="checkbox"> 喝酒
<input type="checkbox"> 烫头 <br>
生日: <input type="date"> <br>
上传文件: <input type="file"> <br>
<input type="hidden" value="xx"> <!--这一行写了和没写一样-->
<input type="submit">
<input type="image" src="../img/btn.jpg"> <br><br>
<input type="reset">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
2.input标签的name属性即name =
问题1:点击提交, 数据没有提交?
url格式: 协议://ip:port/资源位置?name1=value1&name2=value2(问号后面就是参数)
解决: 记住但凡要提交数据的input标签,name属性必须要写
问题2:单选项如何实现单选效果?
多个input的name属性值相同即可，不相同即两个radio收音机，相同就是一个收音机，可实现单选。
3.input标签的value属性
1. 文本内容 的输入框,用户输入的内容即为value -> value可选手动设置(默认)
2. 非文本内 容的输入框,会有默认value(一般没有意义) -> 必须手动设置value
如勾选上单选框gender=on（默认） url提交没意义，所以要手动设置value="male"
4.input标签的checked属性
radio/checkbox 的默认选中: 如下两种。默认不选中直接不写就行
1. 标准: checked="checked"。以后属性名=属性值都支持标准和畸形写法。
2. 特殊/畸形 : checked
-->
<form action="#">
用户名: <input type="text" name="user" value="zs"> <br>
密码: <input type="password" name="pwd"> <br>
性别: <input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女 <br>
喜好: <input type="checkbox" name="hobby" value="smoke" checked="checked"> 抽烟
<input type="checkbox" name="hobby" value="drink" checked> 喝酒
<input type="checkbox" name="hobby" value="firehead"> 烫头 <br>
生日: <input type="date" name="birth"> <br>
上传文件: <input type="file" name="tx"> <br>
<input type="hidden" name="id" value="xx">
<input type="submit" value="我是提交"> <!--如下3行不需要提交，所以没有name属性-->
<input type="image" src="../img/btn.jpg"> <br><br>
<input type="reset">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function method01() {
alert("警告: 今天会下雨")
}
</script>
</head>
<body>
<!--
type属性(H5,了解)：
1. button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
2. color 定义拾色器。
3. date 定义日期字段（带有 calendar 控件）
4. datetime 定义日期字段（带有 calendar 和 time 控件）
5. datetime-local 定义日期字段（带有 calendar 和 time 控件）
6. month 定义日期字段的月（带有 calendar 控件）
7. week 定义日期字段的周（带有 calendar 控件）
8. time 定义日期字段的时、分、秒（带有 time 控件）
9. email 定义用于 e-mail 地址的文本字段
10. number 定义带有 spinner 控件的数字字段
11. range 定义带有 slider 控件的数字字段。
12. search 定义用于搜索的文本字段。
13. tel 定义用于电话号码的文本字段。
14. url 定义用于 URL 的文本字段。
input标签中其他属性了解:
1. size 尺寸 默认20
2. maxlength 最大输入长度
3. readonly 只读 支持畸特殊写法 只能看 不能改 数据会提交
4. disabled 不可用 支持特殊写法 只能看 不能改 数据不会提交
5. placeholder 默认提示信息
-->
<input type="button" value="按钮" onclick="method01()"> <br>
<!-- type="submit"本身有事件了 -->
<input type="color">
<input type="week">
<hr>
<form action="#">
<input type="email"> <br>
<input type="submit">
</form>
<hr>
<hr>
<input type="text"> <br>
<input type="text" size="20"> <br>
<input type="text" size="30"> <br>
<input type="text" maxlength="6"> <br>
<input type="text" value="哈哈" readonly> <br>
<input type="text" value="嘻嘻" disabled> <br>
<input type="text" placeholder="请输入你的银行卡密码"> <br>
</body>
</html>
12.select和textarea标签：< form >下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
select 标签 (下拉框)
1. name 属性 必须，和input标签name属性一样
2. 没有value
子标签: option 选项
1. value属性 必须
2. 默认选中: selected
默认: 下拉框只能选中一个, 所以name=area=value=1,2,3...
了解: multiple : 多选
-->
<!--
textare标签：文本域
1. name 必须
2. value 输入的内容
3. cols : column 列数
4. rows : 行数
-->
<form action="#">
地区:
<select name="area" id="" multiple> <!--内联标签，还是和 地区: 同行-->
<option value="1">安徽</option>
<option value="2" selected>江苏</option>
<option value="3">福建</option>
</select>
<br>
自我介绍: <br>
<textarea name="self" cols="8" rows="5"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
13.css三种引入方式：< style >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* CSS: 专业美化网页的： 1. html没有的css有 2. html有也没有css方便 */
h2{
color: blue;
}
span{
font-size: 60px;
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!--
需求A: h1标签添加红色
需求B: font设置大小
-->
<h1> <!--h1没有clor属性-->
<font color="red">标题</font>
</h1>
<font size="7">span1</font> <!--代码冗余-->
<font size="7">span2</font>
<font size="7">span3</font>
<!--1111111111111111111111111111111111111111111111111111111如下用css-->
<h2>标题</h2>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
css三种引入方式：
1. 行内样式 (写在标签行内)
1. 任何标签都有一个style属性(属性值 = css内容)
2. 语法: css属性1:值1 ; css属性2:值2... 作用范围: 只对当前标签
2. 内部样式(写在当前html内部)
1. 在html中添加一个style标签(在内部写css内容)。写在哪里无所谓, 软性规范(head标签里)
2. 语法:
选择器{
css属性1:值1 ;
css属性2:值2...
}
3. 外部样式(css单独一个文件,然后导入某个html)
1. 编写css文件(放css文件夹)：new-stylesheet
里面的内容同上删除style标签
2. 导入
link标签: rel= "stylesheet" 固定值
rel：relationship 关系
href= css文件的位置
static web默认相对路径: 当前文件所在的位置
java中默认相对路径: 当前工程
优先级:
行内 > 内部 = 外部
html被浏览器的加载顺序: 从上之下，下面内容会覆盖上面内容
-->
<link rel="stylesheet" href="../css/my.css">
<style>
span{
color: green;
font-size: 40px;
}
</style>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<font color="green" size="4"></font> <!-- 里面没写内容看不到-->
<span style="color: red;font-size: 30px">字体</span> <br> <!-- 行内样式, style作为属性 -->
<span >字体</span> <br>
</body>
</html>
14.css三种基本选择器：优先级：id > class > 标签tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. id选择器selector
1. 所有的标签都有id属性(值唯一，id值不能为数字，java中标识符以数字开头不行)
2. #id值
2. class选择器
1. 所有的标签都有class属性(值可重复)
2. .class属性值
3. 标签选择器
标签名
-->
<style>
#myid{
color: red;
}
.myclass{
color: green;
}
span{
color: blue;
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<span >span</span> <br>
<span id="myid" class="myclass">span1</span> <br>
<span class="myclass">span2</span> <br>
<span class="myclass">span2</span> <br>
<span >span3</span> <br>
<span >span3</span> <br>
<span >span3</span> <br>
</body>
</html>
15.扩展选择器：层级/并集/属性/伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
需求: 让div下的span变red
层级选择器:
父选择器 子选择器{ .xx类选择器也是子选择器
}
*/
div .xx{
color: red;
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div>div</div>
<div>
<span>div下的span</span>
<span class="xx">div下的span xx</span>
<span class="xx">div下的span xx</span>
<span>div下的span</span>
<span>div下的span</span>
</div>
<span class="xx">span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
需求: span和div都变red
并集选择器:
选择器1,选择器2...{
}
*/
span,div h1{ /*div h1是层级选择器 */
color: red;
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
<span>span</span>
<div>div</div>
<div>
<h1>div下的h1</h1>
</div>
<h1>h1</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
属性选择器：
标签名[属性名] : 选中有某种属性的标签
标签名[属性名="属性值"] : 某种属性=某个特定的值的标签
*/
font[size][face]{
color: red;
}
font[size='3']{
color: green;
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
<font size="1" face="楷体">font1</font>
<font size="3">font3</font>
<font size="5">font5</font>
<font size="3">font3</font>
<font>font</font>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
伪类选择器 : 选中某种状态下的标签
选择器1:状态{
}
超链接的不同状态:
1. 未点击 link: 蓝色
2. 鼠标悬浮 hover: 蓝色
3. 激活 active: 红色
4. 访问过后 visited: 紫色
*/
a:link{ //改变默认的颜色
color: black;
}
a:hover{
color: green;
}
a:active{
color: deeppink;
}
a:visited{
color: grey;
}
</style>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<a href="#">超链接</a> <br>
<a href="#">超链接</a> <br> <!--这个超链接点完后，上面超链接也变为紫色了，因为都为# -->
<a href="#1">超链接</a> <br>
<a href="#2">超链接</a> <br>
<a href="#3">超链接</a> <br>
<a href="#4">超链接</a> <br>
<a href="#5">超链接</a> <br>
</body>
</html>
16.css属性：背景/文本/字体/边框/浮动/展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body{
background-color: #a3d1dd;
background-image: url("../img/girl2.jpg");
background-repeat: no-repeat;
background-position: 50px 10px; 背景横着是x轴
}*/
body{
color: green; /*文本属性*/
direction: ltr; /*文本方向*/
line-height: 30px; /*行高*/
letter-spacing: 20px; /*字符间距*/
text-decoration: overline; /* 下划线underline */
text-indent: 2em; /* 首行缩进*/
font-size: 25px; /*字体属性*/
font-family: 楷体; /*相当于html中face属性*/
font-weight: bold; /* 加粗*/
font-style: italic; /* 斜体*/
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
他找若遂凌云志, 敢笑黄巢不丈夫.
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1. 边框: border: 1px green solid; solid : 实线(固体)
2. float : 浮动 clear: 清除浮动效果
*/
div{
border: 1px green solid;
width: 150px;
height: 150px;
float: left;
}
</style>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div>1</div>
<div>2</div>
<div style="clear: left">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>
如下7是接着6后面，看浏览器窗口大小，动态调整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
display : 1. inline : 内联 不换行
2. block : 块级
3. none : 隐藏
*/
div{
display: none; /*将div隐藏*/
}
span{
display: block; /*将span换行*/
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div>1</div> <!-- 换行 -->
<div>2</div>
<div>3</div>
<span>span1</span> <!-- 不换行 -->
<span>span2</span>
<span>span3</span>
</body>
</html>
17.盒子模型：每个标签都可看成一个盒子，width height border，padding margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1/2. width/height：指的是内容的宽高(边框里面: 内容 + 内间距)
3. border : 边框，有线宽
4. padding : 内间距 (边框 和 内容之间的距离)
5. margin : 外间距 (当前标签与其他标签的距离)
*/
div{
border: 1px green solid;
width: 100px;
height:100px;
padding: 10px;
padding-left: 20px;
margin: 30px;
}
</style>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div>div</div>
</body>
</html>
18.注册案例：中间 < div > < form >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
big的内容: 750px(包含3个小div)
2个side的div大小= 200 * 2 + 4 = 404
1个middle的div大小= 750-404-2 = 344
*/
#big{
border: 1px red solid;
height: 450px;
width: 750px;
margin: auto;
}
.side{
border: 1px green dashed;
width: 200px;
height: 450px;
float: left; /* 流式布局 */
}
#middle{
border: 1px blue dashed;
float: left;
height: 450px;
width: 344px;
}
</style>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div id="big">
<div class="side">1</div>
<div id="middle">2</div>
<div class="side">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#big{
border: 10px lightgrey solid;
height: 450px;
width: 750px;
margin: auto;
}
.side{
width: 200px;
height: 450px;
float: left;
}
#middle{
float: left;
height: 450px;
width: 344px;
}
</style>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div id="big"> <!--最外面-->
<div class="side">
<span style="color: orange;font-size: 20px;margin: 30px">新用户注册</span> <br>
<span style="color: grey;font-size: 20px">USER REGISTER</span> <br>
</div>
<!-- 111111111111111111111111111111111111111111111111111111111111111111111111 -->
<div id="middle">
<form action="#"> <!--4行3列的表-->
<table>
<tr>
<td>用户名</td> <!--第一列-->
<td colspan="2"> <!--跨两列-->
<input type="text" placeholder="请输入账号" size="30" style="border-radius: 5px">
</td>
</tr>
<tr>
<td>密码</td>
<td colspan="2">
<input type="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text">
</td>
<td>
<img src="../img/btn.jpg" alt="">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
</td>
<td></td>
</tr>
</table>
</form>
</div>
<!-- 11111111111111111111111111111111111111111111111111111111111111111111111111111 -->
<div class="side">
已有账号?
<a href="#" style="color: hotpink;text-decoration: none">立即登录</a>
</div>
</div>
</body>
</html>
19.css的优先级
div下面p标签，同时p标签需具有class是cp1且id是p1。
