前端复习笔记--1.html标签复习速查

时间 2019-12-07

标签前端复习笔记 1.html html 标签速查栏目 HTML 繁體版

原文原文链接

概览

文档章节

<body>
<header>
<nav> 导航
<aside> 表示和主要内容不相关的区域
<article> 表示一个独立的、可重复的结构
<section> 表示一组内容，相邻的section之间的内容是有相关性的，相邻的article标签之间是独立的
<footer>
<hx>

标题

文本

a标签建立指向另外一个文档的连接；建立指向另外一个文档内部的锚点；连接到email地址；css

//href 属性，连接地址
   //target 跳转方式
   //_self:当前窗口显示；
   //_blank:新开一个窗口显示；
   //也但是一个名称name，在名为name的iframe中打开连接
   <a href="mailto:zhangweihang_amy@qq.com">给阿航发邮件</a>
   <a href="tel:10010">给联通打电话</a>
   
  //?cc抄送
  //subject 主题

更多不是特别经常使用的标签html

<em></em> //表示强调
   <strong></strong>  //粗体强调
   <br> 换行，在内容中换行 
   <cite></cite> //斜体，用在文章标题处；
   <q></q> //表示引用，会加引号“”；
   <code></code> //放代码
   <b></b> //粗体，关键词
   <i></i> //斜体，关键字

组合内容

分区
div：自己没有任何的语义，主要用来做为分区,h5以前没有header这种语义化的标签，
段落
p：段落

列表，列表是能够嵌套的
ul：无序列表（导航，节目列表，用户列表等均可以用无序列表来表示）html5

//默认的li的样式会有小圆点，能够用css来控制
   .class{
       list-style:none
   }

ol：有序列表 （排行榜）git

//适合作排行榜等有顺序的列表，默认样式会有序号123
   //序号能够用type属性改变，start属性用来改变起始序号；

dl：自定义列表 github

//dt定义了列表项，dd定义了对列表项的描述，
   //每一项的dt只能有一个，对应的dd能够有多个，
   //dd会有必定缩进

pre:把code标签的内容放到pre标签中，能够保留code内容中的换行
blockquote:大块的引用web

嵌入资源

<img> 图片canvas

//页面中嵌入图片，自闭和标签
   //src图片路径
   //alt描述图片的含义
   //若是网速慢等状况，致使图片没有加载出来，或者地址写错了致使没法加载图片，
   //alt的内容就会替代图片，显示出来
   //通常都会要求写上alt，改善用户体验

//当前页面的上下文（css，js）和嵌入页面中的内容是隔离的，
   //在嵌入页面中的操作并不影响当前页面
   //好比页面中的播放器，能够放在iframe中，这样页面的操做就不会影响播放器的操做

//在type属性中指定插件类型，插件的参数能够放在param标签中，
   //播放器的地址也能够写在object的data属性上面，ie8如下不兼容data属性
   <object data="" type="application/x-shockwaveflash">
       <param name="movie" value="http://pdfReader.swf">
       <param name="flashvars" value="http://book.pdf">
   </object>

<embed src="http://pdfReader.swf" type="application/x-shockwaveflash">

<video></video> 在h5中可使用video标签来插入视频，viedo标签，只有高版本的浏览器才支持

<!--由于不一样的浏览器对视频的支持格式不同，-->
   <!--因此要准备多个视频文件，放在source的标签中，若是只有一个视频文件，能够直接放在video标签的src里面-->
   <!--浏览器会选择一个它支持的文件视频类型来播放-->
   <video src="" controls="controls" poster="海报地址" autoplay>
       <source src="movie.mp4" type="video/mp4">
       <source src="movie.webm" type="video/webm">
       <source src="movie.ogg" type="video/ogg">
       <track kind="subtitles" src="video.srt" label="English">
       您的浏览器不支持video标签
   </video>
  
   <!--经过controls，显示控制条-->
   <!--poster用来指定封面，若是没有指定，则显示视频的第一帧；-->
   <!--track属性用来引入字幕-->
   <!--autoplay属性用来设置为自动播放-->
   <!--loop属性，循环播放,没有指定，则播放完毕后显示视频的最后一帧-->

<audio></audio> 和video标签很相似
<canvas> （图）基于像素的，有不少图形函数，能够在js中进行绘制；适合用来处理比较复杂的，实时性比较高的，好比游戏；
<svg> （图）是矢量的，适合用来处理高保真的、静态的图形图像
<map> (热点区域）

<area> (热点区域）

<!--coords,区域-->
   <!--shape,形状-->
   <img src="图片地址" alt="图片名称" width="1090" height="995" usemap="#Map2">
   <map name="Map2">
       <area shape="rect" coords="669,75,1075,682" href="xiupin.com/..." target="_blank">
       <area shape="rect" coords="26,93,391,337" href="xiupin.com/..." target="_blank">
   </map>

附录
video文件兼容性 https://en.wikipedia.org/wiki...
audio文件兼容性https://en.wikipedia.org/wiki...

表格

table

<table>
       <caption>照片冲印价格详情</caption>
       <thead>
           <tr>
               <!--表头单元格用th表示-->
               <th>照片尺寸</th>
               <th>富士</th>
               <th>科达</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>6寸</th>
               <!--普通单元格用td表示-->
               <td>0.45</td>
               <td>0.6</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <!--跨列用colspan，跨行用rowspan-->
               <td colspan="3">运费8元每单，满99免运费</td>
           </tr>
       </tfoot>
   </table>

表单

form

<!--action，接口；method，方式-->
   <form action="/login" method="post">
       <!--fieldset表示不一样的区域-->
       <fieldset>
           <legend>照片选择</legend>
           <!--input有两个重要的属性，name和value，name是向后台传值时的参数名，value是向后台传值时的参数值-->
           <input type="file" name="file">
       </fieldset>
   
       <fieldset>
           <legend>填写信息</legend>
           <div>
               <!--多选-->
               <!--checked 表示默认选中-->
               <!--同一组单选框或者多选框的name的值是同样的-->
               <input type="checkbox" value="香蕉" id="banana" checked><label for="banana">香蕉</label>
               <input type="checkbox" value="苹果" id="apple"><label for="apple">苹果</label>
           </div>
           <div>
               <!--单选-->
               <input type="radio" value="榨汁" id="1" name="how-to-eat" checked><label for="1">榨汁</label>
               <input type="radio" value="直接吃" id="2" name="how-to-eat"><label for="2">直接吃</label>
               <!--disabled属性用来禁用某个选项-->
               <input type="radio" value="不吃了" id="3" name="how-to-eat" disabled><label for="2">不吃了</label>
           </div>
           <div>
               <!--文本-->
               <!--label为表单作提示，for对应input、textarea、select的id-->
               <label for="name">姓名</label>
               <!--placeholder占位符，默认展现的文字-->
               <!--readonly属性，表示只读-->
               <!--hidden属性表示隐藏，页面上不可见，可是向后台传值的时候是传的-->
               <input type="text" id="name" placeholder="请输入姓名" readonly>
               <input type="text" id="name2" placeholder="请输入姓名" readonly hidden>
           </div>
           <div>
               <label for="more-info">备注</label>
               <!--多行文本框用textarea表示-->
               <textarea name="" id="more-info" cols="30" rows="10"></textarea>
           </div>
           <label for="delivery">delivery</label>
           <!--下拉框-->
           <select name="" id="delivery">
               <!--optgroup用来区分选项组-->
               <optgroup label="group1">
                   <option value="0">快递</option>
                   <option value="1">平邮</option>
               </optgroup>
               <option value="2" selected>EMS</option>
           </select>
       </fieldset>
       <!--<div>-->
       <!--&lt;!&ndash;input也能够用来作按钮，可是，为了更好地语义化，咱们一般使用button&ndash;&gt;-->
       <!--<input type="submit">-->
       <!--<input type="reset">-->
       <!--</div>-->
       <div>
           <button type="submit">提交</button>
           <button type="reset">重置</button>
       </div>
   </form>

input

//input的type属性
   //email
   //url
   //number
   //tel
   //search
   //range 必定范围内的数据
   //color 颜色的拾色器
   //date-picker （date，month，week，time，datetime，datetime-local）

语义化
什么是语义化呢？
了解每一种标签的用途，用适当的标签来描述页面。
语义化的做用：1.便于SEO（Search Engine Optimization）优化，咱们的页面是给搜索引擎看的，搜索引擎的爬虫呢会根据语义话的标签来肯定关键字的权重，这样子咱们的关键字能和用户的关键字能更加的匹配；另外，搜索引擎也会给语义化的页面一个更高的权重，这样咱们的页面也会更早出如今用户的搜索结果中。2.可访问性，页面也多是给残障人士看的，他们能够经过屏幕阅读器来访问页面，屏幕阅读器会对不一样的标签发出不一样的声音，使用更语义化的标签可以传达不一样信息的重要性，使他们可以更好的理解页面的内容。3.可读性，提升代码的可读性，便于多人的修改维护，提升开发效率。
（ps：主流浏览器都兼容HTML5的新标签，对于 IE8 及如下版本不认识 HTML5的新元素，可使用 JavaScript 建立一个没用的元素来解决，例如：<script>document.createElement("header");</script>，也可使用shiv来解决兼容性问题，详情可参考HTML5 Shiv https://github.com/afarkas/ht...）