介绍：
HTML 是网页内容的载体。包括文字，图片，信息等用户浏览的信息
CSS 样式是改变内容外观表现。像字体，颜色，背景，边框等
JavaScript 是实现网页上的特效效果。如鼠标滑过背景颜色改变，鼠标滑过有弹出信息等
html的基本格式：
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
注释：<!--注释的内容 -->
head
- meta 是自闭合的
- 指定文件编码
<meta charset='UTF=8'> 等同于 <meta http-equiv="content-type" content="text/html;charset=utf-8">
- 指定文件编码
-
- 刷新和跳转
<meta http-equiv="Refresh" content="1"> # 1秒刷新一次页面 <meta http-equiv="Refresh" content="5;url=http://www.baidu.com"> #5秒钟之后跳转到www.baidu.com
- 刷新和跳转
-
- 关键字和描述
<meta name="keywords" content="python,django,linux"> <meta name="description" content="django是基于python开发的一款web框架">
- 关键字和描述
-
- ie搜索引擎
- title 网页头部信息
<title>第一个网页</title>
- link
- icon
<link rel="icon" sizes="192x192" href="https://docs.djangoproject.com/s/img/icon-touch.e4872c4da341.png">
- stylesheet
<link rel="stylesheet" href="newcss.css"> #导入css文件 #newcss.css .abc{ color:red; font-size: 20px; } #后面可以在body里面引用该css文件里面的样式： <div class="abc" >lalalalal</div>
- icon
- style 在head里定义全局的css样式
<style> .css1{ color: greenyellow; font-size: 25px; } </style> #可以在body里面使用它 <body> <div class="css1">test</div>
body
符号： 可参考 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
常用符号： > （>）
< （< ）
& （&）
空格 ( )
标签分为：块级标签，行内标签
举个栗子：
<body>
<div style="background-color: wheat">Hello div</div> #div是块级标签，独占一行
<span style="background-color: wheat">Hello span</span> #span标签是行内标签，非独占一行
#为了效果明显这里加上一个背景色
</body>
Hello div
Hello span
可以通过chrome浏览器Fn+F12 ，用剪头指向内容判断是块级标签还是行内标签。
（ 这里get了一个小技能，ctrl+shift+p 然后输入capture full size screenshoot可以截图整个页面的内容Hhhhh...）
块级标签 默认独占一行
常用块级标签：dhp
行内标签（行级标签） 默认不会独占一行
常用行内标签：span，img，a，lable，input，form
- span 默认没有样式的一块。行内标签。
- a 标签
- 超链接
<a href="home.html">home page</a> #点击homepage 跳转到home.html <a href="https://docs.djangoproject.com">Django官网</a> #点击Django官网，跳转到这个网址 <br> <a href="http://www.baidu.com" target="_blank">百度</a> #点击百度，在新的标签页打开这个网址
-
- 锚
<a href="#m1">第一章</a> <br> <a href="#m2">第二章</a> #点击第二章这个超链接就会跳到文章下文的第二章内容 <br> <br> <div id="m1" style="height: 2000px;background-color: beige">第一章内容</div> <div id="m2" style="height: 2000px;background-color: pink">第二章内容</div>
在html里面，每一个标签都能设置id，且id不可跟其他id重复，id唯一
- 锚
- img标签
<img title="love django" src="1.png"> # src 导入图片； title 将鼠标放到图片上会显示这个字
# src和title是img标签特有的属性
- select 标签
View Code<select> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option selected="selected">武汉</option> </select> #一般会给每个option设置一个value # option里面selected="selected" 表示默认选中下拉框里的
View Code<select multiple="multiple" size="5"> <option>北京</option> <option>上海</option> <option>深圳</option> <option selected="selected">武汉</option> </select> # size属性 下拉框里显示几个 # multiple属性 一次可以选中多个
View Code<select> <optgroup label="广东省"> <option>深圳</option> <option>广州</option> </optgroup> <optgroup label="湖北省"> <option>武汉</option> <option>黄石</option> </optgroup> </select> # optgroup不可选，将下面的option分组，再选择option
常用标签：
- textarea 文本框 如果要将数据提交到form需要加name
<textarea>默认内容哈哈哈</textarea>
- input标签
- text 文本框
<div>主机名：<input type="text" value="默认值哈哈"></div> #value设置一个默认值
主机名：
- text 文本框
-
- radio 单选框
<div>男：<input name="gender" type="radio"></div> <div>女：<input name="gender" type="radio"></div> #radio类型的，name相同的时候才会互斥，二选一
#checked 默认选中一个男：女： - checkbox 复选框
<div>湖北<input type="checkbox" checked="checked"></div> <div>广东<input type="checkbox"></div> <div>上海<input type="checkbox"></div> #checked="checked"默认选中
湖北广东上海 - file 上传文件 (如果需要提交到后台，需要特殊的设置）
如果想要提交文件到后台，需要在其所在的form标签添加 <form action="" enctype="multipart/form-data" method="post">
<input type="file" name="user"> </form> - password 密码框
密码：
-
submit 提交数据到后台
- radio 单选框
Form表单 提交数据
提交到form表单里的 可以是selected，input，textarea标签里的数据
action参数：规定当提交表单时向何处发送表单数据。
select：
<form action="http://127.0.0.1:8000/formapp/index/"> <select name="city"> #这里的name相当于字典的key <option value="111">深圳</option> #value是给key取名 <option value="222">广州</option> <option value="333">惠州</option> </select> <input type="submit" value="提交"> </form> django，views.py配置： def index(request): print("POST:",request.POST) print("GET:",request.GET) return HttpResponse('ok') #点击提交按钮之后，查看： POST: <QueryDict: {}> GET: <QueryDict: {'city': ['111', '222', '333']}> "GET /formapp/index/?city=111&city=222&city=333 HTTP/1.1" 200 2
如果没有设置value值：
"GET /formapp/index/?city=%E6%B7%B1%E5%9C%B3&city=%E5%B9%BF%E5%B7%9E&city=%E6%83%A0%E5%B7%9E HTTP/1.1" 20
0 2
input-text类型：
<form action="http://www.baidu.com"> #action指定提交的位置，把数据提交到百度 <div>主机名：<input name="host" type="text" value="127.0.0.1"></div> #value设置一个默认值 <div>端口：<input name="port" type="text"></div> #必须指定name，提交数据到后台，是以字典的形式，name就是key <div>密码：<input name="password" type="password"></div> <input type="submit" value="提交"> #提交按钮 </form>
input-radio类型：
<h1>性别</h1>
<label for="boy">男：</label>#lable标签
<input name="gender" type="radio" id="boy" value="0"> #name="gender"是key，value是值
<label for="girl">女：</label>
<input name="gender" type="radio" id="girl" value="1">
<input type="submit" value="提交">
input-checkbox类型：
<form action="http://127.0.0.1:8000/formapp/index/" > <label> 篮球<input name="favor" type="checkbox" value="1"> 足球<input name="favor" type="checkbox" value="2"> 羽毛球<input name="favor" type="checkbox" value="3"> </label> <input type="submit" value="提交"> </form>
input-file类型： （需要加上 enctype="multipart/form-data" method="post"）
<form action="http://127.0.0.1:8000/formapp/index/" enctype="multipart/form-data" method="post"> <input type="file" name="upload_file"> <input type="submit" value="提交"> </form> 测试django，views.py def index(request): print("FILE:",request.FILES) print("POST:",request.POST) print("GET:",request.GET) 结果： FILE: <MultiValueDict: {'upload_file': [<InMemoryUploadedFile: test.txt (application/octet-stream)>]}> POST: <QueryDict: {}> GET: <QueryDict: {}> [03/Jan/2019 15:58:09] "POST /formapp/index/ HTTP/1.1" 200 2
lable标签 点击关键字，会自动选中对应的框
<label> 姓名:<input type="text"> </label> <label for="hunfou">婚否：</label> #for参数的值等于id的值 <input id="hunfou" type="checkbox">
例二：
<input id="radioA" type="radio" name="agree" value="1" checked="checked"> <label for="radioA">我同意</label> <input id="radioB" type="radio" name="agree" value="0"> <label for="radioB">我不同意</label>
Table 表格
tr 代表行 td列（必须包含在tr行里面）
<table border="2"> # border加边框的 <thead> #表头 <tr> #行 <th>姓名</th> #头部里的列，th <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> #表内容 <tr> <td>张一</td> <td>28</td> <td>男</td> </tr> <tr> <td>张二</td> <td>20</td> <td>女</td> </tr> </tbody> </table>
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张一 | 28 | 男 |
| 张二 | 20 | 女 |
ul ol dl li 列表相关
<ul>
<li>111</li> #li列表
<li>222</li>
</ul>
<ol>
<li>abc</li>
<li>def</li>
</ol>
<dl>
<dt>dt标题一</dt>
<dd>内容一</dd>
<dd>内容二</dd>
<dt>dt标题二</dt>
<dd>dd内容一</dd>
<dd>内容二</dd>
</dl>
- 111
- 222
- abc
- def
- dt标题一
- 内容一
- 内容二
- dt标题二
- dd内容一
- 内容二
fieldset 就是下面这个框框
<fieldset>
<legend>内容</legend> #框框上的字
<div>段落1：</div>
<div>段落2：</div>
</fieldset>
