html你可能还不知道的一些知识点总结

html你可能还不知道的一些学问点

一、标签语义化html标签语义化是让大家直观的相识标签和属性的用途和作用，好处最主要的是对搜寻引擎友好Eg:

1、假如你想在页面中突出〃奥巴马〃这三个字，让搜寻引擎重视它，假如你这么写＜div＞奥巴马＜/div＞对于搜寻引擎来说，它也只是一个一般得不能再一般的三个字而已，尽管它是指代美国总统那么应当怎样才能让搜寻引擎知道它的重要性呢？来看看语义化的写法吧＜hl＞奥巴马＜/hl＞奥巴马看了后，乐了，哥原来就应当备受关注的！

2、假如文字要加粗显示，＜em＞是用作强调的，strong是用作重点强调的

3、对于标签＜s＞只是表示一个一般的删除线，而＜del＞标签更具语义化，它表示删除一个内容，并且del还带有cite和datetime来表明删除的缘由以及删除的时间

3、非主体结构标签

3.1datalist标签定义选项列表电input type二〃text“list二〃taglist”/datalist id=〃taglist〃〈option〉苹果〈/option〉〈option〉橘子〈/option〉〈option》西红柿〈/opt ion〉/datalist电

3.2details标签定义文档微小环节detailssummaryCopyright

2023./summarypAll pagesand graphicson thisweb siteare theproperty ofW3School./p/details

3.3menu标签定义列表menulihome/lilihome/lilihome/li/menu

3.4address地址标签addressWritten bya href=，/mailto:webmaster@example〃DonaldDuck/a.brVisit usat:brExample brBox564,DisneylandbrUSA/address

4.5progress进度条标签下载进度progress/progress

5.6mark高亮显示mark中国/mark人民最宏大

5.7标签定义日期或时间，或者两者P我们在每天早上〈time9:00/tinie起先营业/p

5.8新增的表单元素input type=〃email”/input type二〃url〃/input type二〃tel〃/input type二〃number min=〃1〃max=〃20〃step=〃4〃/input type=//range/z min=〃1〃max=〃20〃step=〃4〃/input type=〃search”/input type=〃color”/input type二〃date”/input type二〃month”/input type=〃week〃/input type=〃time”/电

3.9新增的input属性

3.

9.1用户输入自动完成功能电form autocompelete=z/onz/input type二〃text“list=〃citylist”/datalist id=〃citylist〃optionBeiJing/optionoptionQingDao/optionoptionQingZhou/optionoptionQingHai/option/datalist/form

3.

9.2页面加载的时候获得焦点input type=〃text autofocus=〃autofocus”/

3.

9.3form外也可以做数据提交form action=〃〃method=〃get id=/，forml///forminput type=〃text“name=〃address1〃fonn=〃forml〃/

3.

9.4form内的内容也可以改action地址form action=〃

1.aspx〃input type=〃submit value=〃提交〃fonnaction=〃

2.aspx〃//form

3.

9.5file可以支持多文件上传了input type=〃file“name二〃img〃multiple二〃multiple”/

4.

9.6支持自定义验证功能了form action=〃

1.aspx〃请输入邮政编码input type=〃text pattern=〃[0-9]{6}〃title二〃请6/input type=submit”//form新增默认内容提示了input type二〃text placeholder=”请输入用户名〃/》

3.

9.5新增不能为空属性form action=，，l.aspx〉请输入邮政编码〈input type=text required二〃required”/input type=submit”//form

3.10新增全局属性

3.

10.1contenteditable属性规定是否可编辑元素的内容p contenteditable=true〃这是一段可编辑的段落请试着编辑该文本/p

3.

10.2hidden属性规定对元素进行隐藏p hidden-hidden）这是一段隐藏的段落/pP这是一段可见的段落/p

3.

10.3tabindex属性规定当运用tab”键进行导航时元素的依次a href=〃〃tabindex=〃2〃〉W3School〈/aXbr/a href=〃〃tabindex=〃l〃Google〈/a〉〈br/a href=〃〃tabindex=〃3〃Microsoft〈/a

3.11其他属性

3.

11.1ol的reversed属性对列表依次进行降序ol reversedstart=〃5〃1i SHUFFLE三界恋曲/1i li扑杀天使/liGi零之使魔/li■li〉不要撒娇哦/极乐天师/纯情和尚俏尼姑/lilito love/出包王女/li/ol电

3.

11.2js的async属性规定一旦脚本可用，则会异步执行p id=//pl/，Hello World!/pscript type=text/javascript”src=z//example/html5/demo_async.js〃async二〃async〃〈/script

3.

11.3js的defer属性规定当页面已完成加载后，才会执行脚本script type=text/javascript”src=///example/html5/demo defer.js〃defer=z/deferz//script〈p上面的脚本从下面的段落请求信息通常，这是不行能的，因为脚本在段落加载之前已经执行了/pp id=〃pl〃Hello World!/pp不过，defer属性规定脚本稍后执行这样脚本就可以从段落中请求信息了〈/p视，让你想表达的东西，to begirlfriend,not tobe friendo

二、HTML标签补充

1、缩写说明abbr title-Hyper textMarkup Language，，HTML/abbr

2、定义列表（一般用于内容说明）dldt〉子曰“巧言令色，鲜矣仁！/dt〉dd〉孔子说“巧语花言，装出看法温柔的样子，这种人的仁心就很少了〈/dd〈dt季/dt■dd〉l、兄弟排行次序最小的季弟（小弟）,季父（小叔叔）”dddd〉

2、三个月为一季，一年分春夏秋冬四季/〉（］€1/dl

3、预格式文本标签被包围在pre元素中的文本通常会保留空格和换行符pre

1、这是一沟无望的死水

2、清风吹不起半点漪沦不如多扔些破铜烂铁

4、爽性泼它的剩菜残羹/pre电

4、版权符copy;

5、对html进行转义lt;bodygt;

三、H5新增标签

1、多媒体标签video、audio、canvas

1.1音频标签video不同阅读器对于html5audio标签和音频格式的兼容性（一般供应ogg和mp3格式，就可以支持全部主流阅读器了）音频格式Chrome FirefoxIE9Opera SafariOGG支持支持支持支持不支持MP3支持不支持支持不支持支持WAV不支持支持不支持支持不支持audio src=〃l.mp3〃controls=〃controls”〉audio controls=〃controls autoplayloopsource src=〃l.mp3〃type二〃audio/mpeg〃/source src=〃Logg〃type=〃audio/ogg〃//audio编解码工具FFmpeg下载地址C\Users\Adninistratorh\E\ffnpeg\bin\ffnpeg-i nanshannan.mp3-acodec libuorbisnanshannan.oggmp4转ogg方法同上

1.2视频标签videovideo src=〃l.mp3〃controls=，，controlszz autoplayvideocontrols=//controlsz，source src=〃l.nip4〃type二〃video/mpeg〃/source src=〃l.mp4〃type二〃video/ogg〃//video音视频播放、暂停、停止方法电var audio=document.getElementByld musicT;audio,play;〃播放audio,pause;〃暂停audio,pause;audio.currentTime=O;//停止

1.3画布标签:Canvas（须要协作js来做效果，后续再总结）

2、主体结构标签headernavarticle asidesectionfooter

2.1nav元素代表页面的导航链接区域用于定义页面的主要导航部分liHTML5/liliCSS3/liliJavaScript/li/ul/nav

2.2article元素展示网页中独立的一块内容，譬如论坛的帖子、博客的文章、一篇用户评论〈article〉〈hl〉一篇文章〈/hlP〉文章内容../p footer〈pXsmall）版权:html5jscss网所属,作者小北〈/smallX/p/footer/article〈article〉headerhl一篇文章/hlptime pubdatedatetime=//2023-10-03//2023/10/03/time/p/headerarticleh2评论/h2articleheader〈h3〉评论者XXX/h3ptime pubdatedatetime=z/2023-10-03T19:10-08:00，zl hour ago/time/p/headerp哈哈哈/p/articlearticleheader〈h3〉评论者XXX/h3ptime pubdatedatetime=〃2023To-03T19:10-08:00〃1hourago/time/p〜/header〈p哈？哈？哈？/p/article/article/article

2.3section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里依据主题的分段；“节”可以是指一个页面里的分组〈article〉hl〉前端技术/hl■Q前端技术有那些/p〉sectionh2CSS/h2p样式../p/sectionsectionh2JS/h2〈p〉脚本/p/section/article电

2.4aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是及当前文章有关的相关资料、标签、名次说明等、电articlep内容/paside〈hl〉作者简介〈/hl〈p小北，前端一枚/p/aside/article

2.5header元素展示一个区域的头部分

2.6footer元素展示一个区域的尾部分

2.7hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将hl到h6元素放在其内，譬如文章的主标题和副标题的组合hgroup■hl这是一篇介绍HTML5语义化标签和更简洁的结构/hl〉h2HTML5/h2/hgroup

2.8figure标签规定独立的流内容（图像、图表、照片、代码等等）figure元素的内容应当及主内容相关，但假如被删除，则不应对文档流产生影响figcaption标签定义figure元素的标题（caption）〃figcaption〃元素应当被置于figure元素的第一个或最终一个子元素的位置〈figure〉figcaption黄浦江上的的卢浦大桥/figcaptionimg src=//shanghai_lupu_bridge.jpg〃width=350〃height=〃234〃//figure。