概览

文档章节

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

标题

文本

<a></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，改善用户体验)
<iframe></iframe> 嵌入页面
- 当前页面的上下文（css，js）和嵌入页面中的内容是隔离的，
- 在嵌入页面中的操做并不影响当前页面
- 比如页面中的播放器，可以放在iframe中，这样页面的操作就不会影响播放器的操作
<object></object> 嵌入外部资源（可能是pdf等插件）
- 在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></embed> 嵌入插件

    <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/HTML5_video#Browser_support audio文件兼容性https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats

表格

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

转载于:https://juejin.im/post/5aaa8e326fb9a028c522ec75

前端基础知识复习之html相关推荐

【前端基础知识笔记】【项目导向型】（持续更新中）
我在做项目的过程中,学习了一些前端基础知识.为了方便以后的查询,将这些知识集中在这篇博客中,方便以后的查询. 注意!这些知识是不成体系的,因为我只是按照遇到的先后顺序记载于此.这是为了方便结合项目开发 ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
linux基础知识复习
@(tigerfive)[linux,基础知识,复习笔记] linux基础复习(一) 今天只整理框架,具体内容之后详细整理吧文件管理文件基本操作创建文件和目录拷贝文件和目录剪切文件和目录删 ...
2021 版 Spring Boot 基础知识复习手册（2w字，建议收藏）
点击上方好好学java ,选择星标公众号重磅资讯,干货,第一时间送达今日推荐:分享一套基于SpringBoot和Vue的企业级中后台开源项目,这个项目有点哇塞!个人原创100W +访问量博客: ...
JDBC基础知识复习
JDBC基础知识复习 1.JDBC连接数据库 1.1.导入JDBC驱动 1.2.注册JDBC驱动程序 1.3.创建连接对象 1.4.关闭JDBC连接 1.5.每种数据库对应的驱动名和URL 2.JDB ...
Java基础知识复习(一)
Java基础知识复习(一) 目录 Java简介命名规则八种基本的数据类型字面量类型转换变量的形态逻辑运算符位运算移位运算习题知识点目录 Java简介 Java是由Sun公司在199 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
2011计算机等级考试二级c语言公共基础教程.doc,2011年全国计算机等级考试二级c语言公共基础知识复习100题及答案.doc...
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp资格/认证考试&nbsp>&nbsp计算机等级考试 2011年全国计算机等级考试二级c语言公 ...
计算机二级的公共基础课水平测试,计算机二级公共基础知识复习试题含答案
计算机公共基础课程,是针对高校非计算机专业学生设立的一门必修计算机基础课程.以下是由学习啦小编整理关于计算机二级公共基础知识复习试题含答案的内容,希望大家喜欢! 计算机二级公共基础知识复习试题含答案( ...

前端基础知识复习之html

概览

文档章节

标题

文本

组合内容

嵌入资源

表格

表单

语义化

前端基础知识复习之html相关推荐

最新文章

热门文章