HTML 超文本标记语言

HTML的解析

　　顾名思义，HTML就是由一个个的标签组成的，组成后，HTML可被浏览器直接识别以及处理成我们想给用户展示的样子。

　　下面我们就来解析HTML的一个个标签。

　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>博客链接</title>
  6. </head>
  7. <body>
  8. <h2>请点击下面的链接通往kerwin的博客</h2>
  9. <a href ="http://www.cnblogs.com/kerwinC/" target="_blank">kerwin&nbsp;&gt;的博客</a>
  10. <p>kerwin的博客是kerwin先生自己的博客<br />博客内容非常丰富。</p>
  11.  <span>版权所有</span>
  12.  <span>kerwin</span>
  13. </body>
  14. </html>

在这个例子中 <header></header> 是这个页面的大脑部分<body></body> 是这个页面的身体部分，而<html></html>，则就是这一整个人了。

HTML的标签，就像是填充这个身体的器官，共同构成了一个完整的人。

HTML的标签分类

标签分为主动闭合和被动闭合标签。

还分为行内标签以及块标签

主动闭合

< meta charset="UTF=8">

meta标签是一个典型的主动闭合标签，它可以提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。

<div></div>

div标签，一个强大的被动闭合标签，同时也是个行级标签。

<span></span>

span标签，一个被动闭合标签，同时也是个块级标签。

块级标签和行内标签的对比如下图：

html中的特殊字符

太多了，请自行查看：

http://www.jb51.net/onlineread/htmlchar.htm

meta标签的妙用

此标签在head标签内使用

<meta charset="UTF-8">    设置页面的字符集

<meta http-equiv="refresh" content="3"> #设置页面三秒刷新一次
<meta http-equiv="refresh" content="3;Url=http://www.baidu.com"> #设置三秒刷新后，调转到百度。<meta name="keywords" content="商城">　　#给搜索引擎抓取

<meta name="description" content="网购来这里">　　#给搜索引擎抓取　　

title标签

此标签在head标签内使用

<title>商城</title>　　#显示在这里

link标签

此标签在head标签内使用

<link rel="shortcut icon" herf="image/favicon.ico">

此标签就是title内容旁边的那个小图。

style标签

此标签在head标签内使用

script标签

此标签在head标签内使用

a标签

<a href="http://www.cnblogs.com/kerwinC"></a>

a标签可以做点击跳转

P标签

<p>2016年美国总统大选投票计票于当地时间11月8日正式进行。<br />据美国福克斯新闻网11月9日最新消息，特朗普283:254领先希拉里，已确认赢得大选。<br />支持者欢呼。</p>

p标签可以做段落，段落与段落之间是有空间的，段落内换行的话加入<br />即可。

h标签

<h1></h1>

......

<h6></h6>

h标签可作为标题，大小由大（h1）到小（h6）

span标签

span标签是一个行内标签，它里面的内容不会占具超过自己字符的空间。

<span>hello</span>

初识前端HTML的更多相关文章

  1. 20初识前端HTML（1）

    1 .HTML 1.1 网页的组成 文字 图片 链接 等元素构成.除了这些元素之外 网页中还可以包含音频 视频 等 1.2 WEB前端开发的流程 现在主流的开发流程: 前后端分离的开发模式. 美工:p ...

  2. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  3. day 41 前端之前端初识

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  4. 01 . 前端之HTML

    初识前端 HTML简介历史 HTML(Hyper Text Markup Language)超文本标记语言,它不同于编程语言 超文本就是超过纯文本的范畴,例如描述文本的颜色.大小.字体等信息,或使用图 ...

  5. 写给自己的web总结——关于html的知识总结

    相信每个前端工程师初识前端之时,最先接触的都是html吧! html的全称是hyperText markup language, 超文本标记语言,在网页中所有的文字,图片,架构等都是由html来编写的 ...

  6. webpack之loader实践

    初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...

  7. 适合 JS 新手学习的开源项目——在 GitHub 学编程

    作者:HelloGitHub-小鱼干 这里是 HelloGitHub 的<GitHub 上适合新手的开源项目>系列的最后一篇,系列文章: C++ 篇 Python 篇 Go 篇 Java ...

  8. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  9. 装饰器的初识,基于bootstrap的前端开发

    1装饰器的初识 概念:不改变函数原来的调用方式,动态地给函数添加功能 开放封闭的原则:1>对添加的新功能是开放的,32>不要在元代码进行修改(封闭) 1.1>函数的定义:对代码块和功 ...

随机推荐

  1. WIN32_FIND_DATA 循环获取文件大小BUG

    今天在调试程序时发现一个 WIN32_FIND_DATA 的BUG,在循环读取一个目录下的图片文件时,发现结构体中 nFileSizeLow 和 nFileSizeHigh 值 == 0的情况.即能获 ...

  2. 黑马程序员_<<泛型>>

    --------------------ASP.Net+Android+IOS开发..Net培训.期待与您交流! -------------------- 1.     泛型 1.概述 泛型是为了解决 ...

  3. 利用ESLint检查代码质量

    1. ESLint ESLint 是一个插件化的 javascript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行代码风格检查,这样我们就可以根据自己的喜好指定一套 ...

  4. 使用VisualVM查看Java Heap Dump

    浏览Heap Dump 可以使用VisualVM浏览heap dump文件的内容,从而快速查看在堆中分配的对象.Heap dumps在主窗口的heap dump子标签页中显示.你可以打开保存在本地的h ...

  5. ACPI电源管理中的S0 S1 S2 S3 S4 S5

    电源选项中S0,S1,S2,S3,S4,S5的含义以 ACPI 的规格来说吧!ACPI(Advanced Configuration and Power Interface),即高级配置与电源接口.这 ...

  6. C语言函数指针(转载)

    二.通常的函数调用 一个通常的函数调用的例子:/* 自行包含头文件 */void MyFun(int x); /* 此处的声明也可写成:void MyFun(int) */int main(int a ...

  7. No suitable authentication method found to complete authentication (publickey,keyboard-interactive).

    string command = Command.Text; StringBuilder result = new StringBuilder(); try { var connectionInfo ...

  8. GridView格式化数据DataFormatString

    设定BoundField的DataFormatString,通常有以下几种 DataFormatString= "{0:C}" 货币,货币的格式取决于当前Thread中Cultur ...

  9. SignalR2.0开发实例之——创建房间聊天

    SignalR作为一个强大的集线器,已经在hub里面集成了Gorups,也就是分组管理,使用方法如下: //作用:将连接ID加入某个组 //Context.ConnectionId 连接ID,每个页面 ...

  10. Function Currying in javascript 的一些注释

    理解函数柯里化(Function Currying ),最关键的是理解下面这个函数: function curry(fn){ var args = Array.prototype.slice.call ...