03-body标签中的部分标签
一、字体标签
标题标签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>
特殊字符
:空格 (non-breaking spacing,不断打空格)
<
:小于号(less than)
>
:大于号(greater than)
&
:符号&
"
:双引号
'
:单引号
©
:版权©
™
:商标™
红色标出的是比较重要的。看一个例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> </head> <body> <p>这是一个HTML语言的<a>标签</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>
- javascript:;表示什么都不执行,这样点击
<a>
时就没有任何反应 例如:<a href="javascrip:;">
内容</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标签中的部分标签的更多相关文章
- 前端 ------ 03 body标签中的相关标签
列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...
- HTML之body标签中的相关标签补充
一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...
- HTML之body标签中的相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- Spring源码分析(九)解析默认标签中的自定义标签元素
摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 到这里我们已经完成了分析默认标签的解析与提取过程,或许涉及的内容太多,我 ...
- 03-----body标签中的相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...
- body标签中的相关标签
一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...
- 02 body标签中的相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)
一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...
- JS从后台获取数据,前台动态添加tr标签中的td标签
功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...
- zf-关于<ww:iterator /> 标签中的<td /> 标签添加序号问题
一开始代码是这样的 那个<ww:if> 标签 是我添加的,可是添加之后出问题了. 因为我加了一个判断语句,使得不需要的信息没显示出来,导致#li.count 这个显示下标的方法行不通了 之 ...
随机推荐
- Docker资源管理
一台宿主机可以放多个容器,默认的情况下,Docker 没有对容器进行硬件资源的限制,当容器负载过高时会尽可能的占用宿主机资源,所以有时候我们需要对容器的资源使用设置一个上限,今天我们就来看看如何管理 ...
- Nacos高可用集群解决方案-Docker版本
文章主旨 本文目的是配置高可用的Nacos集群 架构图 整体架构为:Nginx + 3 x Nacos +高可用MySQL 高可用MySQL使用主从复制结构的可以参考Docker搭建MySQL主从集群 ...
- java程序员学习路线阶段总结20190903
算法:锻炼写代码的逻辑 刷题位置:leetcode 书籍:小灰漫画算法 leecode使用方法: 转载自http://blog.csdn.net/tostq 又到了一年毕业就业季了,三年前的校招季我逃 ...
- ubuntu中rc.local不执行问题
解决思路概括起来如下: 1.首先排除脚本自身问题,可以手动点杠执行下试试, 2.脚本确定没问题后,放到开机启动程序引用的路径下,办法如下 2.1.查看系统的运行级别 2.2.到对应运行的rcX.d的目 ...
- 牛客多校第六场 C Generation I 组合数学 阶乘逆元模板
链接:https://www.nowcoder.com/acm/contest/144/C来源:牛客网 Oak is given N empty and non-repeatable sets whi ...
- POJ3233 Matrix Power Series 矩阵快速幂 矩阵中的矩阵
Matrix Power Series Time Limit: 3000MS Memory Limit: 131072K Total Submissions: 27277 Accepted: ...
- JSP内置对象(一)
一.out对象out对象是JspWriter类的实例,是向客户端输出内容常用的对象1.void println() out的println()方法,向客户端打印字符串 2. void clear() ...
- 【Offer】[34] 【二叉树中和为某一值的路径】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一棵二叉树和一个整数,打印出二叉树中节点值的和为输入整数的所有路径.从树的根节点开始往下一直到叶节点所经过的节点形成一条路径.  ...
- Java日志框架SLF4J和log4j以及logback的联系和区别
1.SLF4J(Simple logging Facade for Java) 意思为简单日志门面,它是把不同的日志系统的实现进行了具体的抽象化,只提供了统一的日志使用接口,使用时只需要按照其提供的接 ...
- Winform中使用FastReport的DesignReport时怎样设置Table的size自动调整
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...