标签
更语义化标签
header标签 nav标签 section标签 article标签 aside标签 widget标签 footer标签
为什么要有语义化标签
能够便于开发者阅读和写出更优雅的代码,代码如诗 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容 更好地搜索引擎优化 切记:HTML的职责是描述一块内容是什么(或其意义)而不是它长的什么样子,它的外观应该由CSS来决定。
应用程序标签
【datalist(数据列表)】
datalist数据列表的呈现需要载体
cb8c59b3bd1c727d83210c4ed0cd660f 7da42d751d2e4ed6a1932f9fafc8ef2b cc2285245b0d602b24cf114e9eec15414afa15d3069109ac30911f04c56f3338 bbc713b71258610377da5292438891054afa15d3069109ac30911f04c56f3338 bbb84e3e75b36eb4260cf6b3db844ca1 cb8c59b3bd1c727d83210c4ed0cd660f 7da42d751d2e4ed6a1932f9fafc8ef2b cc2285245b0d602b24cf114e9eec15414afa15d3069109ac30911f04c56f3338 bbc713b71258610377da5292438891054afa15d3069109ac30911f04c56f3338 bbb84e3e75b36eb4260cf6b3db844ca1
【progress(进度条)】
要改变他的样式,需要先将-webkit-appearance设置为none
c9ccee2e6ea535a969eb3f532ad9fe89 .my_progress{ -webkit-appearance:none; } .my-progress::-webkit-progress-bar{ //样式 } 531ac245ce3e4fe3d50054a55f265927 d09da095138acc51c05890a144af0f05a211cb70e7878dbce34a6f8dc0175647
【meter(数值显示器)】
很少浏览器支持
a46a30771665aeb9b5e85ec962799a166fd20bd7b615c56cbd536dc339c52b20
显示器的最大最小值:max,min
显示器能够到达的最大最小值:hign,low
显示器的测量范围的最佳值:optimum
显示器显示的当前值:value
【menu(右键菜单)】
火狐兼容
【details(明细)】
点开一个内容可以展开面板,在火狐和谷歌兼容
属性
链接关系描述:用来描述指定链接与当前文档的关系,便于机器理解文档结构
常见的链接关系表
alternate 文档的可选版本(例如打印页、翻译页或镜像) stylesheet 文档的外部样式表 start 集合中的第一个文档 next 集合中的下一个文档 prev 集合中的前一个文档 contents 文档目录 index 文档索引 glossary 文档中所用字词的术语表或解释 copyright 包含版权信息的文档 chapter 文档的章 section 文档的节 subsection 文档的子段 appendix 文档附录 help 帮助文档 bookmark 相关文档 nofollow 用于指定 Google 搜索引擎不要跟踪链接 licence 一般用于文献,表示许可证的含义 tag 标签集合 friend 友情链接 案例 f982de946d3aca2cf98953d7e563e7dd 95d84653f4052f672699c5e27f945b42 4c8359476223086fa438293d93eb9b4a上一页5db79b134e9f6b82c0b36e0489ee08ed 78f45beb96436c120f1d47d26f43bd01下一页5db79b134e9f6b82c0b36e0489ee08ed c2a2a9e8983225ebc6272b69766aa844 4595839f8db372d30afea56767a88165 617e6a8cd949eae40639bb07899efa78 052580b01d15c892693f2ae88c3be3c8 a18886eb649ba8e5cc65c7f31dcfde4e 00d11dca6a5c650cca69a60a93f34bceold posts5db79b134e9f6b82c0b36e0489ee08ed baf0dfb9ec08604778bc96d39d234b04tutorial5db79b134e9f6b82c0b36e0489ee08ed e3bd948dabad79e7584ee749972015b0license5db79b134e9f6b82c0b36e0489ee08ed 49a0449f37cdabb1d3115749ff3ae035wannabe5db79b134e9f6b82c0b36e0489ee08ed c2871575685eb1f458f9355db9773e20games posts5db79b134e9f6b82c0b36e0489ee08ed
结构数据标记
高级东西,暂时只有谷歌支持
是为了使得容易抓取网页上的数据
ab18603caa3024d0745c55d2ae1b2812 e388a4556c0f65e1904146cc1a846bee我叫 cbeecf2d8e86e4b6feef26aab165ecea汪磊54bdf357c58b8a65c66d7c19c8e4d114。 94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我养了一条叫 025bed8044e67d69a8d59c6aeac48ff4旺财54bdf357c58b8a65c66d7c19c8e4d114的 925b576fba4d86fa0341642b2c73a22a金毛54bdf357c58b8a65c66d7c19c8e4d114犬。 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 比如抓取出: 主人:汪磊 狗名:旺财 品种:金毛
ARIA
####Accessible Rich Internet Application (无障碍富互联网应用程序) 主要针对于屏幕阅读设备(e.g. NVDA),更快更好地理解网页 不仅仅是为了盲人用户,更多语义化 1.数据注解,类似lable,只不过label是针对表格 2.可以通过aria知道数据的强相关 aria由一套属性组成,属性分为role以及对应的states和properties, aria将html元素分为六种role,每种有对应的states和properties, 但有一些是共用的,比如 aria-atomic aria-busy(state) aria-describedby aria-disabled(state) aria-dropeffect aria-flowto aria-haspopup aria-hidden(state) aria-invalid(state) aria-label aria-labelledby aria-owns aria-relevant 举个伪元素例子, ba5b346355c6386b1b74298854459131单选tabindex="0"94b3e26ee717c64999d7867364b1b4a3 这个p模拟了radio的功能,在平时读屏软件是分辨不出来的, 但是加上role及aria-checked状态, 在读屏软件(NVDA)中读出来就是: 单选2 单选按钮 选中 第1页 共1项
详细属性见:ARIA财付通设计中心.html
自定义属性 data
通过DOM存储与DOM对象强相关的数据 1.可以给html里的所有dom对象都可以添加一些data-xxx的属性 2.用来记录与当前DOM强相关的数据 55188415bb959a4149daa1b24f141c96 1b72d60e316605a0e13f50ca56c20d53张三bed06894275b65c1ab86501b08a632eb 1818b904a9a02c013243e3e8c8c0a81d李四bed06894275b65c1ab86501b08a632eb 0fce591c8a73dfed4013b797ecb3dd80王二bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
案例一:
3f1c4e4b6b16bbbd69b2ee476dc4f83a //键是ID 值是信息 var data = { 01:{ name:"伟哥哥", age:"18" }, 02:{ name:"伟哥哥", age:"19" }, 03:{ name:"伟哥哥", age:"20" } //jQuery操作一定要做变量本地化 var list = document.getElementById("list"); for(var id in data){ var item = data[id]; var liElement = document.createElement("li"); //liElement.innerHTML = item.name; liElement.appendChild(document.createTextNode(item.name)); liElement.setAttribute("data-age",item.age); liElement.setAttribute("data-id",item.id); list.appendChild(liElement);//变量本地化 //此处才将元素加到界面上 liElement.addEventListener("click",function(){ //alert(this.name); //this 是当前点击的元素 //alert(this.getAttribute("data-age")); console.log(this.dataset["age"]); }) } }; 2cacc6d41bbb37262a98f745aa00fbf0
案例二:
6c04bd5ca3fcae76e30b72ad730ca86d 55188415bb959a4149daa1b24f141c96 7d8bbe895324ecaaa463dfe8a60673aa 张三 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec bed06894275b65c1ab86501b08a632eb 8c3c5c0859bca259241054435258aa24 李四 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec bed06894275b65c1ab86501b08a632eb 835222f56f60aa7bb9381bea4867b018 王二 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 36cc49f0c466276486e50c850b7e4956 3f1c4e4b6b16bbbd69b2ee476dc4f83a var ul = document.getElementById('users'); for (var i = 0; i < ul.children.length; i++) { var li = ul.children[i]; // JS 添加data属性 i.setAttribute('data-name', li.innerText); i.children[0].innerText = ''; or (var key in li.dataset) { li.children[0].innerText += key + ':' + li.dataset[key] + '\n'; } } 2cacc6d41bbb37262a98f745aa00fbf0
案例三:
6c04bd5ca3fcae76e30b72ad730ca86d 5abfae0d0c5377a1c32d1cb4295b7e3a ff6d136ddc5fdfeffaf53ff6ee95f185 e71a14d35fad9dae03215f5184d21c9a新闻bed06894275b65c1ab86501b08a632eb 2e2f6f4cf3630ec8bc0e8c0d0de86da3八卦bed06894275b65c1ab86501b08a632eb 7bc3b64437273a87382f74c679c0bdfb体育bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 0e1db7c0d910d6a5bad328a32e5bf5d594b3e26ee717c64999d7867364b1b4a3 d96d8637faead70e78e60016290964f794b3e26ee717c64999d7867364b1b4a3 c9cd6baee48204250f2718c473c0025294b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 3f1c4e4b6b16bbbd69b2ee476dc4f83a $(function(){ //写这个是为了有一个单独作用于,避免污染 //api是应用程序编程接口 var $lis = $('.tabs>ul>li'); $lis.on("click",function(){ //获取目标对象的选择器 var targetSelector = $(this).data('target'); var $target = $(targetSelector); }); }); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956
智能表单
新的表单类型
b75414e04c642145443924ca99d735de //repuired表示必须的,表示填写框不能为空,会有提示但是提示不能更改 2e1cf0710519d5598b1f0f14c36ba674text:c24c7afc83ec4afe3fb02f8ded0bbfbe8c1ecd4bb896b2264e0711597d40766c0b9f73f8e206867bd1f5dc5957dbcb38 //只能判断中间是否有@ 2e1cf0710519d5598b1f0f14c36ba674email:08ff178fde649c92ccf063e3bb567edd8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674date:11bb4683223cc6aee9e1e3b4b507e8158c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a //拖动条,可以获得拉到的地方的数字 2e1cf0710519d5598b1f0f14c36ba674range:90a4666e88b2187cf2d3987c348b75ce8c1ecd4bb896b2264e0711597d40766c 0c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674search:f136344e4bf4152119f95b93a33225d98c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674tel:1a10eaf3310d2adc44c0ac7399fe855f8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674color:e6c6995dacbb0051990ec7884498551e8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674number:aceb7144f742d78ea10e529ac9b15f1d8c1ecd4bb896b2264e0711597d40766c0c6dc11e160d3b678d68754cc175188a 10c88813b1d79313d0132c5ec3999828 f5a47148e367a6035fd7a2faa965022e
虚拟键盘适配
手机键盘会根据不同的type类型弹出不同键盘类型 如打开数字键盘,密码键盘,邮件键盘 a1869a0fab1119b10395fb0740fdd997 2903e50b107d02bd744cd340aa803d45 3760599e2bb0a48e0485621a4afef5cb 8aa2a4efadc557a509c1e268ee119b1a db5d515e020586877b6233f209ea344e
网页多媒体
音频
多媒体的dom对象有一些新的方法可以去做播放暂停
单个数据源的方式
默认界面: 253e4f887fbe2a44684b0837a440f15481d2bc32cafa2076a27f10cdd878d0ab 自定义一个: fb20f59c3cab471700857c5011af959a81d2bc32cafa2076a27f10cdd878d0ab ddbd97e11a826e220b707861b3166e92播放65281c5ac262bf6d81768915a4a77ac0 d73940ac8a67a5eb165937b79784b595暂停65281c5ac262bf6d81768915a4a77ac0 3f1c4e4b6b16bbbd69b2ee476dc4f83a var btn = document.getElementById("btn"); var btn_pause = document.getElementById("btn_pause"); var audio = document.getElementById("audio"); btn.addEventListener("click",function(){ //播放音频 audio.play(); }); btn_pause.addEventListener("click",function(){ // 暂停音频 audio.pause(); }); 2cacc6d41bbb37262a98f745aa00fbf0
多个数据源的方式
3a0b47d6b7d1a713eedf1cb6300fd493 091e872d3dd629481706e3ebce2bcb63 81d2bc32cafa2076a27f10cdd878d0ab
视频
单个数据源的方式
efc19e3039b38fd86983760a147cecd1a6a9c6d3f311dabb528ad355798dc27d
多个数据源的方式
0bdb2adc2073320e0c1dfc3f376eae1c 不同浏览器支持格式不一样,因为版权问题 42bba746458018f1ce8f2af691262690055a816595e1cf5e4b7c6fe05c404a6c 5b3e5a5eda4bca5196a7a4eff304a9e1055a816595e1cf5e4b7c6fe05c404a6c 当浏览器不兼容video标签,就会将他以p方式解析 用第三方组件代替 109bc084877bc4ee3a4a2e0b72fbbc75 77e5a664aaa7ac48148dc60355f4dd9a 3fba71c3bc835a392031c12e70a6a998 990bfbd58a95dc25e049c2d4e43296f7 f6a01e56c6245d9f4a0f971e9009873b 54d3401fb8d25424029c60b836b8de78 f93f3bb348fc608b7378ea092dc0185c 0ba208064e3422ae2c07ba163cbe84b9 cc50b0bbcaeca591cb39322b2255483e7f0e93927bce2ed112529fe553df68ea您还没有安装flash播放器,请点击030006a66c28caf0e30980aa7e4ec9ed这里5db79b134e9f6b82c0b36e0489ee08ed安装54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 eb50c9ec568c9b96871b9e94a1ff3fd1 a6a9c6d3f311dabb528ad355798dc27d
视频播放器相关属性
属性 值 描述 autoplay autoplay 如果出现该属性,则视频在就绪后马上播放 controls controls 如果出现该属性,则向用户显示控件,比如播放按钮 height pixels 设置视频播放器的高度 loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放 muted muted 规定视频的音频输出应该被静音。【即:静音】 poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放 如果使用"autoplay",则忽略该属性 src url 要播放的视频的URL width pixels 设置视频播放器的宽度
字幕
字幕案例: 4ee8829483bb2064d602cb8fcadceb4f 4dc992bec4c660650ba8307f200c8aac 7d10e6b9b373469853fd5a7cdc5b3cb2 a6a9c6d3f311dabb528ad355798dc27d 字幕文件内容示例: WEBVIT FILE 1 00:00:00.000 --> 00:00:12.000 D:vertical A:start 2 00:00:12.000 --> 00:00:15.300 大家好,我是伟哥哥
Canvas
2D
3D (WebGL)
SVG
Scalable Vector Graphics 可缩放矢量图形
svg图片来源:通过AI,文件-->脚本-->将文档存储为SVG
svg可以像标签那样子直接黏贴到页面上,但是我们更希望像图片那样载入进来
可以借助三个标签载入: afe316ced42f90865dfeace516a5f233065276f04003e4622c4fe6b64f465b88 //推荐 65614834c6ab912992d4e9c8160b1141eb50c9ec568c9b96871b9e94a1ff3fd1 dec32c229f8a4cb4007cf118e91cfc40 学完ajax之后推荐方式: 学习完异步请求之后,我们可以遍历所有SVG节点,把src引入进来,本身他是一个document对象,可以把它直接append到文档中。 window.addEventListener('load',function(){ var svgs = document.getElementByTagName('svg'); for (var i = 0;i < svgs.length; i++){ //console.log(svg[i].dataset); var src = $(svgs[i].data('src')); //向服务器发送请求 得到svg $.get(src,function(data){ var el = data.documentElement; $(document.body).append($(el)); }); } }); 同时将svg文件里面的style删除,以便我们进行更改样式
补充:
1、sublime server插件安装
安装完不要stop serber,不用的时候直接要退出sublime,不然sublime会崩溃
2、谷歌浏览器开发者工具右上角展开栏的settings,给show useragent shadow DOM选上钩后可以看到虚拟出来的DOM
3.伪类对象
相当于在weigege后面插入一个,并且可以改变他的样式
c9ccee2e6ea535a969eb3f532ad9fe89 .content::after{ content: 'zuishuai'; color: #465; } 531ac245ce3e4fe3d50054a55f265927 bf6874f3abc615a5ee665c11de5510dfweigege94b3e26ee717c64999d7867364b1b4a3
4.h5新标签
h5新标签因为太新,可能在低级浏览器不能识别,不能识别的标签浏览器会自动识别为p进行加载,可以通过以下方式生成标签
方式一:自己定义
方式二:引入第三方组件html5shiv.js
里面是将所有h5新标签通过方式一的方式进行创建
5.在谷歌控制台输入一次输入下面代码
1.
document.body (回车)
document.body.contentEditable = true; (回车)
然后可以在页面上直接编辑文字
2.
直接在连接处输入
data:text/html, (回车)
可以直接在页面上编辑文字
6.第三方多媒体播放器库:jwplayer
7.专门为移动端使用的组件 zepto?
实现的api与jQuery基本相同
冗余处理兼容的代码都砍掉了
似乎可以代替jQuery
8.!important在老版本是顶不掉行内样式的
9.Markdown
开源项目说明文件都是用这种写的
语法链接:http://wowubuntu.com/markdown/
用普通文本描述富文本的语法
扩展名md,markdown
案例
h标签
HEADER1
HEADER2
HEADER3
段落直接写前面不用加东西
无序列表
前面有空格
有序列表
前面有数字都是有序列表,记得加空格
<br/>
特定的编辑器可以加javascript代表特定的语法,用于编写代码
10.iframe
相当于挖了一个坑把其他页面载入进来
以上是h5整理的笔记的详细内容。更多信息请关注PHP中文网其他相关文章!

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能,使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5不仅仅是HTML5的简称,它代表了一个更广泛的现代网页开发技术生态:1.H5包括HTML5、CSS3、JavaScript及相关API和技术;2.它提供更丰富、互动、流畅的用户体验,能在多设备上无缝运行;3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5与HTML5指的是同一个东西,即HTML5。HTML5是HTML的第五个版本,带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能,提升了网页的表现力和交互性。

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

"h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)