一、字体标签

标题标签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. 前端通过Blob实现文件下载

    最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接.其实并不需要这么麻烦,这样既增大了服务器的负载,也让用户产生了没有必要的 ...

  2. 第8章 浏览器对象模型BOM 8.1 window对象

    ECMAScript是javascript的核心,但如果要在web中使用javascript,那么BOM(浏览器对象模型)则无疑是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,在浏览器之间共 ...

  3. CF - 1131 D Gourmet choice

    题目传送门 先把 = 的人用并查集合并在一起. 然后 < > 的建边, 跑一遍 toposort 之后就好了. 入度为0点的值肯定为1, 然后就是因为这个是按照时间线走过来的,所以一个点的 ...

  4. ASP.NET Core结合Nacos来完成配置管理和服务发现

    目录 前言 Nacos的简介 启动Nacos 配置管理 服务发现 写在最后 前言 今年4月份的时候,和平台组的同事一起调研了一下Nacos,也就在那个时候写了.net core版本的非官方版的SDK. ...

  5. framework7 picker 具体使用

    官网地址:https://framework7.io/docs/picker.html#dom-events <meta charset="UTF-8"> <me ...

  6. spring的嵌套事务

    转自http://www.iteye.com/topic/35907 在所有使用 spring 的应用中, 声明式事务管理可能是使用率最高的功能了, 但是, 从我观察到的情况看, 绝大多数人并不能深刻 ...

  7. 你不得不知道的HashMap面试连环炮

    为什么用HashMap? 简述一下Map类继承关系? 解决哈希冲突的方法? 为什么HashMap线程不安全? resize机制? HashMap的工作原理是什么? 有什么方法可以减少碰撞? HashM ...

  8. Hello, OpenWrite

    目录 Markdown For Typora Overview Block Elements Paragraph and line breaks Headers Blockquotes Lists T ...

  9. 【LeetCode】763-划分字母区间

    title: 763-划分字母区间 date: 2019-04-15 21:10:46 categories: LeetCode tags: 字符串 贪心思想 双指针 题目描述 字符串 S 由小写字母 ...

  10. 那些年，我们误解的 JavaScript 闭包

    说到闭包,大部分的初始者,都是谈虎色变的.最近对闭包,有了自己的理解,就感觉.其实我们误解闭包.也被网上各种说的闭包的解释给搞迷糊. 一句话:要想理解一个东西还是看权威的东西. 下面我来通俗的讲解一个 ...