body标签中的相关标签(1)
一.字体标签
字体标签包含:h1~h6,<font>,<u>,<b>,<strong><em>,<sup>,<sub>
1.标题
标题使用<h1>至<h6>标签进行定义.<h1>定义最大的标题,<h6>定义最小的标题.具有align属性,属性值可以是:left,center,right
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H1~H6标签</title> </head> <body> <h1>呜呜呜呜</h1> <h2>哈哈哈哈</h2> <h3>呵呵呵呵</h3> <h4>嘿嘿嘿嘿</h4> <h5>吼吼吼吼</h5> <h6>哼哼哼哼</h6> </body> </html>
2.以废弃的标签(好像还能使用)
(1).字体标签<font>
<font face="微软雅黑" color="green" size="8">字体</font>
(2).粗体标签<b>或<strong>
娃哈哈
<b>娃哈哈</b>
<strong>娃哈哈</strong>
(3).下划线标记<u>,中划线标记<s>
<u>娃哈哈</u>
<s>娃哈哈</s>
(4). 斜体标记<i>或<em>
娃哈哈
<i>娃哈哈</i>
<em>娃哈哈</em>
2.没被废弃的标签
上标<sup>下标<sub>
上下标容易混淆,就记一个sub,b的意思是bottom:底部
5<sup>2</sup>
8<sub>2</sub>
3.整合练习:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> 娃哈哈 <br /> 亚 索 <h2>乳娃娃</h2> <hr /> <hr /> <hr /> <hr /> <hr /> <h3>乳娃娃</h3> <h6>娃哈哈</h6> <!--underline--> <u>嘿嘿嘿</u> <strong>酸酸乳</strong> <em>优酸乳</em> 5<sup>2</sup> <i>斜体</i> </body> </html>
二.特殊字符:
1. :空格(non-breaking spacing,不断打空格)
2.< :小于号(less than)
3.> :大于号(greater than)
4.& :符号&
5." :双引号
6.' :单引号
7.© :版权©
8.™ :商标™
要求熟背的特殊字符: / < / > / ©
比如说,你想把<p>作为一个文本在页面上显示,直接写<p>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符.
这是一个HTML语言的<p>标签
如果还想知道其他的HTML特殊字符:HTML特殊字符参考表
三.排版标签
1.段落标签<p>
段落:是英文paragraph的缩写
属性:
align="属性值":对齐方式.属性值包括:left,center,right
<p>这是一个段落</p>
<p align="center">这是另一个段落</p>
好的,下面这句话一定要牢牢记住,记死.HTML标签是分等级的.HTML将所有的标签分为两种:
文本级2标签:p,span,a,b,i,u,em.文本标签里只能放文字,图片,表单元素
容器级标签:div,h系列,li,dt,dd.容器级标签可以放任何东西
从学习p的的第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能放字母,图片,表单元素.其他的一律不能放.
错误写法:把(h系列的标签放到p里)
<p>
我是个段落
<h2>我是二级标题</h2>
</p>
上图显示，浏览器不允许你这么做。我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h2。
2.块及标签标签<div>和<span>
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
(1).div: 把标签中的内容作为一个块来对待(division),必须单独占据一行
(2)div标签的属性:
align = "属性值":设置块儿的位置.属性值可选择:left,right,center
(3).<span>和<div>唯一的区别在于:<span>是不换行的,而<div>是换行的
如果单独在网页中插入这两个元素,不会对页面产生任何影响.这两个元素是专门为定义CSS样式而生的.或者说,DIV+CSS来实现各种样式
<body>
<div>
娃哈哈
</div>
<span>嘿嘿嘿</span>
<span>乳娃娃</span>
</body>
3.总结:
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
(1).span举例
<p> 商品简介: <span> <a href="">详细信息</a> <a href="">生产日期</a> </span> </p>
(2).div举例:
<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>
所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式
4.换行标签<br>(已废弃)
当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。
老子<br />就是吊就是<br />牛逼
上图显示，<p>标签和<br>标签的区别在于：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。注意<br> 没有结束标签，把<br>标签写为 <br/> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
5.水平线标签<hr>(已废弃)
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分
<p>娃哈哈0000</p>
<hr />
<hr />
<p>嘿嘿嘿0000</p>
6.内容居中标签<center>
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
<center>
<p>娃哈哈</p>
</center>
到了H5里面,center不建议使用
7.预定义(预格式化) 标签:<pre>
含义:将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用
<pre>
鹅鹅鹅
作者：李白
曲项向天歌
白毛浮绿水
</pre>
8.汇总:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> span{ color: red; } h3{ color: orange; } </style> </head> <body> <h3><span>9.9元</span> <del>79</del></h3> <div id="topBar"> <div class="top-l">左边区域</div> <div class="shopCar">购物<span>车</span></div> <div class="userinfo">登录</div> </div> <div id="header"> 我是头部 </div> <div id="container"> 我是内容区域 </div> <div id="footer"> 我是脚步 </div> </body> </html>
四.超链接
超链接有三种形式:
1.外部链接:链接到外部文件
<a href="http://www.baidu.com:80">点击进入新网页</a>
a是英语anchor"锚"的意思,就好像这个页面往另一个页面扔出了一个锚,是一个文本级的标签
href是英语hypertext reference超文本地址的缩写.读作"喝瑞夫",不要读作"喝夫"
2.锚链接:
指给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转;比如说,在网页底部有一个向上的箭头,点击箭头后回到顶部,这个就是利用到了锚链接.
首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字
第9行代码表示,顶部这个锚的名字叫做top
然后在底部设置超链接,点击时将回到顶部(此时,网页中的URL的末尾也出现了#top).注意上图中的第70行中的#号不要忘记了,表示跳到名为top的特定位置,这是规定.如果少了#号,点击之后,就会跳到top这个文件或者top这个文件夹中去
如果我们将上图中的第70行的代码写成:
<a href="new.html#top">回到顶部</a>
就表示,点击之后,跳转new.html页面中的top锚点中去
说明:name属性是HTML4.0以前使用的,id属性是HTML4.0之后开始使用,为了向前兼容,因此name和id这两个属性都要写上,并且值是一样的
3.邮件链接
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
效果:点击之后,会弹出outlook,作用不大
前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息
4.特殊几个链接:
(1).返回页面顶部的位置
<a href="#">跳转到顶部</a>
(2).与js有关:
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
①.javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a>
②.javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a>
5.超链接的属性
(1).href:目标URL
(2).title:悬停文本
(3).name:主要用于设置一个锚点的名称
(4).target:告诉浏览器用什么方式来打开目标页面;target属性有以下几个值:
_self:在同一个网页中显示(默认值)
_blank:在新的窗口中打开
_parent:在父窗口中显示
_top:在顶级窗口中显示
blank就是"空白"的意思,就表示新建一个空白窗口.为啥有一个"_",就是规定,没啥好解释的,也就是说,如果不写target="_blank"那么就是在相同的标签页打开,如果写了target="blank",就是在新的空白标签页中打开
6.a是一个文本级的标签
如果一个段落中所有文字都能够被点击,那么应该是p包含a;
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
而不是a包裹p：
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字
五.图片标签<img />
img:代表的就是一张图片,是单边标记
img是自封闭标签,也称为单标签
1.能插入的图片类型
能够插入的图片类型是:jpg(jpeg), gif, png, bmp; 类型和类型之间有什么区别,到CSS时会说
不能往网页中插入的图片格式是:psd, ai
HTML页面是不能直接插入图片的,而是插入图片的引用地址,所以也要把图片上传到服务器上.
2.src属性:图片的相对路劲和绝对路径
这里涉及到了图片的一个属性:
src属性:指图片的路径
在写图片的路径时,有两种写法:相对路径,绝对路径
(1).写法一:相对路径
相对当前页面所在的路径.两个标记 . 和 .. 分别代表当前目录和父路径
例一:
<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg">
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">
img 是image“图片”的简写，src 是英语source“资源”的缩写
例二:
<img src="images/1.jpg">
上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg
(2).写法二:绝对路径
①.以盘符开始的绝对路径
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
②.网络路径
<img src="http://www.baidu.com/2016040102.jpg">
3.总结:
相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的
相对路劲使用有一个前提,就是网页文件和你的图片,必须在一个服务器上.
问题:我的网页在C盘上,图片却在D盘上,能不能插入呢?
答案:用相对路径不能,用绝对路径也不能
注意:可是使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓的C盘,D盘
下面的方法时行的,但是没有任何工程上的意义,这是因为服务器上没有盘符,Linux系统没有盘符:
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
总结一下:
我们现在无论是在a标签,img标签,如果要用路径,只有两种路径能用,就是相对路径和绝对路径.
相对路径,就是../image/这种路径;从自己出发,找别人
绝对路径,就是http://开头的路径
绝对不允许使用file://开头的东西,这个是完全错误的
4.img标签的常用其他属性
(1).width: 宽度
(2).height: 高度
(3).title: 提示性文本,公有属性,也就是鼠标悬停时出现的文本
(4).align: 指图片的水平对齐方式,属性值可以是:left, center, right
(5).alt: 当图片显示不出来的时候,代替图片显示的内容,alt是英语alternate"替代"的意思,(有的浏览器不支持)
例:
哈撒给<img src="img/jianhao.png" alt="剑豪" title="疾风剑豪-亚索" width="400" height="300" />
文本级的标签显示在浏览器上时,不管你的图片多高,他总会底边对齐,这是一种现象,"高矮不齐,底边对齐"
此时大家可以给图片设置align属性,来查看效果吧!
注意事项:
(1).如果要想保证图片的等比缩放,请只设置width和height中其中一个.
(2).如果想实现图文混排的效果,请使用align属性,取值为left或right
(6).如果想点击图片的时候跳转到某个链接,应该是:
<a>
<img src="images/bojie.jpeg" alt="波姐" title='波多野结衣'>
</a>
浙公网安备 33010602011771号