1.HTML
1.1 初识HTML
<!--Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档--
<!DOCTYPE html>
<!--html开头-->
<html lang="en">
<!--定义内在的内容-->
<head>
<!--自闭合标签-->
<meta charset="UTF-8" />
<!--刷新和跳转-->
<!--<meta http-equiv="Refresh" Content="2; Url=http://www.baidu.com" />-->
<!--关键词-->
<meta name="keywords" content="python,dalong" />
<!--页面标题--><!--标签属性-->
<title>Python之路</title>
<!--链接标题图标-->
<link rel="shortcut icon" href="favicon.ico">
</head>
<!--定义客户看到的内容-->
<body>
Python
</body>
<!--html结尾-->
</html>
1.2 标签分类
- 块级标签：自己占一行
a、span、select
- 内联标签：内容是多少占多少
div、h1、p
1.3 符号
< 小于号 < > 大于号 > 空格
1.4 <br /> 换行
1.5 <p> 段落，段落之间是有空行的
1.6 input系列
1.7 form
1.7.1 acton
method enctype ==>上传文件
1.8 <a></a> 跳转标签
<!--寻找页面中id=i1的标签，将其标签放置在页面顶部--> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <!--id每一个标签的id属性值不允许重复；id属性可以不写--> <div id="i1" style="height: 500px";>第一章内容</div> <div id="i2" style="height: 500px";>第二章内容</div> <div id="i3" style="height: 500px";>第三章内容</div>
1.8.1 标题
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
1.9 form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<form action="https://www.sogou.com/web" method="get">-->
<!--<input type="text" name="query" />-->
<!--<input type="submit" value="提交">-->
<!--</form>-->
<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
用户名<input type="text" name="query" />
密码<input type="password" name="pwd" />
男<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>
<p>文件：
<input type="file" name="file">
</p>
<p>
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<input type="submit" value="提交">
</form>
<hr />
<form>
<input type="text">
<input type="submit" value="提交">
</form>
</body>
</html>
1.11 table标签
1.11.1 基本应用
1.11.1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格-->
<table border="1">
<!--表头-->
<thead>
<!-- 标题行-->
<tr>
<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>
</body>
</html>
1.11.1.2 显示效果
|
第一列 |
第二列 |
第三列 |
第四列 |
|
第一列 |
第二列 |
第三列 |
第四列 |
|
第一列 |
第二列 |
第三列 |
第四列 |
|
第一列 |
第二列 |
第三列 |
第四列 |
1.11.2 合并单元格
1.11.2.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格-->
<table border="1">
<!--表头-->
<thead>
<!-- 标题行-->
<tr>
<th colspan="2">标题一</th>
<th>标题二</th>
<th>标题三</th>
<!--<th>标题四</th>-->
</tr>
</thead>
<!--表体-->
<tbody>
<!--表行-->
<tr>
<td>内容一</td>
<td rowspan="2">内容二</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>
</body>
</html>
1.11.2.2 页面显示效果
|
标题一 |
标题二 |
标题三 |
|
|
内容一 |
内容二 |
内容三 |
内容四 |
|
内容一 |
内容三 |
内容四 |
|
|
内容一 |
内容二 |
内容三 |
内容四 |
1.12 select ,textarea
1.13 ul/ol/dl
1.14 iframe,fieldset
2.CSS
层叠样式表
2.1 效果
2.2 小结
2.3 存放位置
- 单独css文件（优先级最低）
- html头部
- 标签属性（优先级高）
2.4 display
- none
- inline
- block
- inline-block
2.5 cursor
2.6 边距
2.6.1 margin外边距（本身不增加）
2.6.2 padding内边距（本身增加）
2.7 float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: green;float: left">o</div>
<div style="width: 20%;background-color: beige;float: right">x</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
2.8 position
- relative
- absolute--固定窗口，滚动移动
- fixed--固定，窗口
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 1000px;background-color: #ddd;"></div>
<div style="position: fixed;right:200px;bottom:100px;">返回顶部</div>
</body>
</html>
relative+absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
<div style="height: 200px;background-color: red;">
<div style="position: absolute;bottom: 0;right: 0;">111</div>
</div>
</div>
</body>
</html>
时间： 2024-10-06 23:15:58