html常见元素分为两类，一类是header区的元素，一类是body区的元素
header区元素：
meta

title

style

link

scipt

base
里面包括像meta,title,style,link,scipt,base这些元素。这些元素之所以在header中，是因为不会在页面上留下直接的内容，主要是页面相关的一些资源和信息描述
<meta charset="utf-8">

charset表示页面使用都是什么样的字符集，使用哪种编码，utf-8是包含非常非常多的字符集，基本上可以揽括所有的英文＋中文，当然还包括一些其他国家的文字，一般第一行都加上utf-8，保证页面不会出现编码上的问题

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
name叫做viewport，viewport什么意思呢，就是view查看，port口，查看口，一般我们认为是视口，视口什么意思呢，就是一般我们的手机屏幕，电脑屏幕，这个屏幕有多大。width=device-width，表示宽度等于设备宽度。initial-scale=1,表示初始化的缩放比例是1。maximum-scale=1.0，最大缩放是1。user-scalable=no，用户不能缩放
<base href="/">
指定基础路径，后面所有路径是以这个路径为基础
body区元素：
div/section/article/aside/header/footer

p

span/em/strong

table/thead/tbody/tr/td // 表格相关

ul/ol/li/dl/dt/dd // 列表类

a // 链接

form/input/select/textarea/button // 表单
body跟header区不一样，是直接呈现在页面上，所以元素会多一些，首先是div,这是一个万能元素，只要搞不定，就上div，所以他语义并不明确，section/article/aside/header/footer及后面都有自己都语义
<p>

　　input type="radio" name="radio1" id="radio1-1">

　　<label for="radio1-1">选项一</label>

　　<input type="radio" name="radio1" id="radio1-2">

　　<label for="radio1-2">选项一</label>

</p>
这个label里面的for就是跟radio相关联，不然点击文字，并不能选中按钮
如何理解HTML
1、HTML '文档'
2、描述文档的 ‘结构’
3、有区块 和 大纲
<body>

　　<section>

　　　　<h1>Forest elephants</h1>　　

　　　　<section>

　　　　　　<h1>Introduction</h1>

　　　　　　<p>in this section, we discuss the lesser known forest elephants</p>

　　　　</section>

　　　　<section>

　　　　　　<h1>Habitat</h1>

　　　　　　<p>forest elephants do not live in trees but among them.</p>

　　　　</section>

　　　　<aside>

　　　　　　<p>adertising block</p>

　　　　</aside>

　　</section>

　　<footer>

　　　　<p>(c) 2010 the example company</p>

　　</footer>

</body>
section是区域，发现虽然这是个html，但跟我们的文档是非常像的，我们抽取一下， 这个文档的大纲大概是这个样子
1.Forest elephants

　　1.1 Introduction

　　1.2 Habitat

　　1.3 Section(aside)

我们能知道页面的大概结构，html5增加了这么多语义化的标签，就是为了让html的结构更清晰，语义更明显，那么同时他也推出了一份大纲的算法，规定了哪些元素是列入大纲的，用了什么样的方式去做这个大纲

http://h5o.github.io/
这个是html5的大纲算法工具，他有几种使用方式
1、chrome插件

2、书签，只要把 H5O v0.12.4 拖到书签栏上就可以用了
这样一个大纲让我们html的结构变得非常清晰，那么增这个有什么用呢，我又不会天天去看这个大纲，对，可能对用户来说，没有那么大的用处，但是你的网页是由百度去看的，是由google去看的，是由爬虫去看，这个时候发现，这个大纲其实非常有意义，他能更好的让机器或者其他的阅读器了解你这个页面的结构，当机器，搜索引擎，蜘蛛等等都能很好的了解你的html结构的时候，你自己理解起来也会非常容易，那么就说这个html文档是非常合理，所以要关注我们html的语义，这是我们要避免的事情

html常见元素和理解的更多相关文章

  1. HTML基础知识（常见元素、列表、链接元素、图片元素）

    1.HTML有关概念 全称: Hyper Text Markup Language(超文本标记语言) 其文件扩展名为".html"或".htm" * 超文本 - ...

  2. tomcat的配置文件server.conf中的元素的理解

    tomcat的配置文件server.conf中的元素的理解 tomcat作为一个servlet服务器本身的配置文件是tomcat_home/conf/server.conf,这个配置文件中有很多元素, ...

  3. [python爬虫] Selenium常见元素定位方法和操作的学习介绍(转载)

    转载地址:[python爬虫] Selenium常见元素定位方法和操作的学习介绍 一. 定位元素方法 官网地址:http://selenium-python.readthedocs.org/locat ...

  4. Selenium4.0+Python3系列（四） - 常见元素操作（含鼠标键盘事件）

    一.写在前面 上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏.转发! 二.元素的状态 在操作元素之前,我们需要了解元素的常见状态. 1.常见元素状态判断,傻傻 ...

  5. HTML简单介绍及常见元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 对css中clear元素的理解

    clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选 ...

  7. HTML常见元素集锦

    在讲解本次课程前:我们先来看下什么是浏览器: 所谓浏览器就是可以解释和执行HTML代码的工具.还有一个概念我们需要搞清楚,浏览器!=IE,IE只是浏览器当中的一种.除了IE还有N多浏览器,google ...

  8. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  9. css 块状元素与行内元素(内联元素)的理解

    块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...

随机推荐

  1. 利用Flume将本地文件数据中收集到HDFS

    1. 创建文件 放入一个txt文件 然后查看hdfs上的文件夹 不知道为什么并没有出现本地的文件 也不报错 后来发现,没有在logs文件夹下面,在newlogs文件夹下面

  2. pandas.read_csv()函数读取文件时，关于“header=None”影响读取列数区间的右闭合总结

    对于一个没有字段名标题的数据,如data.csv 1.获取数据内容.pandas.read_csv("data.csv")默认情况下,会把数据内容的第一行默认为字段名标题. imp ...

  3. shell 函数与内置变量

    1,特殊shell变量 $# 传递到脚本的参数个数 $* 以一个单字符串显示所有向脚本传递的参数 $$ 脚本运行的当前进程ID号 $! 后台运行的最后一个进程的ID号 $@ 与$*相同,但是使用时加引 ...

  4. Java基础19-封装、方法重载、构造方法（构造函数）

    1.封装 封装就是把不想或者不该告诉别人的东西隐藏起来,把可以告诉别人的公开 做法:修改属性的访问权限来限制对属性的访问.并为每一个属性创建一对取值方法和赋值方法,用于对这些属性的访问 class D ...

  5. 守护客户数据价值：企业级NewSQL HTAP分布式云TBase架构详解

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:jasonys,隶属于腾讯技术工程事业群数据平台部,负责TBase数据的技术研发和架构设计,有超过10年的数据库内核开发设计经验,完成 ...

  6. 2018湖湘杯web、misc记录

    1.题目名 Code Check 打开题目,右键发现有id参数的url,简单base64解码以后发现不是明文,说明利用了其他的加密方式,那么应该会有具体的加密方式给我们,于是试试常见的文件泄露,可以发 ...

  7. css三角块

    html: <div class="angle"></div> css: .angle{ width: 0px; height: 0px; border-b ...

  8. VB.Net遍历已安装的程序卸载信息

    Private Shared Function ProgramExists(ByVal pgName As String) As Boolean Dim temp As String = Nothin ...

  9. 1.zookeeper的安装

    1.解压zk压缩包 tar -zxvf (zk压缩包路径名) -C (解压目标目录路径) 2.在zk解压目录下新建data文件夹 mkdir data 3.在data文件夹下新建myid vi myi ...

  10. html-框架标签的使用

    <frameset> - rows:按照行进行划分 ** <frameset rows="80,*"> - cols:按照列进行划分 ** <fram ...