做百度推广网站排名,编程培训机构名字,西北电力建设甘肃工程公司网站,wordpress 主题花园1、HTML5
1.1 新增布局标签
header#xff1a;用于定义文档或者section的页眉#xff1b;footer#xff1a;用于定义页面或section的底部信息#xff1b;nav#xff1a;用于定位页面上的导航链接部分#xff1b;article#xff1a;用于定位文档或者页面中的独立部分用于定义文档或者section的页眉footer用于定义页面或section的底部信息nav用于定位页面上的导航链接部分article用于定位文档或者页面中的独立部分可以在不丢失原本意义的情况下独立存在section用于定位文档中的节代表可以是一个独立的部分通常包含标题aside用于定位和页面主要内容有关但可以被单独引用的内容main文档的主要内容WHATWG中没有语义hgroup包裹连续的标题W3C将其删除。 article中可以有多个section section强调将内容分为一块article强调内容为一个整体内容比较完整。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title新增布局标签/titlestyle* {margin: 10px auto;text-align: center;}aside {float: right;}/style
/headbodyheader个人博客/headernava href#首页/aa href#文章分类/aa href#我的/a/navmainarticleh3文章1/h3sectionh3章节1/h3p主要内容........................./p/sectionsectionh3章节2/h3p主要内容........................./p/sectionsectionh3章节3/h3p主要内容........................./p/section/article/mainasidenavullia href#链接1/a/lilia href#链接2/a/lilia href#链接3/a/li/ul/nav/asidefooterp联系我们/pp网站备案号✖️✖️✖️✖️✖️✖️✖️/p/footer
/body
/html1.2 新增状态标签
meter展示测量结果在已知范围的位置如手机电量提示。 max最大值min最小值high高值low低值optimum最优值value当前值。 progress显示操作进度如文件上传进度条。 max最大值value当前值。
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title新增状态标签/title
/headbodyspan手机电量: /spanmeter max100 min0 high20 low10 optimum90 value50/meterbrspan上传进度: /spanprogress max100 value60/progress
/body/html1.3 新增列表标签
datalist用于对搜索框关键字的提示details用于展示问题和答案或对专有名词进行解释summary写在details中指定问题或专有名词。
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title新增列表标签/title
/headbodyinput typetext listdatabutton搜索/buttondatalist iddataoption valued1d1/optionoption valued2d2/optionoption valued3d3/optionoption valued4d4/option/datalistdetailssummary标题/summaryp这是标题的解释/p/details
/body/html1.4 新增文本标签
ruby包裹需要注音的文字rt包裹拼音写在待注音文字的下面mark标记文字使其背景变为淡黄色。
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title新增文本标签/title
/headbodyrubyspan注音文字/spanrtzhù yīn wén zì/rt/rubyhrp这是一个mark段落/mark。/p
/body/html1.5 表单新增功能
placeholder提示文字required表示该字段不能为空autofocus光标焦点自动锁定多个该标签光标锁定第一个autocomplete自动根据历史记录生成相关关键词pattern正则表达式验证输入的格式输入不能为空值
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title新增表单控件属性/titlestyle#self {margin-left: 100px;height: 100px;width: 200px;}#button {position: relative;left: 10px;bottom: 10px;}textarea::placeholder {text-align: center;line-height: 100px;font-size: 30px;}/style
/headbodyform actionlabel foraccount账号/labelinput typetext nameaccount idaccount placeholder请输入账号 required autofocus autocompleteon pattern\w{6}brlabel forpassword密码/labelinput typepassword namepassword idpassword placeholder请输入密码 requiredbrlabel forgender性别/labelinput typeradio namegender idgender required男input typeradio namegender idgender女brlabel forhobby爱好/labelinput typecheckbox namehobby idhobby required爱好1input typecheckbox namehobby idhobby爱好2input typecheckbox namehobby idhobby爱好3brlabel forself个人简介/labelbrtextarea nameself idself placeholder点击输入 required/textareabutton idbutton提交/button/form
/body/html1.6 input新增属性
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8titleinput新增属性/title
/headbody!-- 表单在属性中添加 novalidate 表示去除表单中所有验证 --form action novalidate邮箱input typeemail nameemail requiredbr网址input typeurl nameurl requiredbr数字input typenumber namenumber max80 min20 step5 requiredbr搜索input typesearch namesearch requiredbr电话input typetel nametel requiredbr滑块input typerange namerange max80 min20 step5 value25 requiredbr颜色选择器input typecolor namecolor requiredbr日期input typedate namedate requiredbr月份input typemonth namemonth requiredbr周input typeweek nameweek requiredbr时间input typetime nametime requiredbr时间和日期input typedatetime-local namedatetime-local requiredbrbutton提交/button/form
/body/html1.7 video新增属性
controls媒体控制loop循环播放autoplay自动播放必须静音播放属性在时才播放除非媒体参与度为高muted静音播放poster视频封面未点击时为引入图片大小视频播放为视频大小最好大小一致src引入视频地址width视频的宽height视频的高。proload视频预加载 none不预先加载视频metadata仅预先获取视频的元数据基本信息auto下载整个视频文件。
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title新增媒体标签/titlestylevideo {height: 300px;margin-top: 10px;}.video {text-align: center;}/style
/headbodydiv classvideovideo src./videos/video.mp4 controls loop autoplay/videobrvideo src./videos/video.mp4 controls muted loop poster./videos/touxiang.png preloadauto/video/div
/body/html1.8 audio新增属性 audio中与视频的属性基本一致但是没有poster、width、height !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title音频新增属性/titlestyleaudio {width: 600px;}.mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.592);}.dialog {position: absolute;top: 0;bottom: 0;left: 0;background-color: aqua;right: 0;text-align: center;width: 400px;height: 400px;line-height: 400px;margin: auto;font-size: 40px;}span {border: 1px wheat solid;cursor: pointer;}/style
/headbodyaudio idmusic src./videos/反方向的钟 - 周杰伦.mp3 controls loop preloadauto/audiodiv classmask idmaskdiv classdialog iddialogspan登录/spanspan onclickplay()试听/span/div/divscriptfunction play(){music.play()mask.style.display none}/script
/body/html1.9 新增全局属性
contenteditable是否可被用户编辑draggable元素是否可被拖动hidden隐藏元素spellcheck拼写检查需要在浏览器设置中打开contextmenu规定元素的上下文菜单用户鼠标右键点击元素时显示data-*存储页面私有定制数据。
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title新增全局属性/titlestyle.contenteditable {border: 1px solid black;padding: 5px;}.draggable {cursor: move;}.hidden {display: none;}.spellcheck {border-bottom: 1px dotted red;}.contextmenu {display: inline-block;margin: 5px;}[data-custom] {background-color: yellow;}/style
/headbodydiv contenteditabletrue classcontenteditableContenteditable 属性: 使元素可编辑/divdiv draggabletrue classdraggableDraggable 属性: 使元素可以拖动/divdiv classhiddenHidden 属性: 隐藏元素/divdiv spellchecktrue classspellcheckSpellcheck 属性: 开启拼写检查/divdiv contextmenuexampleMenu classcontextmenuContextmenu 属性: 规定元素的上下文菜单/divdiv data-customcustomDataData-* 属性: 存储页面私有定制数据/div!-- 示例上下文菜单 --menu typecontext idexampleMenulia href#copy复制/a/lilia href#paste粘贴/a/lilia href#cut剪切/a/li/menu
/body/html1.10 H5兼容问题 在一些低版本ie浏览器中有些H5样式不支持引入谷歌写的js文件和一些设置可使得兼容性更好。 head
!-- 让IE浏览器处于最优渲染模式 --
meta http-equivX-UA-Compatible contentIEEdge
!-- 针对国产浏览器让浏览器优先使用webkit内核 --
meta namerender contentwebkit
!--[if lt ie 9]
script src./html5shiv.js/script
![endif]--
/head相关代码地址https://gitee.com/justinc666/front-end/tree/master/HTML5
