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

番茄西红柿发布于2019-08-01 18:42 / 775人阅读

摘要：可读性，提高代码的可读性，便于多人的修改维护，提高开发效率。主流浏览器都兼容的新标签，对于及以下版本不认识的新元素，可以使用创建一个没用的元素来解决，例如，也可以使用来解决兼容性问题，详情可参考

概览

文档章节

导航

表示和主要内容不相关的区域

表示一个独立的、可重复的结构

表示一组内容，相邻的section之间的内容是有相关性的，相邻的article标签之间是独立的

标题

文本

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

   //href 属性，链接地址
   //target 跳转方式
   //_self:当前窗口显示；
   //_blank:新开一个窗口显示；
   //也可是一个名称name，在名为name的iframe中打开链接
   给阿航发邮件
   给联通打电话
   
  //?cc抄送
  //subject 主题

更多不是特别常用的标签

    //表示强调
     //粗体强调
   
 换行，在内容中换行 
    //斜体，用在文章标题处；
    //表示引用，会加引号“”；
    //放代码
    //粗体，关键词
    //斜体，关键字

组合内容

分区
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:大块的引用

嵌入资源

图片

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

嵌入页面

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

嵌入外部资源（可能是pdf等插件）

   //在type属性中指定插件类型，插件的参数可以放在param标签中，
   //播放器的地址也可以写在object的data属性上面，ie8以下不兼容data属性

嵌入插件

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

和video标签很类似

(热点区域）

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

表格

table

   
       照片冲印价格详情
       
           
               
               照片尺寸
               富士
               科达
           
       
       
           
               6寸
               
               0.45
               0.6
           
       
       
           
               
               运费8元每单，满99免运费

表单

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 创建一个没用的元素来解决，例如：，也可以使用shiv来解决兼容性问题，详情可参考HTML5 Shiv https://github.com/afarkas/ht...）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52017.html

前端复习笔记

摘要：一基本结构设置字符编码集格式网页头部二文本标记加粗倾斜下划线删除线上标下标三引用样式表的方式内联样式在元素的开始标签里，设置一个属性，并设置对应的属性名及属性值例使用场景里，使用给元素添加样式内部样式表在标签里加上一对标签，并且在标签设置对一、基本结构 //设置字符编码集格式 // //网页头部二、文本标记1.加粗 b2...

yhaolpz 2019-04-23 11:46 评论0 收藏0

HTML+CSS复习之HTML基础篇

摘要：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。一些说明写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识我把HTML标签分成两大类，重要的和不重要的，...

genefy 2019-08-29 12:35 评论0 收藏0

HTML+CSS复习之HTML基础篇

MrZONT 2019-08-01 16:51 评论0 收藏0

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

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

相关文章

前端复习笔记

HTML+CSS复习之HTML基础篇

HTML+CSS复习之HTML基础篇

发表评论

0条评论

番茄西红柿

男|高级讲师

TA的文章

tensor

Windows 下安装 XGBoost

Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

Linux系统和宝塔面板如何启用禁ping功能?

301重定向怎么做?301重定向设置方法有几种

wordpress网站重定向次数过多的解决方法

最新活动

企业采购季！

多种GPU机型限时特惠

GPU算力平台

高等级、高电力的数据中心托管服务