dw网站建设的常用技术,网页版qq登陆入口,建设工程类的网站,wordpress 文件上传漏洞学习来源#xff1a;尚硅谷前端htmlcss零基础教程#xff0c;2023最新前端开发html5css3视频 系列笔记#xff1a; 【HTML4】#xff08;一#xff09;前端简介【HTML4】#xff08;二#xff09;各种各样的常用标签【HTML4】#xff08;三#xff09;表单及HTML4收尾… 学习来源尚硅谷前端htmlcss零基础教程2023最新前端开发html5css3视频 系列笔记 【HTML4】一前端简介【HTML4】二各种各样的常用标签【HTML4】三表单及HTML4收尾【CSS2】四CSS基础及CSS选择器【CSS2】五CSS三大特性及常用属性【CSS2】六CSS盒子模型【CSS2】七浮动【CSS2】 八定位与布局【实操】 九尚品汇实操练习【HTML5】 十HTML5简介及相关新增属性【CSS3】 十一CSS3简介及基本语法上| 相关新增属性【CSS3】 十二CSS3简介及基本语法中| 变换、过渡与动画【CSS3】 十三CSS3简介及基本语法下| 伸缩盒模型 文章目录 HTML5简介什么是HTML5HTML5 优势HTML5兼容性 新增语义化标签新增布局标签新增状态标签⭐️meter标签⭐️progress标签 新增列表标签新增文本标签⭐️文本注音⭐️文本标记 新增表单功能表单控件新增属性input新增属性值form标签新增属性 新增多媒体标签视频标签音频标签 新增全局属性了解HTML5兼容性处理 ⭐️前文回顾前端 | 九尚品汇实操练习 | 尚硅谷前端htmlcss零基础教程2023最新 ⭐️前文对应p148-p159本文对应p160-p170 ⭐️补充网站W3schoolMDN HTML5简介
什么是HTML5 HTML5 是新一代的 HTML 标准2014年10月由万维网联盟 W3C 完成标准制定。 官网地址 W3C 提供 W3CWHATWG 提供WHATWG 写它俩都有的。 HTML5 在狭义上是指新一代的 HTML 标准在广义上是指整个前端。
HTML5 优势
针对 JavaScript 新增了很多可操作的接口。新增了一些语义化标签、全局属性。新增了多媒体标签可以很好的替代 flash 。更加侧重语义化对于 SEO 更友好。可移植性好可以大量应用在移动设备上。
HTML5兼容性 新增语义化标签
新增布局标签 就是有了语义的div !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增布局标签/title
/head
body!-- 头部 --header classpage-headerh1尚品汇/h1/headerhr!-- 主导航 --nava href#首页/aa href#订单/aa href#购物车/aa href#我的/a/nav!-- 主要内容 --div classpage-content!-- 侧边栏导航 --aside stylefloat: right;navullia href#秒杀专区/a/lilia href#会员专区/a/lilia href#领取优惠券/a/lilia href#品牌专区/a/li/ul/nav/aside!-- 文章 --articleh2《如何一夜暴富》/h2sectionh3第一种方式通过做梦/h3p你要这么做梦xxxxxxxxxxxxxxxxxxxxxxx/p/sectionsectionh3第二种方式通过买彩票/h3p你要这么买彩票xxxxxxxxxxxxxxxxxxxxxxx/p/sectionsectionh3第三种方式通过学习前端/h3p你要来到尚硅谷学前端xxxxxxxxxxxxxxxxxxxxxxx/p/section/article/divhrfooternava href#友情链接1/aa href#友情链接2/aa href#友情链接3/aa href#友情链接4/a/nav/footer
/body
/html新增状态标签
⭐️meter标签 ⭐️progress标签 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增状态标签/titlestyleprogress {width: 50px;}/style
/head
bodyspan手机电量/spanbrmeter max100 min0 value90 low20 high80 optimum90/meterbrmeter max100 min0 value75 low20 high80 optimum90/meterbrmeter max100 min0 value10 low20 high80 optimum90/meterbrspan当前进度/spanprogress max100 value20/progress
/body
/html新增列表标签 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增列表标签/title
/head
bodyform action#input typetext listmydatabutton搜索/button/formdatalist idmydataoption value周杰伦周杰伦/optionoption value周冬雨周冬雨/optionoption value马冬梅马冬梅/optionoption value温兆伦温兆伦/option/datalisthrdetailssummary如何一夜暴富/summaryp来到尚硅谷学习前端/p/details
/body
/html新增文本标签
⭐️文本注音 ⭐️文本标记 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增文本标签/title
/head
bodyrubyspan魑魅魍魉/spanrtchī mèi wǎng liǎng /rt/rubyhrdivrubyspan魑/spanrtchī/rt/rubyrubyspan魅/spanrtmèi/rt/ruby/divhrpLorem ipsum markdolor/mark sit amet consectetur adipisicing elit. Laboriosam, nemo?/p
/body
/html新增表单功能
表单控件新增属性 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增的表单控件属性/title
/head
bodyform action!-- 自动对焦有多个优先第一个 --!-- 自动完成类似于历史记录提示 --!-- \w{6}表示可以写数字字母下划线以及需要写六位 --账号input typetext nameaccount placeholder请输入账号 required autofocus autocompleteonpattern\w{6}br密码input typepassword namepwd placeholder请输入密码 required pattern\w{6}br性别input typeradio valuemale namegender required男input typeradio valuefemale namegender女br爱好input typecheckbox valuesmoke namehobby抽烟!-- 多选的required意味着这一项必选 --input typecheckbox valuedrink namehobby required喝酒input typecheckbox valueperm namehobby烫头br其他textarea nameother placeholder请输入密码 required pattern\w{6}/textareabrbutton提交/button/form
/body
/htmlautocomplete要求浏览器打开相关设置 input新增属性值 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleinput新增的type属性值/title
/head
bodyform action邮箱input typeemail required nameemail!-- urlinput typeurl required nameurl --!-- 数值input typenumber required namenumber step2 max80 min20 --!-- 搜索input typesearch required namekeyword --!-- 电话input typetel required namephone --!-- 光照强度input typerange namerange max80 min20 value22 --!-- 颜色input typecolor namecolor --!-- 日期input typedate required namedate --!-- 月份input typemonth required namemonth --!-- 周input typeweek required nameweek --!-- 时间input typetime required nametime --!-- 日期时间input typedatetime-local required nametime2 --brbutton提交/button/form
/body
/htmlform标签新增属性 新增多媒体标签
视频标签
video标签用来定义视频它是双标签 自动播放的前提是先设置静音 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增视频标签/titlestylevideo {width: 600px;}/style
/head
body!-- 显示视频控件静音循环播放设置封面可下载 --video src./小电影.mp4 controls muted loop poster./封面.png preloadauto/video
/body
/html音频标签
audio标签用来定义音频它是双标签。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增音频标签/titlestyleaudio {width: 600px;/* height: 500px; */border: 1px solid black;}/style
/head
body!-- 对于音频来说不写controls啥玩意没有 --audio src./小曲.mp3 controls loop preloadmetadata/audio
/body
/html同视频如果不设置静音无法自动播放但可以借助js实现这一功能 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title03_音频案例/titlestyleaudio {width: 600px;}.mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.727);}.dialog {position: absolute;width: 400px;height: 400px;background-color: green;top: 0;bottom: 0;left: 0;right: 0;margin: auto;font-size: 40px;text-align: center;line-height: 400px;}span {border: 1px solid white;color: white;cursor: pointer;}/style
/head
bodyaudio idmusic src./小曲.mp3 controls/audiodiv classmask idmaskdiv classdialogspan点我登录/spanspan onclickgo()随便听听/span/div/div!-- 实现自动播放 --scriptfunction go (){music.play()mask.style.display none}/script
/body
/html新增全局属性了解 HTML5兼容性处理
!-- 让IE浏览器处于一个最优的渲染模式 --
meta http-equivX-UA-Compatible contentIEedge
!-- 针对一些国产的“双核”浏览器的设置让浏览器优先使用webkit内核去渲染网页 --
meta namerender contentwebkit
