html你可能还不知道的一些知识点总结_第1页
html你可能还不知道的一些知识点总结_第2页
html你可能还不知道的一些知识点总结_第3页
html你可能还不知道的一些知识点总结_第4页
html你可能还不知道的一些知识点总结_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

html你可能还不知道的一些学问点一、标签语义化html标签语义化是让大家直观的相识标签和属性的用途和作用，好处最主要的是对搜寻引擎友好。Eg:1、假如你想在页面中突出〃奥巴马〃这三个字，让搜寻引擎重视它，假如你这么写：＜div＞奥巴马＜/div＞对于搜寻引擎来说，它也只是一个一般得不能再一般的三个字而已，尽管它是指代美国总统。那么应当怎样才能让搜寻引擎知道它的重要性呢？来看看语义化的写法吧：＜hl＞奥巴马＜/hl＞奥巴马看了后，乐了，哥原来就应当备受关注的！2、假如文字要加粗显示，＜em＞是用作强调的，strong是用作重点强调的。3、对于标签＜s＞只是表示一个一般的删除线，而＜del＞标签更具语义化，它表示删除一个内容，并且del还带有cite和datetime来表明删除的缘由以及删除的时间。3、非主体结构标签1<datalist>标签定义选项列表。电<inputtype二〃text“list二〃taglist”/><datalistid=〃taglist〃>〈option〉苹果〈/option〉〈option〉橘子〈/option〉〈option》西红柿〈/option〉</datalist>电3.2details标签定义文档微小环节<details><summary>Copyright2023.</summary><p>AllpagesandgraphicsonthiswebsitearethepropertyofW3School.</p></details>3.3menu标签定义列表<menu><li>home</li><li>home</li><li>home</li></menu>4address地址标签<address>Writtenby<ahref=，/mailto:webmaster@example〃>DonaldDuck</a>.<br>Visitusat:<br>Example<br>Box564,Disneyland<br>USA</address>5progress进度条标签下载进度：<progress></progress>6mark高亮显示<mark>中国</mark>人民最宏大标签定义日期或时间，或者两者<P>我们在每天早上〈time>9:00</tinie>起先营业。</p>新增的表单元素<inputtype=〃email”/><inputtype二〃url〃/><inputtype二〃tel〃/><inputtype二〃number"min=〃1〃max=〃20〃step=〃4〃/><inputtype=//range/zmin=〃1〃max=〃20〃step=〃4〃/><inputtype=〃search”/><inputtype=〃color”/><inputtype二〃date”/><inputtype二〃month”/><inputtype=〃week〃/><inputtype=〃time”/>电3.9新增的input属性3.9.1用户输入自动完成功能电<formautocompelete=z/onz/><inputtype二〃text“list=〃citylist”/><datalistid=〃citylist〃><option>BeiJing</option><option>QingDao</option><option>QingZhou</option><option>QingHai</option></datalist></form>3.9.2页面加载的时候获得焦点<inputtype=〃text"autofocus=〃autofocus”/>3.9.3form外也可以做数据提交<formaction=〃〃method=〃get"id=/，forml//></form><inputtype=〃text“name=〃address1〃fonn=〃forml〃/>3.9.4form内的内容也可以改action地址<formaction=〃1.aspx〃><inputtype=〃submit"value=〃提交〃fonnaction=〃2.aspx〃/></form>9.5file可以支持多文件上传了<inputtype=〃file“name二〃img〃multiple二〃multiple”/>9.6支持自定义验证功能了<formaction=〃1.aspx〃>请输入邮政编码：<inputtype=〃text"pattern=〃[0-9]{6}〃title二〃请6 /><inputtype="submit”/></form>新增默认内容提示了<inputtype二〃text"placeholder=”请输入用户名〃/》3.9.5新增不能为空属性<formaction=，，l.aspx"〉请输入邮政编码：〈inputtype="text"required二〃required”/><inputtype="submit”/></form>10新增全局属性10.1contenteditable属性规定是否可编辑元素的内容。<pcontenteditable="true〃>这是一段可编辑的段落。请试着编辑该文本。</p>10.2hidden属性规定对元素进行隐藏。<phidden-hidden"）这是一段隐藏的段落。</p><P>这是一段可见的段落。</p>3.10.3tabindex属性规定当运用"tab”键进行导航时元素的依次。ahref=〃〃tabindex=〃2〃〉W3School〈/aXbr/>ahref=〃〃tabindex=〃l〃>Google〈/a〉〈br/>ahref=〃〃tabindex=〃3〃>Microsoft〈/a>3.11其他属性3.11.1ol的reversed属性对列表依次进行降序<olreversedstart=〃5〃><1i>SHUFFLE"三界恋曲</1i><li>扑杀天使</li>Gi>零之使魔</li>■<li〉不要撒娇哦/极乐天师/纯情和尚俏尼姑</li><li>tolove/出包王女</li></ol>电3.11.2js的async属性规定一旦脚本可用，则会异步执行。<pid=//pl/，>HelloWorld!</p><scripttype="text/javascript”src=z//example/html5/demo_async.js〃async二〃async〃>〈/script>3.11.3js的defer属性规定当页面已完成加载后，才会执行脚本。<scripttype="text/javascript”src=///example/html5/demodefer.js〃defer=z/deferz/></script>〈p>上面的脚本从下面的段落请求信息。通常，这是不行能的，因为脚本在段落加载之前已经执行了。</p><pid=〃pl〃>HelloWorld!</p><p>不过，defer属性规定脚本稍后执行。这样脚本就可以从段落中请求信息了。〈/p>视，让你想表达的东西，tobegirlfriend,nottobefriendo二、HTML标签补充1、缩写说明<abbrtitle-HypertextMarkupLanguage，，>HTML</abbr>2、定义列表（一般用于内容说明）<dl><dt〉子曰：“巧言令色，鲜矣仁！"</dt〉<dd〉孔子说：“巧语花言，装出看法温柔的样子，这种人的仁心就很少了。"〈/dd>〈dt>季</dt>■<dd〉l、兄弟排行次序最小的：季弟（小弟）,季父（小叔叔）”dd><dd〉2、三个月为一季，一年分春夏秋冬四季</（］€1〉</dl>3、预格式文本标签被包围在pre元素中的文本通常会保留空格和换行符<pre>1、这是一沟无望的死水2、清风吹不起半点漪沦不如多扔些破铜烂铁4、爽性泼它的剩菜残羹</pre>电4、版权符©5、对html进行转义<body>三、H5新增标签1、多媒体标签：video、audio、canvas1.1音频标签video不同阅读器对于html5audio标签和音频格式的兼容性（一般供应ogg和mp3格式，就可以支持全部主流阅读器了。）音频格式ChromeFirefoxIE9OperaSafariOGG支持支持支持支持不支持MP3支持不支持支持不支持支持WAV不支持支持不支持支持不支持<audiosrc=〃l.mp3〃controls=〃controls”〉<audiocontrols=〃controls"autoplayloop><sourcesrc=〃l.mp3〃type二〃audio/mpeg〃/><sourcesrc=〃Logg〃type=〃audio/ogg〃/></audio>编解码工具：FFmpeg(下载地址：)C：\Users\Adninistrator>h：：\>E：\ffnpeg\bin\ffnpeg-inanshannan.mp3-acodeclibuorbisnanshannan.oggmp4转ogg方法同上。1.2视频标签video<videosrc=〃l.mp3〃controls=，，controlszzautoplay><videocontrols=//controlsz，><sourcesrc=〃l.nip4〃type二〃video/mpeg〃/><sourcesrc=〃l.mp4〃type二〃video/ogg〃/></video>音视频播放、暂停、停止方法：电varaudio=document.getElementByldmusicT);audio,play();〃播放audio,pause();〃暂停audio,pause();audio.currentTime=O;//停止1.3画布标签:Canvas（须要协作js来做效果，后续再总结）2、主体结构标签<header><aside><nav><aside><article><section><footer>nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。<li>HTML5</li><li>CSS3</li><li>JavaScript</li></ul></nav>article元素展示网页中独立的一块内容，譬如论坛的帖子、博客的文章、一篇用户评论。〈article〉〈hl〉一篇文章〈/hl><P〉文章内容..</p><footer>〈pXsmall）版权:html5jscss网所属,作者：小北〈/smallX/p></footer></article>〈article〉<header><hl>一篇文章</hl><p><timepubdatedatetime=//2023-10-03//>2023/10/03</time></p></header><article><h2>评论</h2><article><header>〈h3〉评论者：XXX</h3><p><timepubdatedatetime=z/2023-10-03T19:10-08:00，z>"lhourago</time></p></header><p>哈哈哈</p></article><article><header>〈h3〉评论者：XXX</h3><p><timepubdatedatetime=〃2023To-03T19:10-08:00〃>〜1hourago</time></p></header>〈p>哈？哈？哈？</p></article></article></article>2.3section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里依据主题的分段；“节”可以是指一个页面里的分组。〈article〉<hl〉前端技术</hl>■Q前端技术有那些</p〉<section><h2>CSS</h2><p>样式..</p></section><section><h2>JS</h2>〈p〉脚本</p></section></article>电4aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是及当前文章有关的相关资料、标签、名次说明等、电<article><p>内容</p><aside>〈hl〉作者简介〈/hl>〈p>小北，前端一枚</p></aside></article>2.5header元素展示一个区域的头部分2.6footer元素展示一个区域的尾部分7hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将hl到h6元素放在其内，譬如文章的主标题和副标题的组合<hgroup>■<hl>这是一篇介绍HTML5语义化标签和更简洁的结构</hl〉<h2>HTML5<

人人文库> 全部分类> 应用文书 > 年终总结

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论