一、字体标签

标题标签h1-h6

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <h1>我是一级标题</h1>
 <h2>我是二级标题</h2>
 <h3>我是三级标题</h3>
 <h4>我是四级标题</h4>
 <h5>我是五级标题</h5>
 <h6>我是六级标题</h6>

 </body>
 </html>

粗体标签b或strong

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <b>我好粗</b>
 <strong>我也很粗的</strong>

 </body>
 </html>

斜体标签i或em

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <i>我是斜体</i>
 <em>我也是斜体</em>

 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <u>我是下划线</u>
 <s>我是中划线</s>

 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 10<sup>2</sup>
 Q<sub>1</sub>

 </body>
 </html>

特殊字符

　　&nbsp;：空格 （non-breaking spacing，不断打空格）

　　&lt;：小于号（less than）

　　&gt;：大于号（greater than）

　　&amp;：符号&

　　&quot;：双引号

　　&apos;：单引号

　　&copy;：版权©

　　&trade;：商标™

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <p>这是一个HTML语言的&lt;a&gt;标签</p>

 </body>
 </html>

二、排版标签

段落标签p

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

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <p>这是一个段落</p>
 <p align="center">这是另一个段落</p>

 </body>
 </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是一个文本级标签，里面只能放文字、图片、表单元素。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <div>我是div</div>
 <div>我也是div</div>

 <span>我是span</span>
 <span>我也是span</span>

 </body>
 </html>

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

 <div class="header">
     <div class="logo"></div>
         <div class="nav"></div>
     </div>
     <div class="content">
         <div class="guanggao"></div>
         <div class="shop"></div>
     </div>
 <div class="footer"></div>

换行标签br

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <span>我是span</span>
 <br />
 <span>我也是span</span>

 </body>
 </html>

水平线标签hr

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <span>我是span</span>
 <br />
 <hr />
 <hr />
 <span>我也是span</span>

 </body>
 </html>

预定义（预格式化）标签pre

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <pre>
         鹅鹅鹅

             作者：李白
         曲项向天歌
         白毛浮绿水

 </pre>

 </body>
 </html>

三、超链接标签a

超链接共分三种形式：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <a href="index.html"></a>
 <a href="http://www.baidu.com">百度一下</a>

 </body>
 </html>

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <a name="top">顶部</a>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <p>hello</p>
 <a href="#top">返回顶部</a>

 </body>
 </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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <p align="center">
     <a href="http://www.baidu.com">百度一下</a>
 </p>

 </body>
 </html>

四、图片标签img

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

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

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

src属性： 指图片的路径

　　1.绝对路径：

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

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

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

img标签的属性：

　　width：图片的宽度

　　height：图片的高度

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

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

　　title：悬停文本

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 <img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="美女" title='好美啊' width="200px" height="180px" />

 </body>
 </html>

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>

 </head>
 <body>

 hello<img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="美女" title='好美啊' width="200px" height="180px" />嘿嘿

 </body>
 </html>

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

点击图片跳转到某个链接，应该是：

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

作者：流浪者

日期：2019-08-30

03-body标签中的部分标签的更多相关文章

  1. 前端 ------ 03 body标签中的相关标签

    列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...

  2. HTML之body标签中的相关标签补充

    一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  3. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  4. Spring源码分析（九）解析默认标签中的自定义标签元素

    摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 到这里我们已经完成了分析默认标签的解析与提取过程,或许涉及的内容太多,我 ...

  5. 03-----body标签中的相关标签

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...

  6. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  7. 02 body标签中的相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  8. 10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  9. JS从后台获取数据，前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

  10. zf-关于<ww:iterator /> 标签中的<td /> 标签添加序号问题

    一开始代码是这样的 那个<ww:if> 标签 是我添加的,可是添加之后出问题了. 因为我加了一个判断语句,使得不需要的信息没显示出来,导致#li.count 这个显示下标的方法行不通了 之 ...

随机推荐

  1. Delphi - 使用Pos、Copy函数定位和截取字符串

    使用Pos函数来定位子字符串第一次出现的位置 函数定义: Function Pos(Substr: String, S: String): Integer; 表示取出Substr在S中第一次出现的位置 ...

  2. java后台图片上传预检失败解决方案

    1.首先因为服务器端会先发送一个option请求到后台  在后台返回一个post给页面 页面在处理post请求给接口 2.先写一个过滤器, 我们自己定义一个过滤器 package com.adtime ...

  3. 深入浅出TypeScript（3）- 函数重载和泛型

    面向对象特性中,最根本的就是面向对象的三大基本特征:封装.继承.多态.同时,TypeScript中也存在多态的使用,比如函数重载,今天我们先看一下函数重载以及泛型的概念. 什么是函数重载 简单来说,函 ...

  4. JMeter简介及使用JMeter来访问网站

    参考: http://jmeter.apache.org/ http://blog.chinaunix.net/uid-26884465-id-3416869.html http://www.ltes ...

  5. 深度递归必须知道的尾调用(Lambda)

    引导语 本文从一个递归栈溢出说起,像大家介绍一下如何使用尾调用解决这个问题,以及尾调用的原理,最后还提供一个解决方案的工具类,大家可以在工作中放心用起来. 递归-发现栈溢出 现在我们有个需求,需要计算 ...

  6. 使用php安装pcntl模块

    想添加个php多进程任务,突然发现服务器上php不支持pcntl扩展,再看了下也没有phpize这个模块 首先看下当前php版本 [root@htest ~]# php -v PHP 5.3.3 (c ...

  7. Winform应用程序简介

    1.winform应用程序是一种智能客户端技术,我们可以使用winform应用程序帮助我们获得信息或传输信息等. WPF技术——XAML美化界面. 2.  F4快速属性 (1)Name:在后台要获得前 ...

  8. 如何部署 H5 游戏到云服务器？

    在自学游戏开发的路上,最有成就感的时刻就是将自己的小游戏做出来分享给朋友试玩,原生的游戏开可以打包分享,小游戏上线流程又长,那 H5 小游戏该怎么分享呢?本文就带大家通过 nginx 将构建好的 H5 ...

  9. Knative 实战：三步走！基于 Knative Serverless 技术实现一个短网址服务

    短网址顾名思义就是使用比较短的网址代替很长的网址.维基百科上面的解释是这样的: 短网址又称网址缩短.缩短网址.URL 缩短等,指的是一种互联网上的技术与服务,此服务可以提供一个非常短小的 URL 以代 ...

  10. 【JVM学习】2.Java虚拟机运行时数据区

    来源: 公众号: 猿人谷 这里我们先说句题外话,相信大家在面试中经常被问到介绍Java内存模型,我在面试别人时也会经常问这个问题.但是,往往都会令我比较尴尬,我还话音未落,面试者就会"背诵& ...