zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Lesson 43-44 Vacation Season is Approaching?
    Lesson 41-42 How would you respond?
    Lesson 37-38 Do you want to be a millionaire?
    Lesson 35-36 What did you forget?
    Lesson 33-34 Dieting
    保送
    陈老师搬书
    水题(原 USACO Mother's Milk)
    最大公约数和最小公倍数问题(luogu 1029)
    最大子矩阵(OJ 1768)
  • 原文地址:https://www.cnblogs.com/liuhui0308/p/11876342.html
Copyright © 2011-2022 走看看