zoukankan      html  css  js  c++  java
  • 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容:

    • 字体标签:

      h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

    • 排版标签

       <div> 、<span> 、 <br>、<hr>、<center>、<pre>

    • 超链接 <a>

    • 图片标签  <img>

    <!--文档的声明 一个html文件就是一个文档-->
    <!DOCTYPE html>
    
    <html lang="en">
        <!--双闭合-->
        <head>
            <!--head标签中的内容不会显示到浏览器上-->
            <!--单闭合标签 定义文档的编码类型-->
            <meta charset="UTF-8">
            <title>今天我们学习html</title>
        </head>
        <!--body中的内容都会显示到浏览器上-->
        <body>
            吴老板
            <!--h1 只允许页面中只有一个: 为了seo和爬虫-->
    

     

    一、字体标签

    字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

    1)标题

          标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题。

    2)字体标签<font>(已废弃)

    3)粗体标签<b> 或 <strong> (已废弃)

    4)下划线标记<u> 、中划线标记<s> (已废弃)、

    5)斜体标记<i> 或 <em> (已废弃)

    6)上标<sup> 、下标<sub>

    上下标这两个标签容易混淆,怎么记呢?这样记:b的意思是bottom:底部,如下示例代码:

        5<sup>2</sup>
        8<sub>2</sub>     

               效果显示:

    二、排版标签

    1)段落标签<p>

           段落:是英文paragraph的缩写。

           注意:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。

     

    2)块级标签<div>和行内标签<span>

           div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。

           如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。

           div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。

      div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。

      span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。

      就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

     

    3)换行标签<br />

           当你打算结束一行,而又不想开始一个新的段落时,<br />标签就派上用场了。无论你将它置于何处,<br />标签都会产生一个强制的换行。

           注意<br /> 没有结束标签,把<br>标签写为 <br /> 是经得起未来考验的做法,XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

     

    4)水平线标签<hr />

      水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

     

    5)内容居中标签<center> (已废弃)

           center代表是一个标签,而不是一个属性值了。只要是在这个标签里面的内容,都会居于浏览器的中间。到H5里面,center标签不建议使用。

     

    6)预定义(预格式化)标签<pre>

           含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)

      注意:真正排网页过程中,<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

      PS:Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。

     

    三、超链接标签<a>

    1)外部链接:链接到外部文件。如下示例:

           <a href=“new.html”>点击进入到新网页</a> 或

      <a href=“http://www.baidu.com”target=“_blank”>进入百度</a>

           a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。a是一个文本级的标签。

           href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”,不要读作“喝夫”。

     

    2)锚链接

           指给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转。比如说,在网页底部有一个向上的箭头,点击箭头后回到顶部,这个就是利用到了锚链接。

           首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。如下示例:

      <h1 id="top" name="top">这是顶部标题</h1>
      <a href="#top">回到顶部</a>

      上述代码中,h1标签元素这个锚叫做top。然后在底部设置超链接a,点击时将回到顶部(此时,网页中的url的末尾也出现了#top),注意href值中的#不要忘记了,表示跳到名为top的特定位置,这是规定。

      如果我们将a标签的代码改成<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)特殊的几个链接:

           a、返回页面顶部的位置:<a href="#">跳转到顶部</a>

           b、与js有关:

                  (1) javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应,例如:

        <a href="javascript:;">内容</a>   

        <a href="javascript:void(0);">内容</a>

        我们可以这样写来阻止a标签的默认点击行为。

        (2) javascript: 是表示在触发<a>默认动作时,执行一段javascript代码。例如:

        <a href="javascript:alert(1)">内容</a>

                 

    5)超链接的属性

           href:目标URL;

      title:悬停文本;

      name:主要用于设置一个锚点的名称;

      target:告诉浏览器用什么方式来打开目标页面;target属性有以下几个值:

        _self:在同一个网页中显示(默认值)

        _blank:在新的窗口中打开。

        _parent:在父窗口中显示

        _top:在顶级窗口中显示

        blank就是“空白”的意思,表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。

        也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了target=”_blank”,就是在新的空白标签页中打开。

     

    四、图片标签<img />

           img:代表的就是一张图片。img是自封闭标签,也称为单标签。

    1)能插入的图片类型:

           能够插入的图片类型有:jpg(jpeg)、gif、png、bmp。各类型之间有什么区别,介绍css时再讲。

           不能往网页中插入的图片格式有:psd、ai。

     

    2)src属性:图片的相对路径和绝对路径

           html页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。

           这里涉及到图片的一个属性:src属性:指图片的路径。

           在写图片路径时,有两种写法:相对路径、绝对路径

           a、相对路径

                  相对当前页面所在的路径。两个标记 . 和 .. 分别代表当前目录和父级目录。如下示例:

        <!-- 当前目录中的图片 -->
        
    <img src="2.jpg">
        <img src="./2.jpg">
        <!-- 上一级目录中的图片 -->
        
    <img src="../2.jpg">

           b、绝对路径

                  (1) 以盘符开始的绝对路径,如下示例:

                <img src="C:UsersaaaDesktophtml-01images1.jpg">

                  (2) 网络路径,如下示例:

                <img src="http://www.baidu.com/2016040102.jpg">

           总结:

                  相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。

                  相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。

                  问题:我的网页在C盘,图片却在D盘,能不能插入呢?

        答案: 用相对路径不能,用绝对路径也不能。

        注意:可以使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓c盘、d盘。

           综上:

                  无论是在a标签、img标签,如果要用路径。只有两种路径能用,就是相对路径和绝对路径;

        相对路径,就是../image/ 这种路径。从自己出发,找到别人;

        绝对路径,就是http://开头的路径;

        绝对不允许使用file://开头的东西,这个是完全错误的!

     

    3)img标签的常用其他属性

           width:宽度

           height:高度

           title:提示性文本,公有属性,也就是鼠标悬停时出现的文本

           align:指图片是水平对齐方式,属性值可以是:left、center、right

           alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持)

     

    4)注意事项

           a、文本级的标签显示在浏览器上时,不管你的图片多高,它总会底边对齐,这是一种现象,“高矮不齐,底边对齐”;

           b、如果想要保证图片等比例缩放,请只设置width和height中其中一个;

      c、如果想实现图文混排的效果,请使用align属性,取值为left或right;

           d、如果想点击图片的时候跳转到某个链接,应该是:

                  <a href="跳转的目标地址">

                       <img src="images/bojie.jpeg" alt="波姐" title='波多野结衣'>

        </a>

    五、特殊字符          网站

           &nbsp;:空格 (non-breaking spacing,不断打空格),记住!!!

      &lt;:小于号(less than),记住!!!

      &gt;:大于号(greater than),记住!!!

      &amp;:符号&

      &quot;:双引号

      &apos;:单引号

      &copy;:版权©,记住!!!

      &trade;:商标™

      比如说,你想把<p>作为一个文本在页面上显示,直接写<p>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到特殊字符。代码应该这么写:

              这是一个HTML语言的&lt;p&gt;标签

      效果显示:

     

    总结:
        标签分类:
                    1. 内行标签:
                            span
                            a
                            em   i
                            strong  b
    
                            特点:
                                   - 在一行内显示,不换行
                                   - 不能设置宽高,如果不设置宽高,默认是内容的宽高
                            - 行内快标签:  img  input
                                特点:
                                        一行内显示
                                        可以设置宽高
                    2. 块级标签
                            h1-h6
                            div
                            p:  记住  只能放行内标签  img   表单元素  不能放块
                            ul
                                    unordered  list  : 无序列表  它的子元素只能是li
                                    . 手机 电话卡
                                    . 电视 盒子
                                    ul
                                           li   li只能在ul里面
        
                            ol
                                    ordered list : 有序列表
                                                            1.
    							2.
    							3.
    							4.              
    	
    						dl
    							dd
    							dt
    						table
    							tr
    								td
    								
    							border="1" style="border-collapse:collapse;"
    						form
    							action:提交服务器的地址
    							method:提交的方式
    						input:
    							type
    							name
    							value
    						特点:
    							- 独占一行
    							- 可以设置宽高,如果不设置宽,默认是父盒子宽度的100%;
    				
    

      

    div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

    div标签的属性:

    • align="属性值":设置块儿的位置。属性值可选择:left、right、 center

    <span><div>唯一的区别在于<span>是不换行的,而<div>是换行的。

    如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。

     示例:

    复制代码
    <body>
    
        <div>
            导航栏
        </div>
        <div>
            中心banner
        </div>
        <span>路飞</span>
        <span>alex</span>
        
    </body>
    复制代码

    效果:

    div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。

    div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。

    span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。

    就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

     span举例:

    复制代码
    <p>
            商品简介:
            <span>
                <a href="">详细信息</a>
                <a href="">生产日期</a>
            </span>
    </p>
    复制代码

    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负责样式

    ps:这个class属性名就与css有很大关联,讲到css模块会详细讲这块内容。

     

    换行标签<br> (已废弃)

    当你打算结束一行,而又不想开始一个新段落时,<br>标签就派上用场了。无论你将它置于何处,<br>标签都会产生一个强制的换行。

     示例:

    This <br> is a para<br>graph with line breaks

    效果:

     

    上图显示,<p>标签和<br>标签的区别在于<p>标签会在段落的前后自动插入一个空行,而<br>标签没有空行;而且<br>标签没有属性。

    注意<br> 没有结束标签,把<br>标签写为 <br/> 是经得起未来考验的做法,XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

     

    水平线标签<hr>(已废弃)

    水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分

    示例:

     <p>小马哥</p>
        <hr>
        <hr>
    <p>我是段落</p>
    This <br> is a para<br>graph with line breaks

    效果如下:

     

    内容居中标签 <center>

    此时center代表是一个标签,而不是一个属性值了。只要是在这个标签里面的内容,都会居于浏览器的中间。

    示例:

    <center>
           <p>小马哥</p>
    </center>    

    效果如下:

     

     到了H5里面,center标签不建议使用。

     

    预定义(预格式化)标签:<pre>

    含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)
    说明:真正排网页过程中,<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

    示例:

    复制代码
       <pre>
            鹅鹅鹅
    
                作者:李白
            曲项向天歌
            白毛浮绿水
            
        </pre>
    复制代码

    效果如下:

    上图中,好像pre标签部分的字体变小了,而且还出现了缩进,好吧, 这个其实是浏览器搞的鬼。
    为什么要有<pre>这个标签呢?答案是:

    所有的浏览器默认情况下都会忽略空格和空行。

    好吧,其实这个标签也用的比较少。排版标签就给大家介绍到这里。

     

    三、超链接

    超链接有三种形式:

    1、外部链接:链接到外部文件。举例:

    <a href="new.html">点击进入到新网页</a>

    a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

    href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”,不要读作“喝夫”。

    效果:

    当然,我们也可以直接点进链接,访问一个网址。举例如下;

     <a href="http://www.baidu.com" target="_blank">进入百度</a>

     

    2、锚链接
    指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。
    首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。效果如下:

     

    上图中解释:

    11行代码表示,顶部这个锚的名字叫做top。
    然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了#top)。注意上图中红框部分的#号不要忘记了,表示跳到名为top的特定位置,这是规定。如果少了#号,点击之后,就会跳到top这个文件或者top这个文件夹中去。

    如果我们将上图中的第23行代码写成:

    <a href="new.hhml#top">回到顶部</a>

    就表示,点击之后,跳转到new.html页面的top锚点中去。

    说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。

    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>

     

    超链接的属性

    • href:目标URL
    • title:悬停文本。
    • name:主要用于设置一个锚点的名称。
    • target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:
      • _self:在同一个网页中显示(默认值)
      • _blank在新的窗口中打开
      • _parent:在父窗口中显示
      • _top:在顶级窗口中显示

    blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。
    也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了target=”_blank”,就是在新的空白标签页中打开。

     

    ps:a是一个文本级的标签

    比如一个段落中的所有文字都能够被点击,那么应该是p包含a;

    <p>
        <a href="">段落段落段落段落段落段落</a>
    </p>

    而不是a包裹p:

    <a href="">
        <p>
            段落段落段落段落段落段落
        </p>
    </a>

    a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。

     

  • 相关阅读:
    Mockito 简明教程
    说说初用 Mock 工具测试碰到的坑
    java的mock测试框架
    使用模拟对象(Mock Object)技术进行测试驱动开发
    微信小程序
    微信小程序
    uniapp
    微信小程序
    微信小程序
    微信小程序
  • 原文地址:https://www.cnblogs.com/xihuanniya/p/9884194.html
Copyright © 2011-2022 走看看