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

概览

文档章节

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

标题

文本

a标签创建指向另一个文档的链接；创建指向另一个文档内部的锚点；链接到email地址；

   //href 属性，链接地址

   //target 跳转方式

   //_self:当前窗口显示；

   //_blank:新开一个窗口显示；

   //也可是一个名称name，在名为name的iframe中打开链接

   <a href="mailto:zhangweihang_amy@qq.com">给阿航发邮件</a>

   <a href="tel:10010">给联通打电话</a>

  //?cc抄送

  //subject 主题

更多不是特别常用的标签

   <em></em> //表示强调

   <strong></strong>  //粗体强调

   <br> 换行，在内容中换行

   <cite></cite> //斜体，用在文章标题处；

   <q></q> //表示引用，会加引号“”；

   <code></code> //放代码

   <b></b> //粗体，关键词

   <i></i> //斜体，关键字

组合内容

分区
div：本身没有任何的语义，主要用来作为分区,h5之前没有header这种语义化的标签，
段落
p：段落

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

   //默认的li的样式会有小圆点，可以用css来控制

   .class{

       list-style:none

   }

ol：有序列表 （排行榜）

   //适合做排行榜等有顺序的列表，默认样式会有序号123

   //序号可以用type属性改变，start属性用来改变起始序号；

dl：自定义列表

   //dt定义了列表项，dd定义了对列表项的描述，

   //每一项的dt只能有一个，对应的dd可以有多个，

   //dd会有一定缩进

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

嵌入资源

<img> 图片

   //页面中嵌入图片，自闭和标签

   //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...）

前端复习笔记--1.html标签复习速查的更多相关文章

2013年7月28日web前端学习笔记-------head相关标签应用
7月份快过完了.趁周日写写学过觉得有用的东西. 1.缩略图的展示问题,不要以为缩略图设置了width,height,就是缩略图了.比如一个300kb的500*500原始图片,用户请求web服务器后,展 ...
Angular复习笔记7-路由（上）
Angular复习笔记7-路由(上) 关于Angular路由的部分将分为上下两篇来介绍.这是第一篇. 概述路由所要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL来表 ...
Angular复习笔记7-路由（下）
Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...
Angular复习笔记5-指令
Angular复习笔记5-指令在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...
angular复习笔记4-模板
Angular复习笔记4-模板简介模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...
Java基础复习笔记系列九网络编程
Java基础复习笔记系列之网络编程学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...
Java基础复习笔记系列八多线程编程
Java基础复习笔记系列之多线程编程参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...
Java基础复习笔记系列七 IO操作
Java基础复习笔记系列之 IO操作我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...
Java基础复习笔记系列五常用类
Java基础复习笔记系列之常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

随机推荐

三十七、www服务nginx进阶
六.查看nginx默认首页和目录:如下,可以看到,默认的目录是html,首页是index.html [root@djw1 conf]# grep html nginx.conf ...
31）PHP，对象的遍历
对象的遍历: 对象也可以可以使用foreach语句进行便利,有两点注意: 1,只能便利属性.(所以,这个就解决了,为啥之前的数据库类,我只是看到了一些属性名字,而没有得到我的属性值) 2,只能便利“看 ...
day30-client上传比较大的数据给server
#在网络上面传输的数据叫数据包,数据包里面的数据叫报文,报文都有报头. #报头可以包含文件路径.文件大小.文件名称等等.#当数据比较长,一次性发送会报错,需要分多次发送.#client端上传数据到se ...
阿里巴巴IconFont的使用方式
一.解释一下为什么要使用IconFont? IconFont顾名思义就是把图标用字体的方式呈现. 其优点在于以下几个方面: 1.可以通过css的样式改变其颜色:(最霸气的理由) 2.相对于图片来说,具 ...
signal之——异步回收机制
前言:回收子进程之前用了wait()和非阻塞模型,今天学了信号以后可以使回收机制更上一层楼,通过信号函数,父进程只需要做自己的事情,接收到信号后就触发信号函数. 信号处理函数可能会出现的bug: 1. ...
wait操作接口
1.等待回收的两个函数wait()和waitpid()函数 1.1 wait(int *status)的用法:阻塞函数,等待任意一个子进程的返回. *wait(NULL):对子进程的结束状态不关心 ...
iOS 仿看了吗应用、指南针测网速等常用工具、自定义弹出视图框架、图片裁剪、内容扩展等源码
iOS精选源码扩展内容的cell - folding-cell 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... JPImageresizerView 仿微信的图片裁剪带年月和至今以 ...
吴裕雄--天生自然 HADOOP大数据分布式处理：CenterOS 7 多台物理机、虚拟机相互桥连接ping通，并且能够成功连接外网
选择用于桥接模式下的虚拟交换机,并且要选择对应的有线或者无线的网卡,如果主机是插网线联网的,那就选择有线网卡,如果主机是连无线网络的就选择无线网卡.Realtek PCIe GBE Family Co ...
PXE自动部署工具
1.工具介绍1.1::本工具主要以图形界面的方式帮助使用者快速部署PXE安装Linux的基础环境环境,(如不需要可忽略相关操作)并且支持自动配置静态IP地址和为H3C设备划分VLAN. 1.2::对于 ...
乐观锁（Optimistic Lock）
乐观锁(非阻塞)指不通过锁表来解决并发问题,一般情况下表数据都会加入一个version字段,对该字段进行比较更新来保证数据的一致性. 这里写了个demo,应该可以说明乐观锁的问题. public cl ...