让我们通过一个网页的学习，来对html标签有一个初步理解。

平常大家说的上网就是浏览各种各式各样的网页，这些网页都是由html标签组成的。

下面就是一个简单的网页。效果图如下：

我们来分析一下，这个网页由哪些html标签组成：

“勇气”是网页内容文章的标题，<h1></h1>就是标题标签，它在网页上的代码写成<h1>勇气</h1>。

“三年级时...我也没勇气参加。” 是网页中文章的段落，<p></p>是段落标签。

它在网页上的代码写成 <p>三年级时...我也没勇气参加。</p>

网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成<img src="1.jpg">

网页的完整代码如下图：

总结一下，可以这么说，网页中每一个内容在浏览器中的显示，都要存放到各种标签中。

示例:

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>认识html标签</title>

    </head>

    <body>

        <h1>勇气</h1>

        <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

        <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

        <img src="http://img.imooc.com/52b4113500018cf102000200.jpg" >

    </body>

</html>

　　

认识html标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. 新建PCH文件以及常用宏定义

    $(SRCROOT)/项目名/pch文件名.pch //0-255的随机数 #define randint arc4random() % 256 //随机色 #define randColor [UI ...

  2. BZOJ1976: [BeiJing2010组队]能量魔方 Cube

    1976: [BeiJing2010组队]能量魔方 Cube Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 832  Solved: 281[Submi ...

  3. HDOJ(HDU) 2078 复习时间

    Problem Description 为了能过个好年,xhd开始复习了,于是每天晚上背着书往教室跑.xhd复习有个习惯,在复习完一门课后,他总是挑一门更简单的课进行复习,而他复习这门课的效率为两门课 ...

  4. 大规模Hadoop集群在腾讯数据仓库TDW的实践

    随着业务的快速增长,TDW的节点数也在增加,对单个大规模Hadoop集群的需求也越来越强烈.TDW需要做单个大规模集群,主要是从数据共享.计算资源共享.减轻运营负担和成本等三个方面考虑. 数据共享.T ...

  5. G - Island Transport - hdu 4280（最大流）

    题意:有N个岛屿,M条路线,每条路都连接两个岛屿,并且每条路都有一个最大承载人数,现在想知道从最西边的岛到最东面的岛最多能有多少人过去(最西面和最东面的岛屿只有一个). 分析:可以比较明显的看出来是一 ...

  6. java的内部类及匿名内部类

    在Java中,允许一个类的定义位于另一个类的内部,前者称为内部类 内部类和外层封装它的类之间存在逻辑上的所属关系 Inner class一般用在定义它的类或语句块之内,在外部引用它时必须给出完整的名称 ...

  7. [原创]python MySQLdb在windows环境下的安装、出错问题以及解决办法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 问题:windows下安装MySQLdb的方法 解析:python没有php那种集成环境,比如wamp那种集成软件直接把所有需要的东西全部一次性搭 ...

  8. 对openflow 1.0协议的扩展

    通过这几天对openvswitch代码的分析,以及项目的须要,须要对openflow 1.0进行一定的扩展,发现网上没有这方面的教程,尽管在搞懂ovs代码架构,floodlight controlle ...

  9. Android BaseAdapter ListView (明星简介列表)

    1.搭建布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" andro ...

  10. SQL报错error:索引中丢失IN或OUT參数

    简单记录下: 今天mybatis中遇到一个错误: org.springframework.jdbc.UncategorizedSQLException: PreparedStatementCallba ...