• 前端学习:html基础学习二


    3、文档设置标记上-格式标记(主要内容标记<br><p><center><pre><li><ul><ol><dl><dt><dd><hr><div>)


    <br>

    强制换行标记:让后面的文字、图片、表格等等,显示在下一行。例:
    <html>
    <head>
    <title>测试</title>
    <meta charset=”UTF-8”>
    </head>
    <body>
    HTML!<br/>超文本标记语言!
    </body>
    </html>

    <p>

    换段落标记:换段落,由于多个空格和回车在HTML中会被等效为一个 空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 <p>段落!例:

    <html>
    <head>
    <title>p标签示例</title>
    <meta charset=”UTF-8”>
    </head>
    <body>
    <p>
    换段落标记:换段落,由于多个空格和回车在HTML中会被等效为一个 空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 <p>段落!
    </p>
    <p>
    换段落标记:换段落,由于多个空格和回车在HTML中会被等效为一个 空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 <p>段落!
    </p>
    </body>
    </html>

    <center>

    居中对齐标记:让段落或者是文字相对于父标记居中显示。例:

    <html>
    <head>
        <title>center标签示例</title>
        <meta charset=”UTF-8”>
    </head>
    <body>
    <p>
    <center>居中对齐标记:让段落或者是文字相对于父标记居中显示</center>
    </p>
    </body>
    </html>

    <pre>

    预格式化标记:保留预先编排好的格式。例:

    <html>
    <head>
        <title>pre标签示例</title>
        <meta charset=”UTF-8”>
    </head>
    <body>
    <p>预格式化标记: 保留预先编排好的格式</p>
    <p>
    <pre>预格式化标记:         保留预先编排好的格式</pre>
    </p>
    </body>
    </html>

    <li>

    列表项目标记:每一个列表使用一个<li>标记。例:

    <html>
    <head>
        <title>第三节课</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <ul>
        <li>第一节课</li>
        <li>第二节课</li>
        <li>第三节课</li>
        <li>第四节课</li>
        <li>第五节课</li>
    </ul>
    </body>
    </html>

    <ul>

    无序列表标记:<ul>声明这个列表没有序号


    <ol>

    有序列表标记:可以显示特定的一些顺序。

    格式如下:

    <ol type="符号类型">

    <li type="符号类型"></li>

    <li type="符号类型"></li>

    </ol>

    例1:

    <html>
    <head>
        <title>第三节课</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <ol>
        <li>第一节课</li>
        <li>第二节课</li>
        <li>第三节课</li>
        <li>第四节课</li>
        <li>第五节课</li>
    </ol>
    <ol type="I">
        <li>第一节课</li>
        <li>第二节课</li>
        <li>第三节课</li>
        <li>第四节课</li>
        <li>第五节课</li>
    </ol>
    
    <ol type="A">
        <li>第一节课</li>
        <li>第二节课</li>
        <li>第三节课</li>
        <li>第四节课</li>
        <li>第五节课</li>
    </ol>
    </body>
    </html>

    图示:

    有序列表的type属性值

    ①:1

     阿拉伯数字1.2.3等等,默认type属性值

    ②:A

     大小字母A、B、C等等

    ③:a

     小写字母a、b、c等等

    ④:Ⅰ

     大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等

    ⑤:ⅰ

     小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等


    <dl><dt><dd>

    定义型列表:对列表条目进行简短的说明。

    格式如下:

    <html>
    <head>
        <title>第三节课</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <dl>
        <dt>软件说明:</dt>
        <dd>简单介绍软件的功能及基本应用</dd>
        <dt>软件界面:</dt>
        <dd>用于选择软件的外观</dd>
    </dl>
    </body>
    </html>

     


    <hr>

    水平分割线标记:段落之间的分割线。例:

    <html>
    <head>
        <title>第三节课</title>
        <meta charset="UTF-8">
    </head>
    <body>
    水平分割线标记:段落之间的分割线!
    <hr>
    水平分割线标记:段落之间的分割线!
    </body>
    </html>

    <div>

    分区显示标记,也称之为层标记:常用来编排一大段的HTML段落,也可以用于格式化表,和<p>很相似,层可以多层嵌套使用。例:

    <html>
    <head>
        <title>第三节课</title>
        <meta charset=”UTF-8”>
    </head>
    <body>
    <div>
        分区显示标记,也称之为层标记
        <hr>
        分区显示标记,也称之为层标记
    </div>
    <div>
        分区显示标记,也称之为层标记
        <hr>
        分区显示标记,也称之为层标记
    </div>
    </body>
    </html>

    4、文档设置标记下-文本标记(主要内容标记<hn><font><b><i><sub><sup><tt><cite><em><strong>

    <small><big><u>)


    文本标记分类

    1.hn---标题标记:共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小

    2.font---字体设置标记:设置字体的格式

    三个常用属性

    1.size(字体大小)

    <font size="14px">

    2.color(颜色)

    <font color="red">

    3.face(字体)

    <font face="微软雅黑">

    3.b---粗字体标记

    4.i---斜字体标记

    5.sub---文字下标字体标记

    6.sup---文字上标字体标记

    7.tt---打印机字体标记

    8.cite---引用方式的字体,通常是斜体

    9.em---表示强调,通常显示为斜体字

    10.strong---表示强调,通常显示为粗体字

    11.small---小型字体标记

    12.big---大型字体标记

    13.u---下划线字体标记


    小练习:

    <html>
    <head>
        <title>第四节课</title>
        <meta charset="UTF-8">
    </head>
    <body>
    Hn标题标记
    文本编辑<br/>
    <h1>文本编辑</h1>
    <h2>文本编辑</h2>
    <h3>文本编辑</h3>
    <h4>文本编辑</h4>
    <h5>文本编辑</h5>
    <h6>文本编辑</h6>
    font 标记
    文本编辑
    <font size="1">文本编辑</font>
    <font size="3">文本编辑</font>
    <font size="7">文本编辑</font>
    <font size="7" color="red" face="微软雅黑">文本编辑</font>
    <font size="7" color="red" face="宋体">文本编辑</font>
    <font size="7" color="red" face="新细明体">文本编辑</font>
    B标记加粗
    文本编辑
    <b>文本编辑</b>
    i标记斜体
    文本编辑
    <i>文本编辑</i>
    sub下标标记
    2<sub>2</sub>
    sup上标标记
    2<sup>2</sup>
    引用标记
    <cite>文本编辑</cite>
    em标记表示强调,显示为斜体
    <em>文本编辑</em>
    strong标记表示强调,加粗显示
    <strong>文本编辑</strong>
    small标记,显示小一号字体,可以嵌套使用,当字体为最小时将会显示最小字体字号
    <small>文本编辑</small>
    <small>
        <small>文本编辑</small>
    </small>
    <small>
        <small>
            <small>文本编辑</small>
        </small>
    </small>
    big标记,显示大一号的字体
    <big>文本编辑</big>
    <big><big>文本编辑</big></big>
    u标记是显示下划线
    <big><big><big><u>文本编辑</u></big></big></big>
    </body>
    </html>
  • 相关阅读:
    一道初中练习题,现在的我几乎差点很有可能搞不好似乎仿佛就没有做出来.
    [转]IBM ThinkPad 全新、原装机验机流程(完全版)
    在一个BBS上看到的.觉得很不错,放过来.
    验证数字的正则表达式集
    基于百度地图SDK + SQLite数据库的安卓管理系统
    C# 将系统时间转换成农历时间
    博客园
    C#正则表达式的简单用法
    单张图片轮换
    2个有焦点时文字消失或变淡效果
  • 原文地址:https://www.cnblogs.com/richiewlq/p/7678683.html
Copyright © 2020-2023  润新知