web前端与移动开发---html标签的学习及特殊符号

时间:2022-01-18 20:22:38

  在学习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当,由专门来表示空格的东西&nbsp;。接下来,我们就来学习其他的特殊字符用html来表示。

特殊字符 描述 字符的代码
  空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2(上标2) &sup2;
³ 立方3(上标3) &sup3;

  如何设置背景图片这个属性呢?,所谓的背景图片属性,其实它就是标签的一个属性,可以放在任意的标签中。background-imgage:url(图片的路径);。大家可以根据以上的学习做一个带有背景图片的标题、段落等都有的页面。