HTML学习之旅（三）——文档设置标记

　　经过昨天的学习，已经对HTML有初步的了解了吧。也能写一些简单的小脚本了。现在开始，咱们一起大踏步的往前走吧。今天咱们一起来学习文档设置标记吧！一点点慢慢的靠近，是不是感觉很不错呀？那咱们就开始吧！

　　首先文档设置标记包含：

　　　　1）格式标记

　　　　2）文本标记

　　1、格式标记中常用的有以下10个标记：

标记

标记名称

格式

<br>

换行标记

<br></br>

<p>

段落标记

<p></p>

<center>

居中对齐标记

<center></center>

<pre>

预格式标记（完全按照你敲进去的格式显示）

<pre></pre>

<li>

列表标记

<li></li>

<ul>

无序列表标记

<ul></ul>

<ol>

有序列表标记

<ol></ol>

<dl>，<dt>，<dd>

定义型（表示还没有用过这个标记）

<dl></dl>，<dt></dt>，<dd></dd>

<hr>

段落分隔线标记

<hr></hr>

<div>

分区显示标记，大神们也叫它分层标记

<div></div>

　　2、文本标记中常用的有以下14种：

 

标记

标记名称及用法

标记格式

hn

标题标记，n表示范围，从(1、2、3、4、5、6)中取值，1为最大，6为最小

双标记

font

字体设置标记，font标记中有三个比较常用的属性：
1.size：字体大小，从1~7中取值
2.color：字体颜色
3.face：字体样式，如：宋体，仿宋。。。。。。

双标记

b

粗字体标记

双标记

i

斜体标记

双标记

sub

文字下标字体标记

双标记

sup

文字上标字体标记

双标记

tt

打印机字体标记

双标记

cite

引用方式的字体标记，通常为斜体

双标记

em

强调标记，通常为斜体

双标记

strong

强调标记，通常为粗体

双标记

small

小型字体标记，可嵌套使用，逐层减小，直至最小

双标记

big

大型字体标记，可嵌套使用，逐层增大，直至最大

双标记

u

下划线字体标记，可以和其他标记嵌套使用

双标记

　　下面我们挑几个标记来玩一下吧，代码如下：

<html>
    <head>
        <title>HTML学习</title>
        <meta charset="utf-8">
    </head>
    <body text="blue" link="green" vlink="red" alink="blue">
        <h1><center>格式标记和文本标记<br>挺好玩的!!!!</h1>
        
            下面考你一道智力题：            
                <ol type="1">
                    <li>请问青蛙为什么会飞？请从以下选项中选择你认为正确的答案填入括号中（）
                        <ol type="A">
                            <li>因为青蛙吃了会飞的蚊子，所以会飞；</li>
                            <li>因为青蛙吃了神奇小药丸，所以会飞；</li>
                            <li>因为青蛙趴在牛背上，所以会飞；</li>
                            <li>不知道；</li>
                    </ol>
                    <li>请问蛇为什么会飞？请从以下选项中选择你认为正确的答案填入括号中（）</li>
                        <ol type="A">
                            <li>因为蛇吃了会飞的青蛙，所以会飞；</li>
                            <li>因为蛇吃了神奇小药丸，所以会飞；</li>
                            <li>因为蛇吃了蚊子，所以会飞；</li>
                            <li>不知道；</li>
                        </ol>
                    <li>请问老鹰为什么会飞？请从以下选项中选择你认为正确的答案填入括号中（）
                            <ol type="A">
                                <li>因为老鹰吃了会飞的青蛙，所以会飞；
                                <li>因为老鹰吃了神奇小药丸，所以会飞；
                                <li>因为老鹰吃了蚊子，所以会飞；
                                <li>你个二货，因为老鹰本来就会飞；
                                <li>不知道；</li>
                            </ol>
            
    </body>
</html>

　　然后我们再将代码保存为.html格式，将源文件拖进浏览器，看看效果。

　　和预期的一样，有木有？好了，今天的学习就到这里吧！

 

posted @ 2016-08-25 00:00  cgsve  阅读(364)  评论(2)    收藏  举报