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

HTML

时间:2016-05-24 15:05:13      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

1  HTML概述

HTML 是用来描述网页的一种语言。

1.HTML 指的是超文本标记语言 (Hyper Text Markup Language)

2.HTML 不是一种编程语言,而是一种标记语言 (markup language)

3.标记语言是一套标记标签 (markup tag)

4.HTML 使用标记标签来描述网页

 

HTML 文档 = 网页

实例:

 

<!DOCTYPE html>

<html>

       <head>

              <meta charset="utf-8" />

              <title>网页标题</title>

       </head>

       <body>

       </body>

</html>

 

以上就是一个web页面最基本的标签结构:

1.<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

2.Html标签:是包裹整个页面元素的根元素,通常情况下document.documentElement(页面根元素)获取的就是html标签。

3.Head标签:头部标签,主要包含meta标签、title标签、link标签(引入CSS)、script标签(引入CSS)等。

4.Meat标签:提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />,定义了文档以utf-8编码。

5.Title标签:页面的标题,设置之后将在浏览器选项卡看到。

6.Body标签:页面的主体内容。

 

HTML标签不需要专门的编译工具,它可以直接通过浏览器解析渲染成可见的网页,你只需要一个文本文档写入html标签,文件后缀改成html之后即可直接在浏览器运行查看。对于初学者,可以现在就自己写一个简单的网页。

 

2   HTML标签

2.1    常见标签

以下列出部分常见的html标签(除了刚刚上面讲到的基本标签)

标签名

英文全称

中文翻译

常用属性(值)

link

-

-

href(CSS地址)

script

-

-

Src(JS地址)

div

division

分隔

-

span

-

范围

-

a

anchor

href(跳转地址)

p

paragraph

段落

-

form

-

表单

action(表单提交地址)

method(提交方式,get/post)

h1~h6

header1~header6

标题

-

ul

-

无序列表

-

li

-

列表项目

-

img

image

图片

src(图片地址)

input

-

按钮

Type(按钮类型)

iframe

-

内联框架

Src(显示的文档的地址)

 

2.2    行内与块状

Html标签在页面中的表现形式可以分为两类 ,内联(行内)元素、块状元素

1.内联不占行,如input,span,a

2.块状元素,占行,如div,p,h1~h6

 

3   HTML语义

3.1    什么是HTML语义

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

 

3.2    为什么要语义化

1.为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;

2.用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

3.有利于SEO(搜索引擎优化):和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

4.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

5.便于团队开发和维护,语义化更具可读性,是下一步web网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

 

3.3    Id命名语义

标签元素很多都会命名一个id,id值也不能随意命名,比如一个导航栏模块,最外层的div元素id尽量设置为nav,这样子其它程序员一眼就能明白这个div的功能。下面列出了一些常见模块的标签使用时,id的命名规范。

 

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

登录条:loginbar

标志:logo

广告:banner

轮转:promo

页面主体:main

热点:hot

新闻:news  

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

版权copyright

......

 

4   标签使用注意事项

1.绝大部分标签需要闭合,严格遵守。

2.块状元素原则上不允许被包裹在行内元素里面。

3.不要滥用div,尽量使得HTML文档是具有语义的可读程序。

4.HTML文档虽然不是编程语言,也需要缩进和注释,确保可读可维护。

5.放弃使用样式标签,如b,font,u等,放弃使用样式类别的标签属性,如color属性等,HTML与样式分离。

6.避免元素嵌套的层级过多,这将增加文档的复杂性,提高维护成本并降低可扩展能力。

7.也不要为了语义而过分纠结用哪一个标签更好,有时候自己把握分寸。

HTML

标签:

原文地址:http://www.cnblogs.com/jaded/p/5523270.html

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