html
HTML
HTML：超文本编辑语言
测试代码
- 直接通过浏览器打开
- 使用pycharm打开测试
编写html文件
- doctype对应关系
- html标签内部可以写属性
- 注释：<!-- 注释的内容 -->
标签分类
- 自闭合标签： <meta charset="UTF-8" />
- 主动闭合标签： <title> </title>
- 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
- 行内标签(内联标签)： span（白板）
标签
标签之间可以嵌套，标签存在的意义，定位操作，css操作，js操作
head 标签
meta # 标签：编码，跳转，刷新，关键字，描述，IE兼容（<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> ） title # 标签：网页信息头部 link # 标签：设置图标 网页图标 style # 标签：设置格式，属性 script # 标签：
实例
<!DOCTYPE html> HTML5.0 <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" Content="3">--> 刷新 <!--<meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com">--> 跳转 <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/> <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/> <title>HTML study</title> </head>
body 标签
Hx系列 标签
<h1>HTML</h1> <h2>HTML</h2> <h3>HTML</h3> <h4>HTML</h4> <h5>HTML</h5> <h6>HTML</h6>
p 标签
段落标签，块标签
<p> </p>
strong 和 em
加入强调语气，字体加粗。
<strong> </strong> <!-- 强调加粗 --> <em> </em> <!-- 斜体 -->
br 标签
br，换行
<br />
特殊符号
<!-- 空格 --> > <!-- 大于号 --> < <!-- 小于号 -->
hr 标签
hr，水平分割线
ul 标签
ul，无序列表
<ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul>
ol 标签
ol，有序列表
<ol> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ol>
dl 标签
dl，定义列表
<dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl>
table 标签
用法
<table> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> </tbody> </table>
表格边框属性
- border： 边框线的宽度
- cellspacing： 单元格间的距离
<table border='1' cellspacing='0'> </table>
添加table 标题
<table> <caption>table 标题 </caption> <thead><tr></tr></thead> <tbody><tr> </tr></tbody> </table>
合并单元格
- colspan： 横向合并，合并列数
- rowspan： 纵向合并，合并行数
<table border="1" cellspacing="0"> <thead><tr> <th>表头1</th> <th colspan='2'>表头2</th> </tr></thead> <tbody><tr> <td>1</td> <td rowspan='2'>2</td> <td>3</td></tr> <tr> <td>1</td> <td>3</td> </tr></tbody> </table>
a 标签
a标签：跳转和锚的作用
<!-- 跳转 --> <a href="www.baidu.com" title="鼠标悬浮在链接上，显示信息" target="_blank">百度</a> <!-- 锚 href='#某个标签的ID' 标签的ID不允许重复 --> <a href="#i1">第一章</a> <div id="i1" style="height:600px;">第一章的内容</div>
image 标签
<img src="1.jpg" title="鼠标放上去显示该内容" style="height: 200px;width: 200px;" alt="图片不存在时显示该内容"> <!-- 如果保证图片不失真，只设置宽度和高度中的一个 -->
input 标签
input type='text' - name属性，value="默认值" placeholder="提示字符" input type='password' - name属性，value="默认值" placeholder="提示字符" input type='submit' - value='提交' 提交按钮，表单 input type='button' - value='登录' 按钮 input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥，checked指默认选中） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" input type='rest' - 重置 <!-- 注：
checked属性：默认选中 checkbox类型中，name为相同，后台获取值：self.get_arguments('favor')，返回一个列表 name属性：在提交表单后，后台根据name可以获得相应值 value属性：标签默认值 -->
实例
<p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" />
form 标签
<form action="http://www.baidu.com" method="POST"> <input type="text" name="user" /> <input type="text" name="email"/> <input type="password" name="pwd"/> <input type="button" value="登录1"/> <input type="submit" value="登录2"/> </form> <form action="https://www.sogou.com/web"> <input type="text" name="query" value="python" /> <input type="submit" value="搜索" /> </form>
select 标签
name，内部option value，提交到后台；size(标签框大小 )；multiple(多选，按住ctrl点击选择)
单选
<select name="city" > <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select>
多选
<select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select>
textarea 标签
name属性；rows：行数宽度，cols：列数宽度；多行文本输入。
<textarea name="meno" rows='10' cols='10' >asdfasdf</textarea>
label 标签
用于点击文字，使得关联的标签获取光标
<label for="username">用户名：</label> <input id="username" type="text" name="user" />
div 标签
<div>1</div> <div>2</div> <div>3</div>
span 标签
<span>hello</span> <span>hello</span> <span>hello</span>
fieldset 标签
<fieldset> <legend>登录</legend> <label for="username">用户名：</label> <input id="username" type="text" name="user" /> <br /> <label for="pwd">密码：</label> <input id="pwd" type="text" name="user" /> </fieldset>
