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里面相当于放的就是纯文字。

     

  • 相关阅读:
    从句分析
    artDialog ( v 6.0.2 ) content 参数引入页面 html 内容
    Java实现 LeetCode 13 罗马数字转整数
    Java实现 LeetCode 13 罗马数字转整数
    Java实现 LeetCode 13 罗马数字转整数
    Java实现 LeetCode 12 整数转罗马数字
    Java实现 LeetCode 12 整数转罗马数字
    Java实现 LeetCode 12 整数转罗马数字
    Java实现 LeetCode 11 盛最多水的容器
    Java实现 LeetCode 11 盛最多水的容器
  • 原文地址:https://www.cnblogs.com/xihuanniya/p/9884194.html
Copyright © 2011-2022 走看看