1 HTML（超文本标记语言）
简而概之，HTML使用标签描述网页。
开发者：学习HTMLl规则，写HTML文件，从数据库读取数据，替换HTML指定位置（Web框架）。
本地测试方法：- 找到文件路径，直接通过浏览器打开
- 通过Pycharm直接浏览器打开
HTML文件：
- <!DOCTYPE html> html的标准格式（即对映关系）
- 标签（tag）/ 属性（以名称/值对的形式）
- 注释 eg.<!-- 注释的内容 -->
- html标签：HTML文件只有一个
- head标签： - 编码
<meta charset="UTF-8">
- 跳转和刷新
<meta http-equiv="Refresh" content="30" /><meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />
- 关键词
<meta name="keyword" content="关键词" />
- 网页描述
<meta name="description" content="描述" />
- IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7" >
- title标签
<title>测试工具平台</title>
- link标签：设置图标
???<link rel="shortcut icon" href="icon.jpg">
- style标签
- script标签
- body标签： - 符号：eg. （空格） ; >（>）
- 段落：<p>段落之间有间距</p>
- 换行：</br>
- H标签：h1~h6，标题字体从大到小
- span标签：白板，可以嵌套使用
- div标签：白板，可以嵌套使用
- input标签：type/name/value/checked/自定义属性
???<input type="text" name="user" value="请输入用户名"> ???<input type="password" name="pwd"> ???<input type="submit" name="确认登录"> ???<input type="button" value="只是按钮"> ???<p></p> ???<input type="radio" name="gender"> 女 ???<input type="radio" name="gender"> 男 ???<p></p> ???<input type="checkbox" name="favor"checked="checked"> 绘画 ???<input type="checkbox" name="favor"> 唱歌 ???<p></p> ???<!-- 依赖form表单属性 enctype:"multipart/form-data"--> ???<input type="file"> ???<p></p> ???<input type="reset" name="重置">
- form标签：提交表单，action/method/enctype/自定义属性
<form action="http://www.baidu.com" method="get"> ???<input type="text" name="user" value="请输入用户名"> ???<input type="password" name="pwd"> ???<input type="submit" name="确认登录"> ???<input type="button" value="只是按钮"></form>
- textarea标签：多行输入
<textarea></textarea>
- select标签：下拉框
<select name="city"> ???<optgroup label="深圳市"></optgroup> ?????????<!-- 不可选项 --> ???<option selected="selected">南山区</option> ??<!-- 默认值 --> ???<option>福田区</option> ???<option>罗湖区</option></select>
- a标签：超链接，不能提交数据到后台
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a><h1 id="h">百度一下，你就知道</h1><a href="#h"></a>
- image标签：src/style/alt/title/自定义属性
<img src="微信截图.png" style="height:100px;width:100px" alt="错误图片描述" title="悬浮描述"/>
- 列表：ul/ol/dr
<ul> ???<li>第一条新闻</li> ???<li>第二条新闻</li></ul><ol> ???<li>第一</li> ???<li>第二</li></ol><dr> ???<dt>1</dt><di>2</di></dr>
- table标签：表格；tr代表行；thead代表表头；th代表表头中的列；tbody代表表体；td代表表体中的列
??<table border="1"> ??????<thead> ??????????<tr> ??????????????<th>项目名称</th> ??????????????<th>项目职责</th> ??????????????<th>项目概述</th> ??????????????<th>项目贡献</th> ??????????</tr> ??????</thead> ??????<tbody> ??????????<tr> ??????????????<td>1</td> ??????????????<td>2</td> ??????????????<td>3</td> ??????????????<td>4</td> ??????????</tr> ??????</tbody> ??</table>
- table标签：合并单元格
<tbody> ??????????<tr> ??????????????<td rowspan="2">1</td> ??????????????<td>2</td> ??????????????<td colspan="2">3</td> ??????????</tr> ???????????<tr> ??????????????<td>2</td> ??????????????<td>3</td> ??????????????<td>4</td> ??????????</tr> ??????</tbody>
- label标签：文本标签；根据Id获取光标
<label>内容</label><label for="f1">获取光标</label>
- fieldset标签
<fieldset> ???<legend>外框</legend>内容</fieldset>
- 标签的分类：- 自闭合标签：<meta> <link> <br> <input> <img>
- 主动闭合标签 ：<title> <p> <H> <div> <span> <form> <style> <script> <textarea> <select> <a> <列表> <label> <fieldset>
- 块级标签：<H> <p> <div>
- 行内（内联）标签：<span>
2 CSS（层叠样式表）
- 注释：/* */
- 直接选择器（每个标签都可以写style属性）
<div style="background-color:#dddddd;height:40px">top</div>
- Id选择器
<h1 id="h">百度一下，你就知道</h1><style> ???#h{ ???background-color:red; ???}</style>- class选择器
<h1 class="h">百度一下，你就知道</h1><style> ???.h{ ???background-color:green; ???width:40px; ???}</style>- 标签选择器
<style> ???span{ ???background-color:#dddddd ???}</style><span>bottom</span>- 层级（空格）选择器
<style> ???span div{ ???background-color:#dddddd ???}</style><span>bottom ???<div> ???这里 ???</div></span>- 组合（逗号）选择器
<style> ???span,div{ ???background-color:#dddddd ???}</style><span>bottom ???<div> ???这里 ???</div></span>- 属性选择器
<div name="text">top</div><div>next</div><style> ???div[name="text"]{ ???background-color:#dddddd ???}</style>- css三种存在方式：- 直接在标签中描述
- head标签中描述
- 以文件形式引入
<link rel="stylesheet" href="commons.css">
- css优先级：便签中style优先；编写顺序优先
- 设置style样式：- 边框：border-left/border-right等
<div style="border:2px solid black">hello world!</div>
- 高度、宽度、水平居中、垂直居中、字体加粗、字体大小
<div style="height:40px;width:80%;text-align:center;line-height:40px;font-weight:bold;font-size:20px">hello world!</div>
- float：标签堆叠
<div style="height:40px;width:20%;text-align:center;line-height:40px;font-weight:bold;font-size:20px;float:left">hello world!</div><div style="width:80%,float:left">你好，世界！</div>
<div style="clear:both; /*限制子浮框*/"></div>
- display：改变标签类型；行内标签不能设置高度
<div style="display:inline">行内标签</div><div style="display:block">块级标签</div><div style="display:inline-block">默认自己有多少占多少，但可以设置高度</div><div style="display:none">隐藏标签</div>
- margin/padding：外边距/内边距
<body style="margin:0 auto;" /*置顶且居中*/>
<div style="margin-top:0">上外边距</div><div style="padding-top:0">上内边距</div>
- position：固定位置/绝对位置
<div style="position:fixed;bottom:50px;right:50px;">返回顶部</div>
<div style="position:relative;border:2px solid red;margin:0 auto;height:200px;width:100px"> ???<div style="position:absolute;bottom:10px;left:10px">在哪里</div></div>
- position：遮盖；opacity：透明度；z-index：值大在上层
<div style="position:fixed; ?????????????opacity:0.8; ?????????????z-index:10; ?????????????background-color:black; ?????????????top:0; ?????????????bottom:0; ?????????????left:0; ?????????????right:0;"></div>
- overflow：
<div style="height:200px;width:400px;overflow:hidden /*图片超出范围则隐藏*/"> ?<img src="微信截图.png" ></div><div style="height:200px;width:400px;overflow:auto /*图片超出出现滚动条*/"> ?<img src="微信截图.png" ></div >
- hover：鼠标移动应用头部定义的样式
???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-header{ ???????position:fixed; ???????left:0; ???????right:0; ???????top:0; ???????height:50px; ???????background-color:#dddddd; ???????} ???????.pg-body{ ???????margin-top:51px; ???????} ???????.m{ ???????width:980px; ???????margin:0 auto; ???????line-height:50px; ???????} ???????.menu{ ???????display:inline-block; ???????padding: 0 10px; ???????} ???????/*当鼠标移动到当前标签上时，一下css属性才生效*/ ???????.menu:hover{ ???????background-color:black; ???????}</style></head><body> ???<div class="pg-header"> ???????<div class="m"> ???????????<a class="menu">菜单</a> ???????</div> ???</div> ???<div class="pg-body"> ???</div></body>- backgroup：repeat：no-repeat/repeat-x/repeat-y；positon/position-x/position-y
???<li>background-color</li> ???????<div style="background-color:white;height:100px"></div> ???<li>background-image</li> ???????<div style="background-image:url(‘picture.jpg‘);height:200px"></div> ???<li>background-repeat</li> ???????<div style="background-image:url(‘picture.jpg‘);background-repeat:no-repeat;height:300px"></div> ???<li>background-position</li> ???????<div style="background-image:url(‘picture.jpg‘);background-position:400px 400px;height:200px;width:200px;"></div>
- 注意点：- 默认img标签有1px的标签，因此需要去掉img标签
???<style> ???????img{ ???????border:0; ???????} ???</style>- 窗口自适应：最外层设置绝对宽度，里层设置百分比
前端-html/css
原文地址：https://www.cnblogs.com/cirr-zhou/p/9553599.html