一、head标签
1、meta 标签
1.1文档字符编码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的网页</title> </head> <body> <h1>aaa</h1> </body> </html>
1.2、meta http-equiv
页面刷新 http-equiv="refresh"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世上最牛逼的页面标题</title> <meta http-equiv="Refresh" content="5" /> </head> <body> <h1>aaa</h1> </body> </html>
请求 http-equiv="content-type"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世上最牛逼的页面标题</title> <meta http-equiv="content-type" charset="UTF-8"> <!-- IE浏览器--> <!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />--> </head> <body> <h1>aaa</h1> </body> </html>
1.3、meta 关键字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世上最牛逼的页面标题</title> <meta name="keywords" content="meta总结,html,meta,meta属性，meta跳转" /> </head> <body> <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1> </body> </html>
1.4、meta 网站描述
# meta标签可以设置网站描述信息，用于在搜索引擎搜索时，显示网站基本描述信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>野鸭子</title> <meta name="keywords" content="meta总结,html,meta,meta属性，meta跳转" /> <meta name="description" content="网站描述信息" /> </head> <body> <h1>这个栗子就别运行老子了，随便去看一个网站的源代码吧。</h1> </body> </html>
1..5、meta触屏缩放
# meta标签可以设置页面是否支持触屏缩放功能，其中各元素的含义如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标题标题标题</title> <!--支持触屏缩放--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <!--不支触屏持缩放--> <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">--> </head> <body> <h1 style=" 1500px;background-color: green;">一起为爱鼓掌吧</h1> </body> </html>
1.6、link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>野鸭子</title> <link rel="icon" href="图标文件路径"> <!--引入css和js--> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>script> </head> <body> <h1>隔壁王老汉的幸福生活</h1> </body> </html>
二、body标签
1、h1-h6标签，标题标签
<!--<hn>: n 的取值范围是1-6；从大到小，用来表示标题--> <!--独占一行--> <!--标题 变大小-->
<h1>hello world</h1><h2>hello world</h2> <h3>hello world</h3> <h4>hello world</h4> <h5>hello world</h5> <h6>hello world</h6>
2、p标签 段落 行间距
<p>哈哈哈哈</p> <p>哈哈哈哈哈</p>
3、br标签 换行
<h1>hello</h1> <h2>冯<br>俊</h2>
注意：
4、a标签 超链接标签
4.1、不加href属性，就是普通文本显示
<a>python短片</a>
4.2、加上href属性,不加值
<a href="">python短片</a> <!--文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面-->
4.3、加上href属性,并且加上值
<a href="http://www.pythonav.com" target="_self">python短片</a>
""" 跳转对应网址的页面 未访问之前是蓝色的字体颜色 访问之后是紫色的字体颜色 target属性: _self:在当前标签页打开 href属性值的那个网址 _blank:在新的标签页打开 href属性值的那个网址 """
4.4、要a标签效果，但是不刷新或者跳转页面，写法如下
<a href="#">校花网</a> <a href="javascript:void(0);">校花网</a>
5、锚点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 600px; 600px; background-color: green; } .c2{ height: 600px; 600px; background-color: red; } </style> </head> <body> <!--<a name="top">顶部位置</a>--> <div id="top">顶部位置</div> <a>皇家赌场</a> <a href="">校花网</a> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="#">校花网</a> <a href="javascript:void(0);">校花网</a> <!-- 1 未访问过时，是蓝色的字体颜色 2 访问过之后，是紫色的字体颜色 3 文字本身带有下划线 --> <div class="c1"></div> <div class="c2"></div> <a href="#top">回到顶部</a> </body> </html>
6、img标签 图片标签
<img src="1.jpg" alt=""> <img src="1.jpg" alt="这是盼盼" title="盼盼" width="100" height="100">
""" src属性:图片路径 必须写 alt属性:图片加载失败或者正在加载时提示的内容 title属性:鼠标悬浮时显示的内容,不是img标签独有的 # 不常用,通过css来控制 设置宽度 height:设置高度 """
7、div标签和span标签
# 没有任何的文本修饰效果
8、标签分类
""" 块级标签(行外标签):独占一行,h1-h6prhrdivulli 块级标签能够包含内联标签,和某些块级标签 内联标签(行内标签):不独占一行,imgaspan 只能包含内联标签,不能包含块级标签 """
9、列表标签 ul和ol标签
<ul type="none"> <li>抽烟</li> <li>喝酒</li> <li>宝剑</li> </ul> <ol type="I" start="2"> <li>大保健</li> <li>撸啊撸</li> <li>保健品</li> </ol> <dl> <dt>河北省</dt> <dd>邯郸</dd> <dd>石家庄</dd> <dt>山西省</dt> <dd>太原</dd> <dd>平遥</dd> </dl>
""" type属性，控制列表内容前面的效果的 start属性是控制有序列表标签的起始值的 """
10、表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellpadding="10" cellspacing="8"> <thead> <tr> <th>名称</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>彩霞</td> <td>18</td> <td>隐藏爱好</td> </tr> <tr> <td colspan="2">八戒</td> <!-- <td>15</td>--> <td rowspan="2">彩霞</td> </tr> <tr> <td>孙敬华</td> <td>88</td> <!-- <td>八戒，嘿嘿嘿</td>--> </tr> </tbody> </table> </body> </html>
# 表格合并(rowspan="2"纵行合并 colspan='2' :横列合并)
11、form标签 表单标签
<form action="http://127.0.0.1:8001"> </form>
""" action属性: 指定提交路径,提交到哪里去 form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径 """
12、input标签 输入框
<!--input标签,如果要提交数据,别忘了写name属性 例如:name='username' -- username='zhangjianzhi'--> <input type="text"> <!--普通文本输入框 --> <input type="password"> <!--密文输入框 --> <input type="submit" value="登录"> <!--提交按钮 触发form表单提交数据的动作 --> <input type="reset"> <!--重置按钮 清空输入的内容 --> <input type="button" value="注册"> <!--普通按钮 不会触发form表单提交数据的动作 --> <input type="date"> <!--时间日期输入框 --> <input type="file"> <!--文件选择框 --> <input type="number"> <!--纯数字输入框 --> <!--单选框--> <!--性别--> <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女 <!--复选框(多选框)--> <!--喜欢的明星:--> <input type="checkbox" name="hobby" value="1"> 胡歌 <input type="checkbox" name="hobby" value="2"> 周杰伦 <input type="checkbox" name="hobby" value="3"> 林俊杰 <!--注意：选择框写的时候，尽量将name属性和value属性都写上-->
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8001" > <div> <h1>欢迎来到31期spa会所登录页面</h1> 用户名：<input type="text" name="username" value="刘鑫"> <!-- username:panpan --> <br> 密码：<input type="password" name="password"> <br> 性别： <input type="radio" name="sex" value="1"> 女 <input type="radio" name="sex" value="2"> 男 <input type="radio" name="sex" value="3"> 没准儿 <br> 爱好： <input type="checkbox" name="hobby" value="1"> 喝酒 <input type="checkbox" name="hobby" value="2"> 抽烟 <input type="checkbox" name="hobby" value="3"> 大保健 <br> <input type="submit" value="点击确认"> <!-- 能够触发提交数据的动作 --> <br> <!-- <input type="hidden" name="xx" value="oo"> --> <input type="reset"> <br> <input type="button" value="走你"> <!-- 普通按钮，不能出发提交数据的动作 --> <br> <input type="number"> <br> <input type="date"> <br> <input type="file"> </div> </form> </body> </html>
13、select下拉框标签
<!--性别--> <select name="sex" > <option value="1">男</option> <option value="2">女</option> </select> <!--喜欢的明星--> <select name="star" multiple="multiple"> <select name="star" multiple> #简写形式 <option value="1">胡歌</option> <option value="2">周杰伦</option> <option value="3">林俊杰</option> <option value="4">kkggg</option> </select>
14、textarea多行文本输入框
<textarea name="" cols="5" rows="2"> </textarea> <!--默认两行,每行5个字符,可以通过右下角来回拉-->
15、其他
15.1、加粗
<b>哈哈</b> <strong>哈哈</strong>
15.2、hr标签 一行横线
<h2>冯<hr>俊</h2>
15.3、在文本上加一条横线
<strike style="background-color: green">hello</strike>
15.4、几次方效果
<!--斜体 3在上2在下--> 3<sub>2</sub> <!--3在下2在上--> 3<sup>2</sup>