美文网首页
排版标签

排版标签

作者: BoBo学生 | 来源:发表于2018-10-31 18:28 被阅读0次

    一、排版标签注释标签

    <!-- 注释  --> <!--zhushi -->

    段落标签<p>

    <p>这是一段文字</p>

    属性:align="属性值" left、 right、 center

    HTML标签是分等级的,HTML将所有的标签分为两种:

    文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素

    容器级标签:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

    从学习p的第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素不能放标题h。其他的一律不能放。

    块级标签 <div>和<span>

    div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。

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

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

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

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

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

    span里面是放置小元素的,div里面放置大东西的。div标签负责布局,负责结构,负责分块。css负责样式

    其他

    换行标签<br>、水平线标签<hr>、内容居中标签 <center>

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

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

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

    二、字体标签

    标题

    使用<h1>至<h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题。具有align属性,属性值可以是:left、center、right.<h1 align="center">  中</h1>

    字体标签<font>

    <font face="verdana" color="green">This is some text!</font>

    特殊字符

    &nbsp  &lt

    粗体标签<b>或<strong> 

    下划线标记 <u> 中划线标记<s>

    斜体标记 <i>或<em>

    上标<sup> 下标<sub>     1<sup>3</sup>

    三、超链接

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

    <a href="http://www.baidu.com" target="_blank">点我 </a>

    2、锚链接

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

    <a href="a.hhml#name1">回到顶部</a>  那就表示,点击之后,跳转到a.html页面的name1锚点中去。

    3、邮件链接

    代码举例: <a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>  效果:点击之后,会弹出outlook,作用不大。

    超链接的属性

    href:目标URL

    title:悬停文本

    name:设置一个锚点的名称

    <a href="09_img.html" title="很好看哦">结婚照</a>

    target:告诉浏览器用什么方式来打开目标页面

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

    _blank:在新的窗口中打开   (如果不写target=”_blank”那么就是在相同的标签页打开,如果写了target=”_blank”,就是在新的空白标签页中打开)

    _parent:在父窗口中显示

    _top:在顶级窗口中显示

     <a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

    备注1:

    分清楚img和a标签的各自的属性

    区别如下:

    <img src="1.jpg" />    <a href="1.html"></a>

    备注2:

    a是一个文本级的标签

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

    <p>

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

    </p>

    而不是a包裹p:

    <a href="">

        <p>

            段落段落段落段落段落段落

        </p>

    </a>

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

    四、图片标签

    img: 代表的就是一张图片。是单边标记。 img是自封闭标签,也称为单标签。( image缩写)

    能插入的图片类型:

    能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。

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

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

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

    这里涉及到图片的一个属性:

    src属性:指图片的路径。(source“资源”的缩写)

    写法一:相对路径

    相对当前页面所在的路径。

    两个标记 

    . 代表当前目录

     .. 代表父路径。

    相关文章

      网友评论

          本文标题:排版标签

          本文链接:https://www.haomeiwen.com/subject/bcdxtqtx.html