zoukankan      html  css  js  c++  java
  • 前端HTML(二/三)

    待补充

    一、字体标签

    字体标签包含: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 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;标签

      效果显示:

        

  • 相关阅读:
    Excel导出
    上传进度基础
    git基本使用
    git学习记录
    Composer 扩展包安装方法
    selected多次点击不生效
    ajaxFileUpload的data数据带pre标签
    php-resque 简单的php消息队列
    git checkout 报错 refname 'origin/branch-name' is ambiguous
    MySQL单独存放表空间Innodb_file_per_table
  • 原文地址:https://www.cnblogs.com/wxj1129549016/p/9671255.html
Copyright © 2011-2022 走看看