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. ajax请求方法及参数说明

    $.ajax()请求示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. 【Tensorflow】 Object_detection之训练PASCAL VOC数据集

    参考:Running Locally 1.检查数据.config文件是否配置好 可参考之前博客: Tensorflow Object_detection之配置Training Pipeline Ten ...

  3. svn server配置与TortoiseSVN、Ankhsvn+VS使用

    Svn服务器与客户端安装 1.      下载安装VisualSvn-Server服务端.(过程略)http://subversion.apache.org/packages.html 2.      ...

  4. Spark on Yarn运行错误：Yarn application has already ended! It might have been killed or unable to launch application master

    Spark on Yarn模式运行错误: bin/spark-shell --master yarn --deploy-mode client #报错 ​ 查看8088页面上的工作日志 错误原因:在执 ...

  5. TOJ 1690 Cow Sorting (置换群)

    Description Farmer John's N (1 ≤ N ≤ 10,000) cows are lined up to be milked in the evening. Each cow ...

  6. TOJ 1258 Very Simple Counting

    Description Let f(n) be the number of factors of integer n. Your task is to count the number of i(1 ...

  7. 移动开发:Android官方提供的支持不同屏幕大小的全部方法

    转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8830286 原文地址为:http://developer.android.com/ ...

  8. JS代码格式化排版工具,web文本编辑器

    js格式化代码工具:http://www.cnblogs.com/blodfox777/archive/2008/10/09/1307462.html web文本编辑器 :http://www.div ...

  9. [转] CentOS下添加用户并且让用户获得root权限

    http://www.centoscn.com/CentOS/config/2014/0810/3471.html 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser ...

  10. http状态代码含义收藏

    状态代码(也称作错误代码),指为服务器所接收每个请求(网页点击)分配的 3 位数代码.多数有效网页点击都有状态代码 200("正常")."网页未找到"错误会生产 ...