Web前端基础(2):HTML(二)

1. body中的相关标签

1.1 标题标签:hn

HTML提供<hn>系列标签,用于修饰标签,包含:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1>定义最大的标题。<h6>定义最小的标题。

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 标题标签 -->
        <h1>小灰灰</h1>
        <h2>小灰灰</h2>
    </body>
</html>

1.2 水平线标签:hr

<hr/>:标签在HTML页面中创建一条水平分隔线,用于 定义内容中的主体变化。

size属性:水平线的高度,单位像素。

noshade属性:没有阴影,取值,noshade,表示显示纯色。

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 水平线 -->
        <hr />
        <hr size="5" />
        <hr noshade="noshade" />
    </body>
</html>

1.3 字体标签:font

<font>:用于设置字体尺寸、字体颜色等。

size属性:设置字体的大小。可能的值:从1到7的数字。浏览器默认值是3。

color属性:设置字体的颜色。

  颜色的取值:#xxxxxx或colorname

    #xxxxxx表示使用红绿蓝三原色设置颜色。

      红绿蓝分别取值:00--ff,此处使用16进制。(ff就是十进制的255)

      #000000 黑色,#ffffff 白色

      #ff0000 红色,#00ff00 绿色,#0000ff蓝色

      红绿蓝2位取值相同可以省略成1位。例如:#112233简化成#123

    colorname使用英文单词确定颜色。red红色,blue蓝色,green绿色

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 字体-->
        <font size="7">我最大</font>
        <font color="#ff0000">我最红</font>
        <font color="blue">我最蓝</font>
    </body>
</html>

1.4 格式化标签:b、i 

<b>:粗体。

<i>:斜体。

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 格式化-->
        <b>粗体</b>
        <i>斜体</i>
    </body>
</html>

1.5 段落标签:p、br

<p>:定义段落。p标签会自动在其前后创建一些空白。

<br/>:插入单个换行。

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 段落-->
        <p>我是段落1</p>
        <br />
        <p>我是段落2</p>
    </body>
</html>

1.6 图片标签:img 

<img>:在html页面中引用一张图片。

src:指定需要显示图片的URL(路径)。

alt:图片无法显示时的替代文本。

width:设置图像的宽度。

height:定义图像的高度。

实例:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 显示图片 -->
        <img src="img/1.jpg" alt="我躲起来了" width="200px" height="200px" title="鼠标移上显示"/>
        <img src="img/0.jpg" alt="我躲起来了" width="200px" height="200px" title="鼠标移上显示"/>
    </body>
</html>

1.7 列表标签:ul、ol

<ol>:定义有序列表。

  type:列表类型,取值:A、a、I、i、1等。

<ul>:定义无序列表。

  type:符号的类型,取值:disc 实心圆、square 方块、circle 空心圆。

<li>:定义列表项。是<ul>或<ol>的子标签。

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 列表标签 -->
        <ul type="circle"> <!-- 以“空心圆”显示无序列表 -->
            <li>无序</li>
            <li>无序</li>
            <li>无序</li>
        </ul>
        
        <ol type="I"> <!-- 以大写阿拉伯数字显示序号 -->
            <li>有序</li>
            <li>有序</li>
            <li>有序</li>
        </ol>
    </body>
</html>

1.8 超链接标签:a 

<a>:标签是超链接,是在html页面提供一种可以访问其他位置的实现方式。

href:用于确定需要显示页面的路径(URL)。

target:确定以何种方式打开href所设置的页面。常用取值:_blank、_self等。

  _blank:在新窗口中打开href确定的页面。

  _self:默认。使用href确定的页面替换当前页面。

例如:

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 超链接 -->
        <a href="http://www.baidu.com" target="_self">
            访问百度,以默认方式打开
        </a><br />
        <a href="http://www.cnblogs.com" target="_blank">
            访问博客园,以新窗口方式打开
        </a><br />
    </body>
</html>

猜你喜欢

转载自www.cnblogs.com/liuhui0308/p/11876342.html
今日推荐