HTML 超文本标记语言

HTML的解析

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

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客链接</title>
</head>
<body>
<h2>请点击下面的链接通往kerwin的博客</h2>
<a href ="http://www.cnblogs.com/kerwinC/" target="_blank">kerwin&nbsp;&gt;的博客</a>
<p>kerwin的博客是kerwin先生自己的博客<br />博客内容非常丰富。</p>
 <span>版权所有</span>
 <span>kerwin</span>
</body>
</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. Comprehensive learning path – Data Science in Python深入学习路径-使用python数据中学习

    http://blog.csdn.net/pipisorry/article/details/44245575 关于怎么学习python,并将python用于数据科学.数据分析.机器学习中的一篇非常好 ...

  2. SURF特征

    了解了SIFT特征后,来学习SURF特征. 虽说是SIFT的一个变种,可是跟SIFT还是有差别的 差别有例如以下: 1.尺度空间的构建(近似)不同. 2.同意尺度空间多层图像同一时候被处理 3.特征点 ...

  3. Android原理揭秘系列之一动态墙纸

    Livewallpaper,即动态墙纸,是Android的一大3D特色功能,用户可以在桌面选择加载动态墙纸,让自己的手机桌面背景旋动起来. 相对于静态桌面壁纸,动态墙纸可以展示各种动态变化的背景,而与 ...

  4. Lenovo k860i 移植Android 4.4 cm11进度记录【下篇--实时更新中】

    2014.8.24 k860i的cm11的移植在中断了近两三个月之后又開始继续了,进度记录的日志上一篇已经没什么写的了,就完结掉它吧,又一次开一篇日志做下篇好了.近期的战况是,在scue同学的努力之下 ...

  5. ETL几种方案对比

  6. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...

  7. C# typeof Gettype is as &拆箱 装箱

    有时候,我们不想用值类型的值,就是想用一个引用..Net提供了一个名为装箱(boxing)的机制,它允许根据值类型来创建一个对象,然后使用对这个新对象的一个引用. 首先,回顾两个重要的事实,1.对于引 ...

  8. IDEA 运行 控制台显示一堆乱码,一些问号

    如下: 问题: 配置程序运行参数的时候,配置到了"VM options",应该为配置到"Program arguments",如图:

  9. IIS中启用gzip压缩(网站优化)

    HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的 ...

  10. 会话控制session,cookie(0521)

    简单介绍: 一.什么是session? 1. 定义: Session,在计算机中,尤其是在网络应用中,称为“会话”.在计算机专业术语中,Session是指一个终端用户与交互系统进行通信的时间间隔,通常 ...