前端学习: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>

 

posted @ 2017-10-16 20:28  Richie`  阅读(159)  评论(0)  编辑  收藏  举报