HTML
文档结构
<!DOCTYPE html> 文档声明 <html lang="en"> 语言 <head> 网站配置信息 <meta charset="UTF-8"> 解码方式 <title>皇家赌场</title> 网站标题 </head> <body> 网站显示内容 <h1> 26期 皇家赌场 </h1> </body> </html>
head标签
1. meta 文档字符编码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的网页</title> </head> <body> <h1>叫爸爸</h1> </body> </html>
标签写法分类
全封闭标签 <h1 xx='ss'>xxx</h1> 标签属性 :<h1 xx='ss'>xxx</h1> xx:属性名 ss:属性值 自封闭标签 <meta charset="UTF-8">
1.2 meta 页面刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世上最牛逼的页面标题</title> <meta http-equiv="Refresh" content="5" /> </head> <body> <h1>这是个栗子,快尼玛给我运行起来。</h1> </body> </html>
1.3 meta 关键字
meta标签可以设置关键字,用于搜索引擎收录和关键字搜索。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世上最牛逼的页面标题</title> <meta name="keywords" content="北京,天津,大连,广东,xxxxx" /> </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 name="description" content="野鸭子是一个面向全球的皮条平台。" /> </head> <body> <h1>这个栗子就别运行老子了,随便去看一个网站的源代码吧。</h1> </body> </html>
1.5 meta 触屏缩放
meta标签可以设置页面是否支持触屏缩放功能,其中各元素的含义如下:
width=device-width
,表示宽度按照设备屏幕的宽度。initial-scale=1.0
,初始显示缩放比例。minimum-scale=0.5
,最小缩放比例。maximum-scale=1.0
,最大缩放比例。user-scalable=yes
,是否支持可缩放比例(触屏缩放)
<!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="width: 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="图标文件路径"> </head> <body> <h1>隔壁王老汉的幸福生活</h1> </body> </html>
简单head内部标签总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>野鸡平台</title> <meta name="keywords" content="欧美,日韩,国产,网红"/> <meta name="description" content="野鸡是一个面向全球的皮条平台。"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <link rel="icon" href="/image/chicken.icon"> </head> <body> <h1 style="width: 1500px;background-color: green;">我们一起为爱鼓掌呀!!!</h1> </body> </html>
body标签
h1 - h6标签 ,标题标签
<body> <h1>李晨浩</h1> <h2>冯俊</h2> <h3>刘炳良,大圣</h3> <h4>王勇杰</h4> <h5>苑子萌</h5> <h6>李海煜</h6> </body>
br标签 换行
<h1>李晨浩</h1> <h2>冯<br>俊</h2>
注意点:所有的回车空格等空白内容都被认为是一个空格
hr 标签 一行横线
<h2>冯<hr>俊</h2>
body标签里面的没有其他标签包裹的内容,就是普通文本显示
<body> 你好!!! </body>
a 标签 超链接标签
- 不加href属性,就是普通文本显示
<a>python短片</a>
- 加上href属性,不加值
<a href="">python短片</a> 文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面
- 加上href属性,并且加上值
<a href="http://www.pythonav.com" target="_self">python短片</a> 跳转对应网址的页面 未访问之前是蓝色的字体颜色 访问之后是紫色的字体颜色 target属性: _self:在当前标签页打开 href属性值的那个网址 _blank:在新的标签页打开 href属性值的那个网址
锚点
页面内容进行跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="top">这是顶部</div> <a href="#i1">第一章 初入贵境</a> <a href="#i2">第二章 开局一人一条狗</a> <a href="#i3">第三章 就是干</a> <a href="#i4">第四章 大结局</a> <div id="i1" style="background-color: red;">第一章 初入贵境</div> <p> 没干啥好事儿!! </p> <p> 没干啥好事儿!! </p> <p> 没干啥好事儿!! </p> <p> 没干啥好事儿!! </p> <div id="i2" style="background-color: red;">第二章 开局一人一条狗</div> <p> 给狗洗澡!! </p> <p> 给狗洗澡!! </p> <p> 给狗洗澡!! </p> <p> 给狗洗澡!! </p> <div id="i3" style="background-color: red;">第三章 就是干</div> <p> 干狗!!! </p> <p> 干狗!!! </p> <p> 干狗!!! </p> <p> 干狗!!! </p> <p> 干狗!!! </p> <div id="i4" style="background-color: red;">第四章 大结局</div> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <p> 中毒身亡!!! </p> <a href="#top">返回顶部</a> </body> </html>
描述:标签设置id属性=值(xx),a标签href属性的值写法:href=‘#xx‘,点击这个a标签就能跳转到id属性为xx的那个标签所在位置.
img标签 图片标签
<!--<img src="图片网络地址或者本地图片地址" alt="">--> <!--<img width="200" height="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572847825593&di=77d528287e8f7d62938cfd13888a2e7a&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180505%2Fd2613066757341c28cc6f19a0a4bfdba.jpeg" alt="">--> <img width="200" height="200" src="timg.jpg" alt="这是一个美女图片,稍等片刻" title="子萌"> src属性:图片路径 必须写 alt属性:图片加载失败或者正在加载时提示的内容 title属性:鼠标悬浮时显示的内容 # 不常用,通过css来控制 width:设置宽度 height:设置高度
div标签和span标签
没有任何的文本修饰效果
标签分类
块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li 块级标签能够包含内联标签,和某些块级标签 内联标签(行内标签):不独占一行,img\a\span 只能包含内联标签,不能包含块级标签
列表标签 ul和ol标签
示例: 兴趣爱好: <ul> <li>抽烟</li> <li>喝酒</li> <li>烫头</li> </ul> 喜欢的姑娘: <ol type="I" start="2"> <li>韩红</li> <li>贾玲</li> <li>李宇春</li> </ol> #dl标签了解 <dl> <dt>河北省</dt> <dd>邯郸</dd> <dd>石家庄</dd> <dt>山西省</dt> <dd>太原</dd> <dd>平遥</dd> </dl>
table表格标签
<table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李晨浩</td> <td>看电影</td> </tr> <tr> <td>2</td> <td>冯俊</td> <td>迟到</td> </tr> <tr> <td>3</td> <td>大圣</td> <td>玩棍儿</td> </tr> </tbody> </table>
表格合并(rowspan="2"纵行合并 colspan=‘2‘ :横列合并)
<table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李晨浩</td> <!--<td rowspan="2">看电影</td>--> <td>看电影</td> </tr> <tr> <td>2</td> <td>冯俊</td> <td>迟到</td> </tr> <tr> <td>3</td> <td colspan="2">大圣</td> <!--<td>玩棍儿</td>--> </tr> </tbody> </table>
form标签 表单标签
<form action="http://127.0.0.1:8001"> </form>
input标签 输入框
# input标签,如果要提交数据,别忘了写name属性 例如:name='username' -- username='zhangjianzhi' <input type="text"> 普通文本输入框 <input type="password"> 密文输入框 <input type="submit" value="登录"> 提交按钮 触发form表单提交数据的动作 <input type="reset"> 重置按钮 清空输入的内容 例子: <form> <div class="controls"> <label for="id">User ID:</label> <input type="text" id="id" name="id" /> <input type="reset" value="Reset"> <input type="submit" value="Submit"> </div> </form> 只有放在form表单中 重置按钮才有效 <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"> qqq <input type="checkbox" name="hobby" value="2"> www <input type="checkbox" name="hobby" value="3"> zzz
select下拉框标签
<select name="city" id="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">惠州</option> </select> <select name="citys" id="citys" multiple> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">惠州</option> </select> multiple:多选的意思
textarea 多行文本输入框
<textarea name="comment" id="comment" cols="20" rows="10"></textarea>
相关推荐
HSdiana 2020-05-11
百年da孤独 2020-03-27
柳永法的个人 2020-02-13
wwwxuewen 2020-01-19
yanweiqi 2019-12-12
WebVincent 2019-11-19
书虫媛 2019-10-29
scdn 2015-06-12
galilajiao00 2015-06-03
opspider 2020-06-28
ZHANGRENXIANG00 2020-06-28
明瞳 2020-06-10
lanzhusiyu 2020-06-09
HSdiana 2020-06-03
PengQ 2020-05-26
lengyu0 2020-05-20
haidaoxianzi 2020-04-18
PioneerFan 2020-04-09