IT评测·应用市场-qidao123.com

标题: WEB前端-2 [打印本页]

作者: 忿忿的泥巴坨 时间: 2025-1-10 06:57
标题: 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上层父级内容区块或是一个根区块的脚注hgrouphgroup元素是将标题及其子标题举行分组的元素。hgroup 元素通常会将h1~h6元素举行分组，譬如一个内容区块的标题及其子元素算一组addressaddress元素用来在文档中呈现联系信息，包罗文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实所在、电话号码等figure网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题figcaptionfigure元素块中的标题detailsdetails元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示具体信息”。summary作为details元素的标题mark标注或者高亮一些我们需要的关键字词progress表示当前的完成进度情况metermeter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值cite表示作品或文章中的标题smallHTML5中，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>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)