认识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):在 ...
随机推荐
- 蟠桃记 AC 杭电
蟠桃记 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- jQuery显示与隐藏返回顶层的箭头
<script type="text/javascript"> $(window).scroll(function(){ var d ...
- ios学习-delegate、传值、跳转页面
ios学习-delegate.传值.跳转页面 1.打开xcode,然后选择ios--Application--Empty Application一个空项目. 项目目录: 2.输入项目名称以及选 ...
- EGE图形库配置(Dev-C++ 5.10 , TDM GCC 4.8.1)
准备工作:1>Dev-C++ 5.10版本 系统 Win XP/WIN 7 2>下载EGE图形库“ege-13.04.02-full” !,关于本次配置的Dev-C++的信息见如: ...
- SPSS与聚类分析
1.进行K均值聚类分析时需要线标准化处理,抛弃量纲差异,比如说数值型变量有的以千记有的以百分数记.2.层次聚类就是先把每个样本都看成一个独立的类:聚类特征(Clustering Feature, CF ...
- rysnc,scp与bashrc冲突问题
问题是: scp file user@host:dst失败,user用户的bashrc文件中加入了 sudo su -,自动切换到root用户. 症状是输入密码验证失败. rsync, scp是传输文 ...
- Seek the Name, Seek the Fame
poj2752:http://poj.org/problem?id=2752 题意:给你一个串,让你求前n个字符和后n个字符相同的n有多少,从小到大输出来. 题解:这一题要深刻理解KMP的next数组 ...
- es watcher
https://www.elastic.co/products/watcher https://www.elastic.co/blog/watcher-beta-goes-public-you-kno ...
- 三个QT咨询公司以及QT5.0的主要特点
三个咨询公司(他们也贡献代码):http://www.kdab.com/http://v-play.net/http://www.ics.com/qt 一个论坛:http://forum.qt.io/ ...
- 使用 Spring Boot 快速构建 Spring 框架应用,PropertyPlaceholderConfigurer
Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...