认识html标签
让我们通过一个网页的学习,来对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标签的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- elasticsearch 安装
### USAGE ### ### ./ElasticSearch.sh 1.5.0 will install Elasticsearch 1.5.0 ### ./ElasticSearch.sh 1 ...
- a标签的 target 使用
<a target="_blank" href="www.baidu.com" onclick="return test()"> ...
- ubuntu后台运行命令行
ubuntu 程序后台运行几个方法 . 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 . 将1中的命令放在 “()”中, ...
- 【HDOJ】5154 Harry and Magical Computer
拓扑排序. /* 5154 */ #include <iostream> #include <cstdio> #include <cstring> #include ...
- -_-#toFixed
parseFloattoFixed
- 引用 运行asp.net程序时候,编译器错误消息: CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\Fra
引用 运行asp.net程序时候,编译器错误消息: CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary A ...
- 酷派D530刷机指引
酷派D530是我的第一台智能手机,刚入手的时候是挺激动的,什么Root啦,精简系统删官方应用啦,app2sd啦,杂七杂八的应用装了一堆,折腾得不亦乐乎.但过了那个热度之后,现在我对于智能手机的要求还是 ...
- citrix+netscaler配置第一次培训
citrix_netscaler配置第一次培训.pptx http://files.cnblogs.com/files/niaowo/citrix_netscaler%E9%85%8D%E7%BD%A ...
- ruby迭代起基础
“循环”会用在程序中的各种地方.而在循环的地方善用“迭代器”,则是熟练进行Ruby程序设计的重要关键. 不过,迭代器确实有比较抽象的地方,语法也有点怪异(尤其是yield的用法),光是依靠文字说明.看 ...
- 男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略 - 国外 - 快鲤鱼
男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略 - 国外 - 快鲤鱼 男装电商Bonobos融资5500万美元,计划IPO,全靠体验店战略