在学习html标签之前,我们先来回顾一下浏览器在请求服务器的过程:
1.在浏览器的地址栏里面输入URL
2.浏览器发送一条请求到服务器,服务器接收请求并处理
3.服务器将数据传回浏览器
4.浏览器解析数据,并且显示在页面上
下面开始html标签的学习
1.p标签:
p标签是一个双标签,用来存放段落内容,使其与其他内容上下保持一定的间隙。
<p>段落内容</p>
2.h系列标签,从h1到h6字体大小逐渐减小,用来存放标题,使其内容字体加粗变大,独成一行。
<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>
3.img图片标签,用来显示图片。
<img src="图片路径" title="" alt="" />
路径分为绝对路径和相对路径,其中绝对路径是指一个文件存放在电脑的物理路径,即带有盘符的路径。相对路径是指相对于当前文件的路径。写相对路径的时候会遇到查找上一级路径的问题,此时我们用“../返回上一层目录“来查找到上一级路径。(路径问题经常会遇到,希望大家多加练习)
4.a超级连接。
<a href="跳转的路径">超链接</a>
5.还有一些其他的标签。
<hr/>水平标签 <br/>换行标签 <font>文本标签</font>
s del : 删除标签
i em : 倾斜 标签
u ins: 下划线
深度解析a标签:
1.使用a标签实现页面跳转
<html> <head> <title></title> <base target="_blank"/> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
属性 | 作用 |
target | _self 在当前页面直接打开(默认值) _blank 在一个新的页面打开 |
base标签(放在title标签的下面) | 作用 |
target | 用来设置当前页面上所有超链接的跳转方式 |
2.在当前页面定位到目标位置
<a href="#mubiao">目标位置</a> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p id="mubiao">这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p>
3.跨转到另一页面的目标位置
第一个页面的代码
<a href="#mubiao">跨页面定位</a>
第二个页面的代码
<p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> <p>这是第一个段落</p> ************************ <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p> <p id="mubiao">这是第二个段落</p> <p>这是第二个段落</p> <p>这是第二个段落</p>
经过这两天的学习很多人是否发现,在html中再多的空格,再多的换行,再多的tab,在浏览器上显示的时候,都会变成一个空格。因为在html当,由专门来表示空格的东西 。接下来,我们就来学习其他的特殊字符用html来表示。
特殊字符 | 描述 | 字符的代码 |
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
如何设置背景图片这个属性呢?,所谓的背景图片属性,其实它就是标签的一个属性,可以放在任意的标签中。background-imgage:url(图片的路径);。大家可以根据以上的学习做一个带有背景图片的标题、段落等都有的页面。