网站界面建议,制作手机端网站开发,优秀网站网页设计分析,如何做公司网络推广目录
HTML-常见的网页标签-分类2
语义化标签
列表标签
表单标签
form标签
input标签
select标签
textarea标签
html转义符
h5提供的新标签
【例3#xff1a;豆瓣电影】
【源码】
【例4#xff1a;登录注册】
【源码】
【例5#xff1a;QQ注册】
【源码】 H…目录
HTML-常见的网页标签-分类2
语义化标签
列表标签
表单标签
form标签
input标签
select标签
textarea标签
html转义符
h5提供的新标签
【例3豆瓣电影】
【源码】
【例4登录注册】
【源码】
【例5QQ注册】
【源码】 HTML-常见的网页标签-分类2
语义化标签
H5提出的新特性语义化的概念——正确的标签干正确的事。
定义大量望名而知其意标签来包裹内容如地址不在使用div而是使用address导航也不再使用div而是nav文章使用article。
列表标签 有序列表olli 无序列表ulli 数据列表dldtdd
表单标签
表单标签是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 langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title豆瓣电影/title /head body h1热门电影板块/h1 hr table width1000 tr tdb最近热门电影/b/td td热门/td td最新/td td豆瓣高分/td td冷门佳片/td td华语/td td欧美/td td韩国/td td日本/td td width200/td td更多gt;gt;/td /tr /table hr/ table tr tdimg width250height300Srchttps://tse4-mm.cn.bing.net/th/id/OIP-C.f48a0E_YfANBD2QziJpOrQHaK-?rs1pidImgDetMain alt图片/td tdimg width250height300srchttps://tse2-mm.cn.bing.net/th/id/OIP-C.zDBsgzeMjdSliZT4Ecb4LQAAAA?w155h180c7r0o5dpr1.5pid1.7 alt图片/td tdimg width250height300srchttps://tse1-mm.cn.bing.net/th/id/OIP-C.Hrb896AJahb2TX7r3gLCYwHaK-?w156h180c7r0o5dpr1.5pid1.7 alt图片/td tdimg width250height300srchttps://tse2-mm.cn.bing.net/th/id/OIP-C.OyP6k0F6crC-HnkvFytIAgAAAA?w156h186c7r0o5dpr1.5pid1.7 alt图片/td /tr tr tdp猜火车 8.1/p/td td贝尔科实验 6.0/td td加州公路巡警 6.8/td td歌声不绝 6.3/td /tr tr tdimg width250height300srchttps://tse2-mm.cn.bing.net/th/id/OIP-C.DMTP6nlSdLyD0zgrcy7PyAHaKb?w156h180c7r0o5dpr1.5pid1.7 alt图片/td tdimg width250height300srchttps://puui.qpic.cn/vcover_vt_pic/0/l9vxrwfdjcw1q4g1567073958/0 alt图片/td tdimg width250height300srchttps://tse3-mm.cn.bing.net/th/id/OIP-C.1NO_xxRf65ckIKUosTrjOwHaKg?w156h187c7r0o5dpr1.5pid1.7 alt图片/td tdimg width250height300srchttps://n.sinaimg.cn/ent/transform/20170301/uc0J-fyavvth8465728.png alt图片/td /tr tr tdp明日的我与昨日的我/p/td td速度与激情8/td td急速特工/td td金刚狼3:殊死一战/td /tr /table /body /html 【例4登录注册】 【源码】 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title登录注册/title /head body form nameform1methodpostaction table width300 cellpadding2cellspacing1 tr td colspan2 aligncenterbgcolorgrey用户注册/td /tr tr td alignrightbgcolorgrey用户名/td td bgcolorgreyinput typetext nameusername id/td /tr tr td alignrightbgcolorgrey密码/td td bgcolorgreyinput typetext namepassword id/td /tr tr td alignrightbgcolorgrey性别/td td bgcolorgreyinput typeradio namesex value男男 input typeradio namesex value女checked女/td /tr tr td alignrightbgcolorgrey爱好/td td bgcolorgreyinput typecheckbox namehobby valuecheckbox写作 input typecheckbox namehobby valuecheckbox听音乐 input typecheckbox namehobby valuecheckbox体育/td /tr tr td alignrightbgcolorgrey省份/td td bgcolorgreyselect nameprovince id option valueshaanxiselected陕西省/option option valueshanxiselected山西省/option /select/td /tr tr td alignrightbgcolorgrey自我介绍/td td bgcolorgreytextarea nameintro idintro/textarea/td /tr tr td colspan2aligncenterbgcolorgreyinput typesubmit namesend value提交 input typereset namereset id重置/td /tr /table /form /body /html 【例5QQ注册】 【源码】 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleQQ注册/title /head body form nameform1methodpostaction table border0width850 height700cellpadding2cellspacing1 tr td wight50img width200height700 srchttps://tse2-mm.cn.bing.net/th/id/OIP-C.5eCJzLSQHuxwzuV2e7-H3QHaHa?w151h180c7r0o5dpr1.5pid1.7 alt图片/td td alignlighth1欢迎注册QQ/h1 p每一天乐在沟通。 a href#免费靓号/a/p form action input typetext name昵称placeholder昵称 idbr input typetext name密码 placeholder密码idbr select option value8686/option /select input type手机号码 name idbr small stylecolor:grey可通过该手机号找回密码/small input bgcolorblue aligncenter typesubmit value立即注册 idbr input typecheckbox name checkedsmall stylecolor:grey我已阅读并同意相关服务条款和隐私政策/small /form /td td valigntopalignright pimg alignlightwidth30height20srchttps://ts1.cn.mm.bing.net/th/id/R-C.9f31180809b9e41bd5f40b2d18c00b6e?riklw%2b5%2bf9VTk55CAriuhttp%3a%2f%2fwiki.connect.qq.com% 2fwp-content%2fuploads%2f2013%2f10%2f01_qq_logo-1024x491.pngehkr4yiEPgSvOVGDuvvC6OS40GYTdPNqyGpJhbhnoxaWi8%3drislpidImgRawr0 alt图片 select option valuezh-CN简体中文/option option valueenEnglish/option option valuezh-TW繁体中文/option /select意见反馈/p /td /tr /table /form
