PythonNote01_HTML标签
》头标签<head>
》》位置
头标签要放在头部之间
》》种类
<title> : 指定整个网页的标题，在浏览器最上方显示。
<meta> : 提供有关页面的基本信息。
<meta http-equiv="refresh" content="3;http://www.baidu.com">
这个meta标签的意思是：3秒之后，自动跳转到百度页面。（记住）
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 --> </head>
头标签
》body标签<body>
》》属性
bgcolor : 设置整个网页的背景颜色。
background : 设置整个网页的背景图片。
text : 设置网页中的文本颜色。
》排版标签
》》段落标签<p>
》》》格式
<p>段落内容</p>
》》》PS
段落前后会自动空一行
输入段落内容后 --> ctrl + d --> shift + alt + w --> 自动添加段落标签
》》》属性
align : 对齐方式； 属性值有：left、center、right；PS:默认是左对齐
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 段落标签的align属性 -->
<p>
这是第一段
</p> <p align="center">
这是第二段
</p> <p align="right">
这是第三段
</p> </body>
</html>
段落标签的align属性
》》换行标签<br>
当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。
》》》格式
<br />
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 换行标签的使用 -->
<p>
Donot aim for your success if you really want to seccess,
just stick to do what you love and believe.
</p>
<p>
Donot aim for your success if you really want to seccess,
<br /> <!-- 换行标签 -->
just stick to do what you love and believe.
</p> </body>
</html>
换行标签的使用
》》水平标签<hr>
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
》》》格式
<hr />
》》》PS
可以用在段落中，也可以用在段落间；用在段落中时相当于将这个段落的内容分割成了两个段落并且用水平线进行隔开
》》》属性
align : 设置线条放置的位置；属性值有：left、right、center
size : 设置线条的粗细（即：高度）
width : 设定线条的长度，可以是绝对值（即：一个具体的数字），也可以是相对值（即一个半分比，如：%70），默认为100%
color : 设置线条的颜色
noshade : 设置成不要阴影，默认是要阴影
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 水平标签的使用 -->
<p>
Donot aim for your success if you really want to seccess,
<hr /> <!-- 用在段落中 -->
just stick to do what you love and believe.
</p>
<hr align="center" width="100" size="3" color="red"/> <!-- 用在段落间 -->
<p>
Donot aim for your success if you really want to seccess,
<br /> <!-- 换行标签 -->
just stick to do what you love and believe.
</p> </body>
</html>
水平标签的使用
》》内容居中标签<center>
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
》》》格式
<center>需要居中的内容</center>
》》》PS
在H5里面不建议使用
》》》程序
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 内容居中标签 -->
<p>重庆市大足区</p> <hr color="red" size="5"/> <center>
<p>大足石刻</p>
</center> </body>
</html>
内容居中标签的使用
》》》效果展示
》》预定义（格式化）标签<pre>
将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
PS：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。
》》》格式
<pre>有格式的内容</pre>
》》》程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 预定义标签的使用 -->
<p>
大足是个好地方。<br />大足石刻是世界文化遗产
</p>
<p>
<pre> 大足是个好地方。<br />大足石刻是世界文化遗产</pre>
</p>
<pre>有格式的内容</pre> </body>
</html>
预定义标签的使用
》》》效果展示
》》块级标签1<div>
标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
》》》格式
<div>需要作为一个块的内容</div>
》》》属性
align ：设置块的位置；属性值有：left、right、center
》》》程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 块级标签1的使用 -->
<div>需要作为一个块的内容</div> </body>
</html>
块级标签的使用
》》》效果展示
》》块级标签2<span>
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。
》》》格式
<span>需要进行块级设置的内容</span>
》》》程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 块级标签2的使用 -->
<span>需要进行块级设置的内容1</span>
<span>需要进行块级设置的内容2</span> </body>
</html>
块级标签2
》》》效果展示
3字体标签
3.1标题字体标签<h>
标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
3.1.1格式
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
3.1.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 标题字体标签的使用 -->
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6> </body>
</html>
标题字体标签的使用
3.1.3效果展示
3.2字体格式标签
3.2.1属性
size：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
color：设置字体的颜色；color="红色"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜色。设置方式：单词 \ #ff00cc \ rgb(0,0,255)
face ：size：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
3.2.2格式
<font>需要设置字体格式的内容</font>
3.2.3程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 字体标签的使用 -->
<center>
<p>
<font color="red" size="5">
重庆火锅
</font>
</p>
</center> <font>需要设置字体格式的内容</font>
</body>
</html>
字体标签的使用
3.2.4效果展示
3.3特殊字符标签
3.3.1种类及格式
: 空格
< : 小于号
> : 大于号
& : 符号&
" : 双引号
' : 单引号
© : 版权
™ : 商标
绐 : 文字绐。其实，#32464是汉字绐的unicode编码。
比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：
这是一个HTML语言的<p>标签
3.3.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 特殊字符标签的使用 -->
<p>这是一个HTML语言的<p>标签</p> </body>
</html>
特殊字符标签的使用
3.3.3效果展示
3.4粗体标签<b>或<strong>
3.4.1格式
<b>需要加粗的内容</b>
3.4.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 粗体标签的使用 -->
<p>
重庆*<b>大足石刻</b>
</p> </body>
</html>
粗体标签的使用
3.4.3效果展示
3.5下划线标签<u>
3.5.1格式
<u>需要下划线的内容</u>
3.6中划线标签<s>
3.6.1格式
<s>需要中划线的内容</s>
3.7斜体标签<i>或<em>
3.7.1格式
<em>需要斜体表示的内容</em>
3.7.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 下划线、中划线、斜体标签的使用 --> <p>
<u>需要下划线的内容</u>
<s>需要中划线的内容</s>
<em>需要斜体表示的内容</em>
</p> </body>
</html>
下划线、中划线、斜体标签的使用
3.7.3效果展示
3.8上标标签
3.8.1格式
中间<sup>上标</sup>
3.9下标标签
3.9.1格式
中间<sub>下标</sub>
3.9.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 上标标签、下标标签的使用 --> <p>
中间<sup>上标</sup>
中间<sub>下标</sub>
</p> </body>
</html>
上标、下标标签的使用
3.9.3效果展示
4超链接<a>
4.1外部链接：链接到外部文件
4.1.1格式
<a href="需要跳转的网址">点击处的提示语</a>
4.1.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 利用a标签实现外部链接 -->
<p>
<a href="http://www.baidu.com">
点击进入百度
</a>
</p> <a href="需要跳转的网址">点击处的提示语</a> </body>
</html>
a标签实现外部链接
4.1.3效果展示
4.2锚链接
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚，也就是说，使用name属性给那个特定的位置起个名字。
4.2.1格式
设置锚：<a name="name1">顶部</a>
实现跳转到指定锚点：<a href="#name1">点击此处回到顶部</a>
#表示跳到名为name1的特定位置，这是规定。如果少了#号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。例如：
<a href="a.hhml#name1">回到顶部</a>
表示，点击之后，跳转到a.html页面的name1锚点中去。
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
4.2.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body> <!-- 利用a标签实现锚链接 -->
<a name="name1">顶部</a>
<a href="#name2">点击此处跳转到底部</a>
<pre> </pre>
<a href="#name1">点击此处回到顶部</a>
<<a name="name2">底部</a> </body>
</html>
利用a标签实现锚链接
4.3邮件链接
4.3.1格式
<a href="mailto:邮箱">点击进入我的邮箱</a>
4.3.2程序实现
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<!-- 翻译：指定编码格式为utf-8 -->
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<!-- 翻译：3秒之后自动跳转到百度首页 -->
<title>重庆森林</title>
<!-- 翻译：指定网页的标题，浏览器的上方显示 -->
</head>
<body>
<a href="mailto:412744267@qq.com">点击进入我的邮箱</a>
</body>
</html>
利用a标签实现邮箱链接
4.3.3PS
需要进行配置
4.4超链接标签的属性
href : 目标URL
name : 主要用于设置一个锚点的名称
taiget : 主要告诉浏览器用什么方式来打开目标页面
target的属性值
_self : 在同一个网页中显示（默认值）
_blank : 打开新的网页（新的标签页）显示
_parent : 在父窗口显示
_top : 在顶级窗口中显示
ps
_parent 和 _top 只能用在框架中
PythonNote01_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"/> ...
随机推荐
- 8.Java格式化输出
JAVA中字符串输出格式 1.使用format函数 System.out.format("%d %f",10,10.5); 2.使用Formatter类 构造函数Formatte ...
- CozyRSS开发记录3-标题栏再加强
CozyRSS开发记录3-标题栏再加强 1.更精炼的标题栏 接下来,我们把窗口的边框和默认的标题栏给去掉,让Cozy看起来更像一个平板应用. 在主窗口的属性里,修改下列两个属性: 效果一目了然: 2. ...
- 玩转GIT
远程代码覆盖本地 解决方法: 1.如果还没有 commit 的话,可以用 git checkout . 这样将使所有代码还原到最后一次 commit 的状态 2.如果已经 commit 了,最简单的方 ...
- Salt安装（yum不可用时）
salt-master安装 [salt-master]# yum install salt-master 或者 curl -L http://bootstrap.saltstack.o ...
- centos yum安装saltstack
1.导入安装源 centos5 rpm -Uvh http://ftp.linux.ncsu.edu/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm cen ...
- 【小白学游戏常用算法】二、A*启发式搜索算法
在上一篇博客中,我们一起学习了随机迷宫算法,在本篇博客中,我们将一起了解一下寻路算法中常用的A*算法. 通常情况下,迷宫寻路算法可以使用深度优先或者广度优先算法,但是由于效率的原因,不会直接使用这些算 ...
- Android调用默认浏览器打开指定Url
业务员有需求要将一个wap站在手机上以App的形式打开,还不要嵌套WebView,只能以浏览器打开.查了点资料,就有了下面这货. package com.gzz.whyinzi; import and ...
- NOI 题库 7084
7084 迷宫问题 描述 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, ...
- SecureCRT中python脚本编写
SecureCRT中python脚本编写学习指南 SecureCRT python 引言 在测试网络设备中,通常使用脚本对设备端进行配置和测试以及维护:对于PE设备的测试维护人员来说使用较多是Secu ...
- javascript学习之通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...