HTML_001

/*
目录:
  一: 语法     
  二: code
*/

一: 语法

html: HyperText Markup language

html: 是什么
css: 样式表 - 长什么样



<!-- HTML 结构 --> 
    <p> <!-- 段落 --> 


    <h1> </h1>    <!-- 标题 --> 
    <hgroup> </hgroup> <!-- 头组 --> 

    <br> <br />    <!-- 换号 --> 
    <wbr> </wbr>


<!-- 字体格式 --> 
    <b> </b>             <!-- 内容加粗 --> 
    <i>    </i>             <!-- 内容倾斜 --> 
    <tt> </tt>            <!-- 打字机字体 --> 
    <small> </small>     <!-- 字体变小 --> 
    <del> </del>         <!-- 内容删除 --> 
    <ins> </ins>         <!-- 内容添加 --> 
    <s> </s>            <!-- 内容过时 -->
    <sup></sup>            <!-- 多少次方 -->
    <sub></sub>            <!-- 。。。。 -->    
    <mark></mark>        <!-- 内容高亮 -->    
    
    
<!-- 短语格式 --> 
    <em> </em>            <!-- 内容强调 -->    
    <strong> </strong>    <!-- 内容着重 -->    
    <dfn> </dfn>        <!-- definition 定义 -->
    <code> </code>        <!-- code代码 -->
    <samp> </samp>        <!-- 例子代码 -->
    <kbd> </kbd>        <!-- 用户输入 -->
    <var> </var>        <!-- variable变量 -->
    <cite> </cite>        <!-- cite引用 -->
    
    
<!-- 特殊格式 --> 
    <address> </address>        <!-- 地址 -->
    <blockquote> </blockquote>    <!-- 缩进 -->
    <q> </q>                    <!-- 引用 -->
    <pre> </pre>                <!-- 预格式化 -->
    
    
<!-- 属性 -->
    <hr width=50%/50 align=left/reght size=1>         <!-- 分割线 -->
    <abbr title = "中华人民共和国"> PRC </abbr>        <!-- 缩写展示 -->
    <bdo dir=rtl> <bdi> <bdi> </bdo>                <!-- 内容反转 -->
    &lt; &gt;                                        <!-- 小于大于 -->
    &amp; &nbsp;                                    <!-- &空格 -->
    &uuml; &Uuml                                    <!-- 元音u -->    
    
    
<!-- 列表 -->
    餐后饮料:
    <ul>    <!-- 无序 -->
        <li> 红茶 </li>
        <li> 咖啡 </li>
        <li> 牛奶 </li>
    </ul>
    
    <ol>    <!-- 有序 -->
        <li> 红茶 </li>
        <li> 咖啡 </li>
        <li> 牛奶 </li>
    </ol>    
    
    
    <dl>    <!-- 解释 -->
        <dt> 方糖 </dt>
        <dd> 方的糖 </dd>
    </dl>    
    
    
<!-- 图片 -->
    <img loading="123" src="file:///C:/Users/123/Desktop/123.jpeg" alt="稍等" width="432" height="615">
    <iframe src="file:///C:/Users/123/Desktop/123.jpeg" alt="稍等" width="432" height="615"> </iframe>
    
    
<!-- 链接 -->
        <a href="本地"/"#here" target=_blank> </a>    <!-- 链接 --> 
        
        <p>
            <img src="file:///C:/Users/123/Desktop/123.jpeg" width="432" height="615" usemap="#map">
            
            <map name="map">
                <area shape="rect" coords = "0, 0, 200, 300" 
                    href="http://www.baidu.com" alt="news"/>
                <area shape="circle" coords = "75, 75, 25" 
                    href="http://www.baidu.com" alt="news"/>        
            </map>
        </p>
    
    
<!-- 表格 -->
    <table border="50">    <!-- 样式 -->
        <caption>表格</caption> <!-- 表名 -->
        <thead>    <!-- 表头 -->
            <tr>
                <td> OS </td>
                <td> Chinese <td>
                <td> French <td>
            </tr>    
        </thead>
        <tbody>    <!-- 表身 -->
            <tr>
                <td> IOS5 </td>
                <td>  <td>
                <td> Yes <td>
            </tr>
            <tr>
                <td colspan="4"> WINDOWS </td>
            </tr>    
        </tbody>
        <tfoot> <!-- 表尾 -->
        </tfoot>
    </table>
    
    


二 代码

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title> 小学课本封面由二孩变成了三孩?妈妈也不打扮了?人教社辟谣 </title>
    </head>

    </body>
        <h1> 标题1</h1>
    <p>
        <img loading="123" src="./123.jpeg" alt="mama" width="432" height="615"/>
        <img loading="123" src="../upload/123.jpeg" alt="mama" width="432" height="615"/>
    </p>

        
    <table border="50">    <!-- 样式 -->
        <caption>表格</caption> <!-- 表头 -->
        <thead>
        <tr>
            <td> OS </td>
            <td> Chinese <td>
            <td> French <td>
        </tr>    
        </thead>
        <tr>
            <td> IOS5 </td>
            <td>  <td>
            <td> Yes <td>
        </tr>
        <tr>
            <td colspan="4"> WINDOWS </td>
        </tr>    
    </table>
    
    </table>
    
        <p title=第一节>开学没几天,网络上就开始流传着热心家长们对语文课本的“新发现”:
            <b>一年的时间,课本封面由二胎变成了三胎,妈妈也不打扮了,头发随便一扎,衣服还是去年那件,只是旧了。多了个娃,爸爸也不在家下棋了,估计为了养家加班挣钱去了。</b>
        </p>
        
        <p title = "第二章">
            家长们口中的两个封面分别是统编语文教材五年级上册、六年级上册封面。
            <b> 这段“看图说话”因为贴近“三胎”的社会热点,迅速引发了众多网友的共鸣、转发。</b>
            人民教育出版社在其公众号上进行了“辟谣”:五年级上册封面上被网友们误认为“爸爸”“妈妈”的其实是“小哥哥”“小姐姐”;二胎、三胎的解读不过是网友们的自行联想。
            人教社介绍,语文小学阶段的封面内容,选择中国传统文化中与孩子贴近的题材为表现点,分别是风筝、糖葫芦、皮影、布老虎、泥塑、端午、脸谱、对联、围棋、剪纸、国画写生、宫灯12种题材,来对应小学的12册教材。画面中,孩子都是主角;画面符合儿童的年龄特点和认知水平,同时适当兼顾与教科书使用时节相对应。比如,五年级上册语文课本的封面上,四个孩子围坐在石桌旁下着围棋;六年级上册的封面上,孩子们正在进行国画写生。
        </p>
        <p>
            测试<i>测试</i>测试<br>
            <tt>测试</tt> <br>
            <small> 测试</small><br>
            <del> 测试<del> <ins> 测算</ins>
        </p>
        <p>
            a<sup>2</sup>+b<sub>0</sub>
        </p>
        <p>
            <mark> test</mark>
        </p>        
        <p>
            <img loading="123" src="C:Users123Desktopaaahtml1234.jpeg" alt="mama" width="432" height="615"/>
        </p>
        <hr width=50% align = "">
        <abbr title = "中华人民共和国"> PRC </abbr><br>
        <bdr> 中华人民共和国 </bdr>
        a<2
        &lt; &gt;    <br>
        &amp; &nbsp; &nbsp; &nbsp; &nbsp; &amp; <br>
        &uuml; &Uuml <br><br>
        <a href="#here" target=_blank> 51cto</a>    <!-- 链接 --> 
        餐后饮料:
        
        <ul>
            <blockquote>
            <li> 红茶 </li>
            <li> 咖啡 </li>
            <li> 牛奶 </li>
            </blockquote>
        </ul><br><br>
        
        餐后饮料:
        <ol start = 2>
            <blockquote>
            <li> 红茶 </li>
            <li> 咖啡 </li>
                <ul>
                    <li> 加糖 </li>
                    <li> 不加糖 </li>
                </ul>
            <li> 牛奶 </li>
            </blockquote>
        </ol>    
    
        <dl>    <!-- 有序 -->
            <dt> 方糖 </dt>
            <dd> 方的糖 </dd>
        </dl>    
        <iframe src="https://edu.51cto.com/course/24349.html" alt="稍等" width="100%" height="600"> </iframe>
        <p>
            <em> 内容强调</em>            <br>    <!-- 内容强调 -->    
            <strong> 内容着重</strong>    <br>    <!-- 内容着重 -->    
            <dfn>definition 定义 </dfn>    <br>    <!-- definition 定义 -->
            <code> code代码</code>        <br>    <!-- code代码 -->
            <samp> 例子代码</samp>        <br>    <!-- 例子代码 -->
            <kbd> 用户输入</kbd>        <br>    <!-- 用户输入 -->
            <var> variable变量</var>    <br>    <!-- variable变量 -->
            <cite>cite引用 </cite>        <br>    <!-- cite引用 -->
        </p>
        <p>
            <address>
            <blockquote>
                Rm 401 CKP West Wing<br>
                <q>玉泉 Camps</q> <br>
                浙江 U
            </blockquote>
            </address>
        </p>    
        <p>
            int main()
            {
                printf("hello
");
                return 0;
            }
        </p>
        <p>
        <code>
            int main()
            {
                printf("hello
");
                return 0;
            }
        </code>
        </p>        
        <p>
        <code>
            int main()
            {
                printf("hello
");
                return 0;
            }
        </code>
        </p>    
        <p id = here>
            <code>
                <pre>
                    int main()
                    {
                        printf("hello
");
                        return 0;
                    }
                </pre>
            </code>
        </p>
    <p>
        <img src="file:///C:/Users/123/Desktop/123.jpeg" width="432" height="615" usemap="#map">
        
        <map name="map">
            <area shape="rect" coords = "0, 0, 200, 300" 
                href="http://www.baidu.com" alt="news"/>
            <area shape="circle" coords = "250, 350, 30" 
                href="http://www.baidu.com" alt="news"/>        
        </map>
    </p>
            
    <body>

</html>
原文地址:https://www.cnblogs.com/huafan/p/15318641.html