首页 > > 网页制作 > css >

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

2019-11-17 09:19:53来源：博客园阅读 ()

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>