HTML是web前端开发的基础，学习前端的人都是先从html学起的。

关于HTML有一些必备的知识点，这些知识点都是HTML中最基本的内容，也是前端面试最常问的知识点。

1、网页结构
网页结构一般都包含文档声明DOCTYPE，并且在head中的meta应该包含编码格式、关键字、网页描述信息。简单格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="description" content="。。。。。。">
<meta name="Keywords" content="。。。。。。">
<title>Hello World</title>
</head>
<body>
</body>

</html>

2、自关闭元素
<br>、<embed> 、<hr>、<img>、<input>、<link>、<meta>、<param>、<source>、<wbr>
自关闭元素不需要使用结束标签。

3、布局最常用的两个元素
（1）div：流布局使用；
（2）span：文字块使用。

4、块级别元素和行级别元素
块级别元素：是指开始在新的行，占领整行宽度。例如div默认是块级别block元素；
行级别元素：仅仅维持内容的宽度，例如文字块的span元素；
通过CSS的display属性声明元素显示级别，一般包括inline行级别、inline-block行内块元素、block、table块级别表格。

5、文字类元素
（1）加粗元素：strong、b。例如：
<p><strong>Caution:</strong> Falling rocks.</p><p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
（2）倾斜元素：和。例如：
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>
<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>

6、HTML5新增的结构化元素
（1）结构化元素包括：<header>, <nav>, <article>, <section>, <aside>, <footer>。
（2）元素级别：都是block级别元素，不包含样式，只用于结构化，每个页面可多次使用。
（3）元素说明：header描述头部信息，nav用于导航模块，article用于可重新覆盖的新闻类内容块，section模块化，aside页面左或右模块，footer底脚模块。

7、页面内跳转
如果需要跳转到页面指定的位置，可在该位置设置元素的id属性，然后为链接添加href="#id"。例如：
<body id="top">
...
<a href="#top">Back to top</a>
...
</body>

html 7大知识点的更多相关文章

  1. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单：google 一个关键词你能看到十几篇优秀的博文，再这些博文中寻找新的关键字，直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  2. 学习JavaScript你必须掌握的8大知识点！

    大知识点! 一.JavaScript思维导图之<变量>的学习 二.    JavaScript思维导图之<函数基础>  三.JavaScript思维导图之<基本dom操作 ...

  3. gradle的安装，配置，构建，研究，初体验......（入职一周研究的第一个大知识点）

    (1)Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置.更 ...

  4. 学Java分布式和高架构，必懂的两大知识点！

    今天小编为你们分享阿里巴巴2018年招聘应届毕业生,Java工程师的面试考题,主要分为三种 Java中获取 mysql连接的方式: 第一部分:分布式   三步变成:分布式 1.将你的整个软件视为一个系 ...

  5. 10分钟详解Spring全家桶7大知识点

    Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...

  6. JavaScript你必须掌握的8大知识点

    一:JavaScript思维导图之<基本dom操作> 二.JavaScript思维导图之<变量>的学习 三.  JavaScript思维导图之<函数基础>  四.J ...

  7. Javascript知识点记录（二）

    Javascript入门易,精通难,基本上是共识的一个观点.在这个篇幅里,主要对一些难点进行记录. 鸭子类型 Javascript属于动态类型语言的一种.对变量类型的宽容,给了很大的灵活性.由于无需类 ...

  8. FPGA知识大梳理（一）对FPGA行业的一点感言

    今天想开始把这FPGA行业的知识点做一个大整理,从个人感想,到语法,到器件基础,难点攻克,到项目应用.把自己这几年接触到的知识做一个全面的回顾,看看自己这几年走过的路. 人生无常,几年的跌跌撞撞勉强算 ...

  9. BZOJ:4530: [Bjoi2014]大融合

    4530: [Bjoi2014]大融合 拿这题作为lct子树查询的练手.本来以为这会是一个大知识点,结果好像只是一个小技巧? 多维护一个虚边连接着的子树大小即可. #include<cstdio ...

随机推荐

  1. ObjectiveC 文件操作一

    1,引用和使用文件 NSFileManager 是一个单例对象,在mac应用中可以获取任何地址,在IOS中获取的是相对应的应用程序的地址.可以使用 defaultManager 来得到当前应用程序地址 ...

  2. ExtJS 自定义组件

    主要参考的是官方文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 转: angular编码风格指南

    After reading Google's AngularJS guidelines, I felt they were a little too incomplete and also guide ...

  4. 产品在焊接时出现异常，尤其是尺寸较大的QFP芯片，焊接后出现虚焊、冷焊、假焊等问题?

    1 不良描述 客户采用我们提供的SMT设备后,部分产品在焊接时出现异常,尤其是尺寸较大的QFP芯片,焊接后出现虚焊.冷焊.假焊等不良.应客户要求对这一批不良产品以及生产条件进行分析,以便找到改善的依据 ...

  5. BZOJ 无数据题集合

    题目 http://www.lydsy.com/JudgeOnline/problem.php?id=1142 http://www.lydsy.com/JudgeOnline/problem.php ...

  6. Java基础：容器

    转载请注明出处:jiq•钦's technical Blog 一.Collection:存放独立元素 Collection中的接口都是可选操作,事实上现类 并不一定实现了其全部接口,这是为了防止&qu ...

  7. c 转置字符串You are a so cheap man ->man cheap so a are You

    解题思路: 1.将字符串转置 2.对转置后的字符串中单词转置 #include<stdio.h> #include<string.h> #include<stdlib.h ...

  8. iOS面试题05-父子控制器、内存管理

    内存管理.父子控制器面试题 1.建立父子关系控制器有什么用 回答:1>监听屏幕选中 2>如果想拿到你当前的很小的一个控制器所在的导航控制器必须要跟外面比较大的控制器建立父子关系,才能一层一 ...

  9. JQuery DataTable插件

    参考文件: http://blog.csdn.net/xuechongyang/article/details/8424897 http://blog.csdn.net/llhwin2010/arti ...

  10. HTML静态网页（框架）

    1.frameset frameset最外层,使用时需要去除body改用frameset. <frameset  rows="100,*" frameborder=" ...