WEB前端-2
目录
HTML-常见的网页标签-分类2
语义化标签
列表标签
表单标签
form标签
input标签
select标签
textarea标签
html转义符
h5提供的新标签
【例3：豆瓣电影】
【源码】
【例4：登录注册】
【源码】
【例5：QQ注册】
【源码】
HTML-常见的网页标签-分类2
语义化标签
H5提出的新特性，语义化的概念——正确的标签干正确的事。
定义大量望名而知其意标签来包裹内容，如地址，不在使用div，而是使用address，导航，也不再使用div，而是nav，文章使用article。
列表标签
-
有序列表：ol；li
-
无序列表：ul；li
-
数据列表：dl；dt；dd
表单标签
表单标签，是html提供用于服务器端和客户端进行数据交互的标签。
form标签
form标签：表单的总标签，其他表单必须包裹在这个标签里面。
form标签常见属性：action、method、entype等等。
action：填写一个URL，表示需要提交的服务器地址
method：默认是get，表示提交的HTTP请求的方式
entype：
input标签
文本域标签，是一个文本域，需要注意的是，input标签存在大量的类型。
select标签
下拉选择框
textarea标签
文本框标签，可以编写更多的文字，如果需要带格式，则一般将其渲染为一个富文本框。
html转义符
页面上输入>、< ，考虑它会出问题吗？
h5提供的新标签
HTML5是HTML从传统的web端开始兼容移动互联网的重要标志，h5为HTML提供了大量好用的标签，如布局使用的三个标签header、section、footer标签；用来播放视频和音频的多媒体标签video、audio标签等，参考表3-3。
| 标签名称 | 作用 |
|---|---|
| header | 定义页面的顶部（页眉）内容 |
| article | 主要是用来表示文章内容的 |
| section | 于对网站或者应用程序页面上的内容进行分块 |
| nav | 用作页面导航的链接组 |
| aside | 当前页面或文章的附属信息部分 |
| footer | 上层父级内容区块或是一个根区块的脚注 |
| hgroup | hgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组 |
| address | address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实地址、电话号码等 |
| figure | 网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题 |
| figcaption | figure元素块中的标题 |
| details | details元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息”。 |
| summary | 作为details元素的标题 |
| mark | 标注或者高亮一些我们需要的关键字词 |
| progress | 表示当前的完成进度情况 |
| meter | meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值 |
| cite | 表示作品或文章中的标题 |
| small | HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等 |
| canvas | 画布标签，用来在页面上画图案 |
【例3：豆瓣电影】
【源码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣电影</title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<table width="1000">
<tr>
<td><b>最近热门电影</b></td>
<td>热门</td>
<td>最新</td>
<td>豆瓣高分</td>
<td>冷门佳片</td>
<td>华语</td>
<td>欧美</td>
<td>韩国</td>
<td>日本</td>
<td width="200"></td>
<td>更多>></td>
</tr>
</table>
<hr/>
<table>
<tr>
<td><img width="250"height="300"Src="https://tse4-mm.cn.bing.net/th/id/OIP-C.f48a0E_YfANBD2QziJpOrQHaK-?rs=1&pid=ImgDetMain" alt="图片"></td>
<td><img width="250"height="300"src="https://tse2-mm.cn.bing.net/th/id/OIP-C.zDBsgzeMjdSliZT4Ecb4LQAAAA?w=155&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>
<td><img width="250"height="300"src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Hrb896AJahb2TX7r3gLCYwHaK-?w=156&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>
<td><img width="250"height="300"src="https://tse2-mm.cn.bing.net/th/id/OIP-C.OyP6k0F6crC-HnkvFytIAgAAAA?w=156&h=186&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>
</tr>
<tr>
<td><p>猜火车 8.1</p></td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
<tr>
<td><img width="250"height="300"src="https://tse2-mm.cn.bing.net/th/id/OIP-C.DMTP6nlSdLyD0zgrcy7PyAHaKb?w=156&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>
<td><img width="250"height="300"src="https://puui.qpic.cn/vcover_vt_pic/0/l9vxrwfdjcw1q4g1567073958/0" alt="图片"></td>
<td><img width="250"height="300"src="https://tse3-mm.cn.bing.net/th/id/OIP-C.1NO_xxRf65ckIKUosTrjOwHaKg?w=156&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>
<td><img width="250"height="300"src="https://n.sinaimg.cn/ent/transform/20170301/uc0J-fyavvth8465728.png" alt="图片"></td>
</tr>
<tr>
<td><p>明日的我与昨日的我</p></td>
<td>速度与激情8</td>
<td>急速特工</td>
<td>金刚狼3:殊死一战</td>
</tr>
</table>
</body>
</html>
【例4：登录注册】
【源码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
</head>
<body>
<form name="form1"method="post"action="">
<table width="300" cellpadding="2"cellspacing="1">
<tr>
<td colspan="2" align="center"bgcolor="grey">用户注册</td>
</tr>
<tr>
<td align="right"bgcolor="grey">用户名</td>
<td bgcolor="grey"><input type="text" name="username" id=""></td>
</tr>
<tr>
<td align="right"bgcolor="grey">密码</td>
<td bgcolor="grey"><input type="text" name="password" id=""></td>
</tr>
<tr>
<td align="right"bgcolor="grey">性别</td>
<td bgcolor="grey"><input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女"checked>女</td>
</tr>
<tr>
<td align="right"bgcolor="grey">爱好</td>
<td bgcolor="grey"><input type="checkbox" name="hobby" value="checkbox">写作
<input type="checkbox" name="hobby" value="checkbox">听音乐
<input type="checkbox" name="hobby" value="checkbox">体育</td>
</tr>
<tr>
<td align="right"bgcolor="grey">省份</td>
<td bgcolor="grey"><select name="province" id="">
<option value="shaanxi"selected>陕西省</option>
<option value="shanxi"selected>山西省</option>
</select></td>
</tr>
<tr>
<td align="right"bgcolor="grey">自我介绍</td>
<td bgcolor="grey"><textarea name="intro" id="intro"></textarea></td>
</tr>
<tr>
<td colspan="2"align="center"bgcolor="grey"><input type="submit" name="send" value="提交">
<input type="reset" name="reset" id="重置"></td>
</tr>
</table>
</form>
</body>
</html>
【例5：QQ注册】
【源码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ注册</title>
</head>
<body>
<form name="form1"method="post"action="">
<table border="0"width="850" height="700"cellpadding="2"cellspacing="1">
<tr>
<td wight="50"><img width="200"height="700" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.5eCJzLSQHuxwzuV2e7-H3QHaHa?w=151&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>
<td align="light"><h1>欢迎注册QQ</h1>
<p>每一天，乐在沟通。
<a href="#">免费靓号</a></p>
<form action="">
<input type="text" name="昵称"placeholder="昵称" id=""><br>
<input type="text" name="密码" placeholder="密码"id=""><br>
<select >
<option value="+86">+86</option>
</select>
<input type="手机号码" name="" id=""><br>
<small style="color:grey">可通过该手机号找回密码</small>
<input bgcolor="blue" align="center" type="submit" value="立即注册" id=""><br>
<input type="checkbox" name="" checked><small style="color:grey">我已阅读并同意相关服务条款和隐私政策</small>
</form>
</td>
<td valign="top"align="right">
<p><img align="light"width="30"height="20"src="https://ts1.cn.mm.bing.net/th/id/R-C.9f31180809b9e41bd5f40b2d18c00b6e?rik=lw%2b5%2bf9VTk55CA&riu=http%3a%2f%2fwiki.connect.qq.com%
2fwp-content%2fuploads%2f2013%2f10%2f01_qq_logo-1024x491.png&ehk=r4yiEPgSvOVGDuvvC6OS40GYTdPNqyGpJhbhnoxaWi8%3d&risl=&pid=ImgRaw&r=0" alt="图片">
<select>
<option value="zh-CN">简体中文</option>
<option value="en">English</option>
<option value="zh-TW">繁体中文</option>
</select>意见反馈</p>
</td>
</tr>
</table>
</form>