HTML笔记
一套规则,浏览器认识的规则，常用20个标签 开发者： 学习html规则 开发后台程序： - 写html文件（充当模板） - 数据库中获取数据，替换html文件指定位置（web框架） 本地测试 - 浏览器直接打开 - pycharm服务器 编写htnl文件 - doctype 对应关系 - htnl标签，标签内部可以写属性 ,只能有一个 - 注释`<!---->` 标签分类 - 自闭合标签`<meta>` - 主动闭合标签` <title></title>` head标签 - meta标签 编码，跳转，刷新，关键字，描述，ie兼容 ` <meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;IE=IE7">`优先由高版本打开 - title 标题 - link 图标 - style - script body标签 - 特殊符号 空格 ` ` 大于号` > ` 小于号` <` - 参考：http://tool.oschina.net/commons?type=2 - p标签：段落 br标签：换行推荐写法：`<br />` - h1-h6 标签总结： - 块级标签（占满一行） h(加大加粗),p（段落之间有间距）,div（白板） - 行内标签（内联标签，沾满内容）span（白板） 标签之间可以嵌套 标签存在的意义，css操作，js操作 浏览器的审查元素 - 定位 - 查看样式 input标签 type text 文本 name value password 密码 name value submit 提交 value button 按钮 value radio 单选框 name(相同则互斥) value 默认选中checked="checked" checkbox 复选框 name 批量获取数据 value 默认选中 file 文件 依赖于：form属性 enctype="multipart/form-data" reset 重置 textarea 多行文本 select 下拉框 - selected默认选中 - size 选中个数 - multiple 多选 - optgroup 分组显示 a标签 - 跳转 - 锚点 href="#标签id" 标签id不允许重复 img标签 - src图片地址 alt图片失效文字 title提示文字 列表 - 无序列表ul li - 有序列表ol li - 定义列表dl dt dd 表格table - 表头thead tr th - 表体tbody tr td 合并列 colspan 合并行 rowspan label标签 -与input配合使用，点击文字，使得关联标签获得光标 fieldset 字段框 legend 标题
代码实例
头部示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta http-equiv="refresh" content="3"> 3秒定时刷新--> <!--<meta http-equiv="refresh" content="3, http://www.baidu.com"> 3秒后自动跳转到新页面--> <meta name="keywords" content="关键字1,关键字2"> <meta name="description" content="描述信息"> <!--<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> 兼容ie，以ie7模式打开--> <title>Title</title> </head> <body> <h1>hello world<h1> <h1>time:{{time}}</h1> <!--这里的{{time}}会在服务器端被替换掉--> </body> </html>
输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Input</title> </head> <body> <form action="" enctype="multipart/form-data"> <div> <fieldset> <legend>输入信息</legend> <p>输入框：</p> <label for="user">用户名：</label> <!--点击label光标定位到input--> <input id="user" type="text" name="username" > <p>密码框：</p> <label for="passwd">密码：</label><input id="passwd" type="password" name="pwd" > </fieldset> <p>性别（单选框）：</p> 男：<input type="radio" name="gender" value="man" checked="checked"> 女：<input type="radio" name="gender" value="woman"> <p>爱好（复选框）：</p> 篮球：<input type="checkbox" name="hobby" value="Basketball" checked="checked"> 足球：<input type="checkbox" name="hobby" value="Football"> <p>上传文件</p> <input type="file" name="filename"> <p>多行文本输入</p> <textarea name="text">默认值</textarea> <p>下拉框</p> 默认显示 <select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select> 默认选中 <select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou" selected="selected">广州</option> </select> 显示个数 <select name="city" size="3"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou" selected="selected">广州</option> </select> 多行选择 <select name="city" size="3" multiple="multiple"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou" selected="selected">广州</option> </select> 分组显示 <select name="city"> <optgroup label="北方"> <option value="beijing">北京</option> <option value="shanghai">上海</option> </optgroup> <optgroup label="南方"> <option value="guangzhou" selected="selected">广州</option> <option value="shenzheng" selected="selected">深圳</option> </optgroup> </select> </div> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
显示效果：
a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <p id="i1" style="height:600px;">第一章</p> <p id="i2" style="height:600px;">第二章</p> <p id="i3" style="height:600px;">第三章</p> <p id="i4" style="height:600px;">第四章</p> </body> </html>
百度接口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--https://www.baidu.com/s?wd=知道--> <form action="https://www.baidu.com/s"> <input type="text" name="wd" value="默认值"> <input type="submit" value="搜索"> </form> </body> </html>
img图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#"><img src="img/sun.jpg" alt="图片不存在显示文字" title="鼠标经过提示文字" style="height:500px;width:500px"></a> </body> </html>
列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>无序列表</p> <ul> <li>项目</li> <li>项目</li> <li>项目</li> </ul> <p>有序列表</p> <ol> <li>项目</li> <li>项目</li> <li>项目</li> </ol> <p>定义列表</p> <dl> <dt>标题</dt> <dd>描述</dd> <dd>描述</dd> <dt>标题</dt> <dd>描述</dd> <dd>描述</dd> </dl> </body> </html>
显示效果
登陆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <form action="/" method="post"> <!--get请求头发送内容，post请求体发送内容--> <input type="text" name="username"> <input type="password" name="pwd"> <input type="button" value="按钮"> <input type="submit" value="提交表单"> <!--字典{"username": "xxx", "pwd": "xxx"}--> </form> </body> </html>
显示效果
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> </thead> <tbody> <tr> <td>第二行，第一列</td> <td>第二行，第二列</td> <td>第二行，第三列</td> </tr> <tr> <td rowspan="2">行合并</td> <td>第二行，第二列</td> <td>第二行，第三列</td> </tr> <tr> <td colspan="2">列合并</td> </tr> </tbody> </table> </body> </html>
显示效果
