+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2019-08(82)

2019-09(116)

2019-10(2)

03-body标签中的部分标签

发布于2019-09-09 14:08     阅读(365)     评论(0)     点赞(16)     收藏(5)


一、字体标签                    

标题标签h1-h6                               

h1定义最大的标题,h6定义最小的标题,一般一个页面中h1只能出现一次,尽量标题不要超过三级。h标签具有align属性,属性值分别是:left、center、right。

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <h1>我是一级标题</h1>
11 <h2>我是二级标题</h2>
12 <h3>我是三级标题</h3>
13 <h4>我是四级标题</h4>
14 <h5>我是五级标题</h5>
15 <h6>我是六级标题</h6>
16     
17 </body>
18 </html>
复制代码

粗体标签b或strong                      

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <b>我好粗</b>
11 <strong>我也很粗的</strong>
12     
13 </body>
14 </html>
复制代码

斜体标签i或em                       

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <i>我是斜体</i>
11 <em>我也是斜体</em>
12     
13 </body>
14 </html>
复制代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <u>我是下划线</u>
11 <s>我是中划线</s>
12     
13 </body>
14 </html>
复制代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 10<sup>2</sup>
11 Q<sub>1</sub>
12     
13 </body>
14 </html>
复制代码

特殊字符                                       

  &nbsp;:空格 (non-breaking spacing,不断打空格)

  &lt;:小于号(less than)

  &gt;:大于号(greater than)

  &amp;:符号&

  &quot;:双引号

  &apos;:单引号

  &copy;:版权©

  &trade;:商标

红色标出的是比较重要的。看一个例子:

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <p>这是一个HTML语言的&lt;a&gt;标签</p>
11     
12 </body>
13 </html>
复制代码

 

 

二、排版标签                         

段落标签p                                             

p是paragraph的缩写,意思短落。

属性:align='center'   属性值:left、center、right

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <p>这是一个段落</p>
11 <p align="center">这是另一个段落</p>
12     
13 </body>
14 </html>
复制代码

 

HTML将所有的标签分为两种:

  文本级标签:p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。

  容器级标签:div、h系列、li、dt、dd。容器级标签里可以放任何东西。

还有一点就是p标签是一个文本级标签,里面只能放文字、图片、表单元素,其他一律不能放。

块级标签div和行内标签span   

div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。

div:将标签内容当做块来对待,必须单独占一行。

  属性:align='center'

    属性值:left、center、right

span:和div唯一的区别在于div是换行的,而span是不换行的。

div是一个容器级标签,里面什么都能放,甚至能放div自己,而span是一个文本级标签,里面只能放文字、图片、表单元素。

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <div>我是div</div>
11 <div>我也是div</div>
12 
13 <span>我是span</span>
14 <span>我也是span</span>
15     
16 </body>
17 </html>
复制代码

 

div+css实现各种样式:div负责页面布局、负责结构、负责分块。css负责样式。

复制代码
1 <div class="header">
2     <div class="logo"></div>
3         <div class="nav"></div>
4     </div>
5     <div class="content">
6         <div class="guanggao"></div>
7         <div class="shop"></div>
8     </div>
9 <div class="footer"></div>
复制代码

 

换行标签br                                       

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <span>我是span</span>
11 <br />
12 <span>我也是span</span>
13     
14 </body>
15 </html>
复制代码

水平线标签hr                                  

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <span>我是span</span>
11 <br />
12 <hr />
13 <hr />
14 <span>我也是span</span>
15     
16 </body>
17 </html>
复制代码

 

预定义(预格式化)标签pre                   

保留所有的空格、tab、换行,原样输出内容。

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <pre>
11         鹅鹅鹅
12 
13             作者:李白
14         曲项向天歌
15         白毛浮绿水
16         
17 </pre>
18     
19 </body>
20 </html>
复制代码

 

三、超链接标签a                      

超链接共分三种形式:

1.外部链接:链接到外部文件

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <a href="index.html"></a>
11 <a href="http://www.baidu.com">百度一下</a>
12     
13 </body>
14 </html>
复制代码

 

2.锚链接:在本页面或其他页面的不同位置进行跳转。

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <a name="top">顶部</a>
11 <p>hello</p>
12 <p>hello</p>
13 <p>hello</p>
14 <p>hello</p>
15 <p>hello</p>
16 <p>hello</p>
17 <p>hello</p>
18 <p>hello</p>
19 <p>hello</p>
20 <p>hello</p>
21 <p>hello</p>
22 <p>hello</p>
23 <p>hello</p>
24 <p>hello</p>
25 <p>hello</p>
26 <p>hello</p>
27 <p>hello</p>
28 <p>hello</p>
29 <p>hello</p>
30 <p>hello</p>
31 <p>hello</p>
32 <p>hello</p>
33 <p>hello</p>
34 <p>hello</p>
35 <p>hello</p>
36 <p>hello</p>
37 <p>hello</p>
38 <p>hello</p>
39 <p>hello</p>
40 <p>hello</p>
41 <p>hello</p>
42 <p>hello</p>
43 <p>hello</p>
44 <p>hello</p>
45 <p>hello</p>
46 <p>hello</p>
47 <a href="#top">返回顶部</a>
48     
49 </body>
50 </html>
复制代码

 

跳转到其他文件的锚点中:

<a href="index.hhml#top">回到顶部</a>

 

表示跳转到index.html中的top锚点中去。

3.邮件链接

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

效果:点击之后,会弹出outlook,作用不大。

前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息

几个特殊的链接:

  跳转到页面顶部: 

<a href="#">跳转到顶部</a>

 

与js有关:

<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
  1. javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</2
  2. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>

a标签的属性:                                

  href:目标URL

  title:悬停文本

  name:用于设置锚点名称

  target:四个属性值。

    _self:在当前页面打开

    _black:在新的窗口打开

    _parent:在父级窗口打开

    _top:在顶级窗口打开

a标签是一个文本级标签。

a的语义要小于p,要想让文本内容被点击,应该是p包含a

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <p align="center">
11     <a href="http://www.baidu.com">百度一下</a>
12 </p>
13     
14 </body>
15 </html>
复制代码

 

四、图片标签img          

能够插入的图片类型是:jpg(jpeg)、gif、png、bmp

不能往网页中插入的图片格式是:psd、ai

HTML不是直接插入图片,而是插入图片的引用地址,所以要把图片上传到服务器上。

src属性: 指图片的路径

  1.绝对路径:

<img src="http://www.baidu.com/2016040102.jpg">

 

  2.相对路径:网页文件和你的图片必须在一个服务器上

<img src="images/1.jpg">

 

img标签的属性:                      

  width:图片的宽度

  height:图片的高度

  align:图片的水平对齐方式。属性值可以是left、center、right

  alt:当图片显示不出来时,代替显示的内容。

  title:悬停文本

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 <img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="美女" title='好美啊' width="200px" height="180px" />
11     
12 </body>
13 </html>
复制代码

文本级标签显示在浏览器上时,不管图片多高,都会有一个现象,就是“高矮不齐,底边对齐”

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 
10 hello<img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="美女" title='好美啊' width="200px" height="180px" />嘿嘿
11     
12 </body>
13 </html>
复制代码

 

注意事项:
(1)如果要想保证图片等比例缩放,请只设置width和height中其中一个。
(2)如果想实现图文混排的效果,请使用align属性,取值为left或right

点击图片跳转到某个链接,应该是:

<a>
   <img src="images/bojie.jpeg" alt="波姐" title='波多野结衣'>
</a>

 

 

 

作者:流浪者

日期:2019-08-30

 



所属网站分类: 技术文章 > python文章

作者:23dh

链接: http://www.pythonheidong.com/blog/article/104334/

来源:python黑洞网 www.pythonheidong.com

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0

赞一赞 or 踩一踩

收藏该文
已收藏

评论内容:(最多支持255个字符)

相似文章

  python面试题之介绍一下Python中webbrowser的用法

  django book 2.0中文 PDF下载高清完整扫描原版

  python面试题之解释一下python的and-or语法

  FlaskWeb开发:基于Python的Web应用开发实战 pdf下载

  Python3.2.3官方文档(中文版)pdf下载

  python面试题之什么是lambda函数?

  python面试题Python2.x和Python3.x的区别

  Python Cookbook第三版中文PDF下载高清完整扫描原版

  Head First Python(中文版)pdf下载

  python面试题之如何在Python中创建自己的包

优质资源排行榜

 python经典电子书大合集下载 下载次数 8108

 零基础java开发工程师视频教程全套,基础+进阶+项目实战(152G) 下载次数 7545

 零基础前端开发工程师视频教程全套,基础+进阶+项目实战(共120G) 下载次数 7439

 零基础大数据全套视频400G 下载次数 7002

 零基础php开发工程师视频教程全套,基础+进阶+项目实战(80G) 下载次数 6891

 零基础软件测试全套系统教程 下载次数 6502

 全套人工智能视频+pdf 下载次数 6437

 IOS全套视频教程 基础班+就业班 下载次数 4679

 编程小白的第一本python入门书(高清版)PDF下载 下载次数 3106

10  effective python编写高质量Python代码的59个有效方法 pdf下载 下载次数 3073

11  Python深度学习 pdf下载 下载次数 3044

12  使用python+pygame开发的小游戏《嗷大喵快跑》源码下载 下载次数 2998

13  python项目开发视频 下载次数 2998

14  python从入门到精通视频(全60集)python视频教程下载 下载次数 2994

15  黑马2017年java就业班全套视频教程 下载次数 2992

16  python实战项目 平铺图像板系统源码下载,适用于想要保存,标记和共享图像,视频和网页的用户 下载次数 2987

17  利用python实现程序内存监控脚本 下载次数 2986

18  树莓派Python编程指南 pdf下载 下载次数 2980

19  老男孩python自动化视频 下载次数 2979

20  老王python基础+进阶+项目视频教程 下载次数 2972

21  尚硅谷Go学科全套视频 下载次数 2972

22  某硅谷Python项目+AI课程+核心基础视频教程 下载次数 2967

23  Web前端实战精品课程 下载次数 2966

24  Python基础教程 pdf下载 下载次数 2966

25  tron python小游戏 下载次数 2962

26  [小甲鱼]零基础入门学习Python 下载次数 2959

27  老男孩python全栈开发15期 下载次数 2958

28  2017最新web前端开发完整视频教程附源码 下载次数 2948

29  最新全套完整JAVAWEB2018开发视频 下载次数 2926

30  Python算法教程_中文版 pdf下载 下载次数 2913

31  Spring boot实战视频6套下载 下载次数 2909

32  python全套视频十五期(116G) 下载次数 2901

33  Python项目实战 下载次数 2883

34  python全自动抢火车票教程-python视频教程下载 下载次数 2883

35  30个小时搞定Python网络爬虫 含源码 下载次数 2881

36  尚硅谷大数据之Hadoop视频 下载次数 2876

37  简明python教程 (A Byte of Python)pdf下载 下载次数 2873

38  Python Cookbook第三版中文PDF下载高清完整扫描原版 下载次数 2865

39  Python A~B~C~ python视频教程下载 下载次数 2864

40  数据结构与算法视频(小甲鱼讲解-全) 下载次数 2863

41  web小程序表白天数倒计时源码下载 下载次数 2862

42  python基础视频教程 下载次数 2862

43  Python高性能编程 pdf下载 下载次数 2862

44  go语言全套视频 下载次数 2854

45  利用Python进行数据分析 pdf下载 下载次数 2850

46  清华学霸尹成Python爬虫视频-ok 下载次数 2845

47  黑马前端36期最全视频和代码 下载次数 2841

48  2018最新全套web前端视频教程+源码下载 下载次数 2840

49  老男孩Python自动化开发12期 老男孩最强一期python高级运维开发课程 第二部分 70GB 下载次数 2832

50  笨办法学python pdf下载 下载次数 2828