html 随笔 1

1.global  html

<html>
    <head>
        <meta charset="utf-8" /><!-- 加上结束斜线是XHTML1.0的语法要求 -->
        <title>网页标题标签</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2.注释

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
    </head>
    <body>
        <!-- 
            1.注释的内容不会在浏览器中呈现出来
            2.注释不能嵌套注释
            3.注释是对代码的描述
            4.注释能够快速的恢复记忆
            5.注释有利于团队开发
        -->

        写给自己的5句话:1,再难也要坚持。2,再好也要淡泊。3,再差也要自信。4,再多也要节省。5,再冷也要热情。
    </body>
</html>

3.语法

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
    </head>
    <body bgcolor="#fedcba">
        <!--
        语法:
        1.标签要成对出现
        2.标签不区分大小写,推荐小写!
        3.属性:是对一个人或物特征的描述。
            多个属性之间用空格隔开,属性值可以用单、双引号引起来,也可以不用。推荐使用双引号(XHTML1.0的规范)
        4.颜色值的使用:
            英文单词
            red
            green
            blue
            silver
            golden
            yellow
            orange
            
            #rrggbb  十六进制来表示
            r - red   #ff0000
            g - green #00ff00
            b - blue  #0000ff


            0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
            0 1 2 3 4 5 6 7 8 9 a  b  c  d  e  f 



        -->
        <FoNt color=red face="黑体">其实我具有大多数创业者都有的特点——"穷"</FONT>
    </body>
</html>

4.p标签

<html> 
    <head> 

        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

        <title>hehe</title> 

    </head> 
    <body>
        
        <p>一男的对他的妻经常红杏出墙而视若不见,同事送一副对联给他。上联:只要日子过的去;下联:那怕头上有点绿。横批:忍者神龟! </p>

        <p>1、要不是老师说不能乱扔垃圾,不然偶早把你扔出去。2、挂个蚊帐在里面裸睡,挑逗蚊子,把它急死。3、別人都以为我低头沉思,其实 我看着地上这一毛该不该捡。4、每个成功的男人背后,都会有一个吃饱了没事做的女人。5、像足球一样,有守门员,                                                          照样可以射门</p>

    </body> 
</html>

5.实体标签

<html> 
    <head> 

        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

        <title>hehe</title> 

    </head> 
    <body>
        
        <!--
        html实体符号
        浏览器不对于一些特殊符号会忽略掉,我们要用实体符号来代替

        &lt;    <
        &gt;    >
        &nbsp;  空格
        -->

        &yen;10,000,000,000.00
        <br/>
        <br/>
        &lt;haha&gt;&lt;/haha&gt;<br/>

        女警洗澡时火灾,匆匆披上浴巾逃出火场,可是没穿内裤又觉得很尴尬,女警就把狗叫过来,闻一闻她下体,让狗能依著她的味道回去叼一件内裤。这只狗闻完,左去右回三十秒,相当迅速地叼来女警挂在衣橱最粗最长的那根警棍。<br/><br/>

        有一次&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;突发奇想跟女友开玩笑,下面为短信内容:我:嗨美女!晚上有空吗?女友:你是?我:我是你的嫖客…女友:我不做很久了………我这是绿了么???

    </body> 
</html>

6.格式标签

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
    </head>
    <body>
        <!--
        1.格式标签
            p       段落标签 每个段落标签之间有一个空行
            pre
            center
            hr
            br
            ul
            ol
            li
            dl
            dt
            dd

        2.文本标签
        -->
         <p>唐三藏:八戒,你跑两步给为师看看。猪八戒:师父,你为啥突然想看徒儿跑步?唐三藏:哎!惭愧!为师自幼在寺中长大,既没吃过猪肉,也没见过猪跑...</p>
        <hr size="5" width="30%" align="right" />

        <p>世界上有两件事最难:一是把自己的思想装进别人的脑袋里;二是把别人的钱装进自己的口袋里。 前者成功了叫老师,后者成功了叫老板,两者都成功了叫老婆。 跟老师斗是不想学了,跟老板斗是不想混了,跟老婆斗是不想活了!</p>

        <hr/>

        <p>世界上最遥远的距离是,我们俩一起出门,你去买苹果六代,我去买六袋苹果。</p>

          考试结束后,一哥们说:“监考掀人家卷子和流氓掀女人裙子有什么区别!明明知道下面是什么还看,这不犯贱么 ”

        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>

        做女人真好,稍微一放松警惕,就有男人勾搭;而男人就苦逼了,稍微一放松警惕,自己的女人可能就被别的男人勾搭跑了。

       

    </body>
</html>

7. ul li ol

 1 <html>
 2     <head>
 3         <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4         <title>Index</title>
 5     </head>
 6     <body>
 7         <!--
 8         1.格式标签
 9             p       段落标签 每个段落标签之间有一个空行
10 
11             hr      水平分隔线
12                 size   高
13                 width   宽
14                 align  left  center right 水平位置
15 
16             br      换行标签
17 
18             ul      无序列表
19             ol      有序列表
20             li      list 列表
21                 type circle  disc square  1 a A i I
22 
23             dl
24             dt
25             dd
26             pre
27             center
28 
29         2.文本标签
30         -->
31         <ul type="a" start="25">
32 
33             <li>远上寒山石径斜</li>
34             <li>白云深处有人家</li>
35             <li>停车坐爱枫林晚</li>
36             <li>霜叶红于二月花</li>
37 
38         </ul>
39         
40         <ol type="disc">
41 
42             <li>远上寒山石径斜</li>
43             <li>白云深处有人家</li>
44             <li>停车坐爱枫林晚</li>
45             <li>霜叶红于二月花</li>
46 
47         </ol>
48     </body>
49 </html>

8.dl

 1 <html>
 2     <head>
 3         <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4         <title>Index</title>
 5     </head>
 6     <body>
 7         <!--
 8         1.格式标签
 9             p       段落标签 每个段落标签之间有一个空行
10 
11             hr      水平分隔线
12                 size   高
13                 width   宽
14                 align  left  center right 水平位置
15 
16             br      换行标签
17 
18             ul      无序列表
19             ol      有序列表
20             li      list 列表
21                 type circle  disc square  1 a A i I
22                 start="number"
23 
24             dl
25             dt
26             dd
27                 定义列表
28 
29             pre
30             center
31 
32         2.文本标签
33         -->
34 
35         <dl>
36             <dt>HTML</dt>
37             <dd>HyperText Markup Language</dd>
38         
39             <dt>CSS</dt>
40             <dd>Cascading Style Sheets</dd>
41 
42             <dt>DDS</dt>
43             <dd>大屌丝</dd>
44         </dl>
45     </body>
46 </html>

9. pre

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
    </head>
    <body>
        <!--
        1.格式标签
            p       段落标签 每个段落标签之间有一个空行

            hr      水平分隔线
                size   高
                width   宽
                align  left  center right 水平位置

            br      换行标签

            ul      无序列表
            ol      有序列表
            li      list 列表
                type circle  disc square  1 a A i I
                start="number"

            dl
            dt
            dd
                定义列表

            pre     原样输出 
       center 居中标签

        2.文本标签
        -->

        <pre>

            aaaa
                                aaaa
                                            aaaaaa

        </pre>
    <center>
    hehe
    </center>
</body> </html>

10. text

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
    </head>
    <body>
        <!--
        文本标签
        hn 标题标签 n 1-6
        i   倾斜
        b   加粗
        u   下划线
        sub 下标
        sup 上标
        font 文字标签
            size 1-7  默认是3  -1 -2 +1 +2 +3 +4
            face 设置字体
        -->
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>

        <i>高中班里有个女生姓焦,一日和她打个赌,什么赌忘了,她问:你输了怎么办?答曰:我输了我跟你姓焦。声音洪亮,结果全班暴笑10分钟!!</i><br/><br/>

        <b>早上醒了,老公搂着我,手很不老实的往上摸,我抓住他手问他干吗?他说我想跟咪咪说会话。我说:哦,那你说吧。然后他就各种摸、揉、捏……我说:你不是和mimi说话吗??他说:手语……手语……!</b><br/><br/>

        <u>老婆摇醒老公,要求换位置睡,于是老公跨过老婆身体到另一边睡。没多久,老婆又说:老公我又想睡过来嘛;老公又跨回来睡了。还没5分钟,又被摇醒,还要换位置!老公火了,老婆更火:你大禹治水啊?三过家门而不入!</u>
        <br/><br/>

        
        H<sub>2</sub>O<br/>
        2<sup>2</sup>+3<sup>2</sup>=13

        <br/><br/>

        <font size="3" face="楷体" color="orange">一对小夫妻新婚之夜,亟不可待的宽衣解带。丈夫看到妻子的玉体后,突然问了个问题:“咦?怎么没有马赛克?</font>

    </body>
</html>
原文地址:https://www.cnblogs.com/examine/p/4642502.html