码迷,mamicode.com
首页 > Web开发 > 详细

html常见元素和理解

时间:2019-01-12 10:41:12      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:str   索引   不能   col   github   bit   cti   rest   使用   

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常见元素和理解

标签:str   索引   不能   col   github   bit   cti   rest   使用   

原文地址:https://www.cnblogs.com/wzndkj/p/10258561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!