HTML基础的文档树
<!DOCTYPE html> # 告诉浏览器使用什么样的html或xhtml规范解析html文档
<html lang="en"> # html部分
<head> # 头部信息，head头部信息内容不会被浏览器解析显示到网页
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> # 主体部分，这里定义的内容将会被浏览器解析显示到网页
</body>
</html>
块级标签与内联标签
块级标签：
不管块级标签中内容多少，总是占一行空间。
内联标签：
标签内容有多少，占用多少
会计标签与内联标签主要区别：
1. 块元素，总是在新行上开始；内联元素，和其他元素都在一行上。
2. 块元素，能容纳其他块元素或内联元素；内联元素，只能容纳文本或者其他内联元素。
3. 块元素中高度，行高以及顶和底边距都可控制；内联元素中高，行高及顶和底边距不可改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块级标签-->
<div style="background-color: red;">123</div>
<!--内联标签-->
<span style="background-color: green">123</span>
</body>
</html>
demo
P标签与br标签
# p标签，表示段落，默认的情况下仅仅多一些行距
<body>
<p>xxxx</p>
<p>oooo</p>
</body>
# 而br标签为换行
<body>
<p>xx<br/>xx</p>
<p>oooo</p>
</body>
a标签
# 当前页面跳转 <a href="http://www.baidu.com">百度</a> # 新tab页面跳转 <a href="http://www.bing.com">bing</a>
# 锚点跳转
<body>
# 定义a标签，当点击时跳转到id为i1的标签
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
# 为div标签增加id为i1，且为了展示效果，给这个div一个高500px
<div id="i1" style="height: 500px">第一章内容</div>
<div id="i2" style="height: 500px">第二章内容</div>
<div id="i3" style="height: 500px">第三章内容</div>
</body>
input标签
一个完整表单html demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--如果表单中有文件的提交，form标签中必须存在enctype="multipart/form-data"属性-->
<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
<!--用户名密码-->
<input type="text" name="eason" />
<input type="password" name="pwd" />
<!--性别单选-->
<!--配置name为相同，则两个radio互斥-->
<!--男和女在提交时并不会提交这两个内容，所以增加value，如果选择男提交value=1,女则提交value=0-->
男<input type="radio" name="gender" value="1" />
女<input type="radio" name="gender" value="0" />
<!--复选框-->
<p>
篮球<input name="favor" type="checkbox" value="1" />
足球<input name="favor" type="checkbox" value="2" />
台球<input name="favor" type="checkbox" value="3" />
</p>
<!--文件上传，要配合form标签中的enctype-->
<p>文件
<input type="file" name="hahaha" />
</p>
<p>
<select name="city">
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">北京</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<!--提交表单(form)-->
<input type="submit" value="sumbmit" />
</form>
</body>
</html>
ul（无序列表）与ol（有序列表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
</ul>
<ol>
<li>qqqqq</li>
<li>qqqqq</li>
<li>qqqqq</li>
<li>qqqqq</li>
</ol>
<dl>
<dt>DT</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dt>DT</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
</dl>
</body>
</html>
table标签
<table>
<thead>
<tr>
<!--th加粗-->
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<!--合并单元格-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<!--设置左右合并单元格，使单元格占左右两格-->
<th colspan="2">标题一</th>
<th>标题三</th>
</tr>
<tr>
<!--设置左右合并单元格，使单元格占上下两格-->
<td>内容一</td>
<td rowspan="2">内容二</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<td>内容三</td>
</tr>
</table>
</body>
</html>
CSS样式三种使用方式
# 第一种，标签直接使用style属性指定
# 多个样式使用‘;‘隔开
<div style="background-color: aqua;color: blue;">f</div>
# 第二种，在head中定义<script>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style >
.img2{
background-image: url("http://misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png");
height: 18px;
width: 18px;
background-position: 0 -140px;
}
</style>
</head>
<body>
<div class="img2"></div>
</body>
</html>
# 第三种，外部引用文件
commons.css
**************************************************
/*标签选择器*/
/*找到所有标签，应用*/
div{
color: green;
}
/*id选择器（不常用）*/
/*找到id为i1的标签，应用*/
#i1{
font-size: 56px;
}
/*class选择器（常用）*/
.c1{
background-color: red;
}
/*层级选择器*/
/*一层层找到标签，应用*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器*/
/*应用到多个class*/
.c4,.c5,.c6{
background-color: aqua;
}
========================================
test.html
**************************************************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link >
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="c1">redredred</div>
</body>
</html>
CSS标签选择器
/*标签选择器*/
/*找到所有div标签，应用*/
div{
color: green;
}
/*id选择器（不常用）*/
/*找到id为i1的标签，应用*/
#i1{
font-size: 56px;
}
/*class选择器（常用）*/
.c1{
background-color: red;
}
/*层级选择器*/
/*一层层找到标签，应用*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器*/
/*应用到多个class*/
.c4,.c5,.c6{
background-color: aqua;
}
CSS图片应用
现在有一张乘法口诀表
我要取出3X5=15的那一格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img {
/*指定背景图片为view.jpg*/
background-image: url(view.jpg);
/*取图片的高和宽*/
height: 86px;
width: 132px;
/*当高或宽超过图片时，不重复图片*/
background-repeat: no-repeat;
/*调整初始图片的坐标*/
background-position: -263px -338px;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
CSS的display与vibility
vibility: hidden; 使应用到标签消失，但标签位置（高宽）存在
display: none; 使应用到标签消失，并且位置也消失
display: inline; 将块级标签变为内联标签（非严谨概念，例如div变为内联标签，则还可以调整高度和宽度，而纯内联标签不可以）
display: block; 将内联标签变为块级标签
display: inline-block; 使标签具有块级标签，和内联标签的共同的属性
CSS margin（外边距）与padding（内边距）
例如，我们有嵌套的两层div标签，A嵌套B（A是B的父标签），而
外边距： 自身大小不变，改变自身标签到父标签的距离
内边距： 自身内容不变，该变内容到标签边缘的距离
<!DOCTYPE html>
<!--浏览器打开，找到div div CSS，修改margin与padding-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 400px;
height: 400px;
}
.div2{
width: 200px;
height: 200px;
}
div div{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
</style>
</head>
<body>
<div class="div1" style="border:5px solid red;height: 200px;background-color: blue">
<div class="div2" style="border: 5px solid black;height: 50px; background-color: green"></div>
</div>
</body>
</html>
demo
CSS 标签漂浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 500px;height:500px;border: 1px solid red;">
<div style="width: 20%;background-color: aqua;float: left">f</div>
<div style="width: 30%;background-color: rebeccapurple;float: right">e</div>
<!--注意，当上两个子标签设置了float飘起来后，这时父标签定义的高度与宽度将会受影响-->
<!--所以，需要加上以下标签，撑起父标签的高度-->
<div style="clear: both;"></div>
</div>
</body>
</html>
CSS 定位
position
fixed: 相对于浏览器窗口固定，配合top\buttom\left\right样式，将内容固定到窗口某一个位置
absolute: 绝对位置，在父标签找position: relative;，以配置relative的标签大小为绝对值，固定在某一个位置，如果找不到relative，则以全局为绝对值
relative: 配合absolute使用
CSS 透明属性
opacity: 0.6; 透明度0.6（同样可以使用background-color: rgba(0, 0,0 ,.6) 使用rgba的第四个参数定义透明度）
z-index: 10; 一般配合opacity使用，当我们做一个模态对话框时，弹出框不被遮罩层覆盖，使用z-index，是弹出框z-index大于遮罩层的z-index既弹出对话框顶层永远是对话框，然后是遮罩层，最后才是页面底层
CSS 补充
line-height: 44px; 定义行高有44px，使内容根据指定的行高居中
list-style-type: none; 去除表格的样式
时间： 2024-10-12 18:33:18