码迷,mamicode.com
首页 > Web开发 > 详细

HTML教程

时间:2019-01-14 23:18:10      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:怎么   文件   div   倾斜   lang   嵌入   删除线   apt   文档   

<!--Doctype表示文档类型-->
<!DOCTYPE html>
<html lang = "en">
<!--存放不可见元数据:<link>,<meta>,<noscript>,<script>,<style>,<title>-->
<head>
    <!--meta:提供关于文档的信息-->
    <meta charset="utf-8" />
    <!--浏览器左上角标签-->
    <title>Page Title</title>
</head>
<!--存放可见事情-->
<body>

    <b>1.文本元素</b> <br>
    b元素(加粗): 这是<b>HTML</b>教程 <br>
    strong元素(加粗): 这是<strong>HTML</strong>教程 <br>
    wbr元素(安全换行): this is <wbr>asdfasdgasdgfasdfasdf is apple <br>
    i元素(倾斜): 这是<i>HTML</i>教程<br>
    em元素(倾斜): 这是<em>HTML</em>教程<br>
    var元素(倾斜): 这是<var>HTML</var>教程<br> 
    s元素(删除线):这是<s>HTML</s>教程<br>
    del元素(删除线): 这是<del>HTML</del>教程<br>
    u元素(下划线): 这是<u>HTML</u>教程<br>
    ins元素(下划线): 这是<ins>HTML</ins>教程<br>
    small元素(放小字体): 这是<small>HTML</small>教程<br>
    sub元素(下标): 这是HTML<sub>5</sub>教程<br>
    sup元素(上标): 这是HTML<sup>5</sup>教程<br>
    code元素(代码块): 这是<code>HTML</code>教程<br>
    kdb元素(用户输入): 这是<kdb>HTML</kdb>教程<br>
    abbr元素(缩写): 这是<abbr>HTML</abbr>教程<br>
    dfn元素(表示术语): 这是<dfn>HTML</dfn>教程<br>
    q元素(双引号): 这是<q>HTML</q>教程<br>
    cite元素(引用标题): 这是<cite>HTML</cite>教程<br>
    bdo元素(文字方向): 这是<bdo dir="rtl">HTML</bdo>教程<br>
    mark元素(突出显示):  这是<mark>HTML</mark>教程<br>
    time元素(时间): 这是<time>2019-01-01</time>教程<br>
    span元素(跟CSS搭配): 这是<span>HTML</span>教程<br>

    <b>2.超链接和路径</b> <br>

    <a href="http://www.baidu.com">BaiDu</a> <br>
    <!--新开一个窗口进入百度-->
    <a href="http://www.baidu.com" target="_blank">BaiDu</a> <br>
    <!--相对路径-->
    <a href="html_01.html">转入第二页</a> <br>
    <a href="../html_01_second.html">转入父目录</a> <br>

    <b>3.锚点链接(页面内定位)</b> <br>
    <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a> <br>

    <b>4.分组元素</b> <br>
    <!--段落-->
    <p>这是一个段落</p>
    <p>这是另外一个段落</p>
    <!--通用分组与段落类似-->
    <div>这是一个通用分组</div>
    <div>这是另外一个通用分组</div>
    <!--引用大段落来自其他内容-->
    <blockquote>这是一个来自其他内容的引用</blockquote>
    <blockquote>这是另外一个来自其他内容的引用</blockquote>
    <!--展示格式化内容(编辑器怎么排版,我就怎么排版)-->
    <pre>
        ########
            ######### 
                   #######
    </pre>
    <!--添加水平线-->
    <hr>

    无序列表:<br>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul> <br>

    有序列表:<br>

    <ol start="2">
            <li>张三</li>
            <li value="8">李四</li>
            <li>王五</li>
    </ol> <br> 
    生成说明列表:<br>
    <dl>
        <dt>这是第一份文件</dt>
        <dd>这是第一份文件的详细信息1</dd>
        <dd>这是第一份文件的详细信息2</dd>

        <dt>这是第二份文件</dt>
        <dd>这是第二份文件的详细信息1</dd>
        <dd>这是第二份文件的详细信息2</dd>
        
    </dl> <br>

    图片链接: <br>

    <figure>
        <figcaption>这是一张图片</figcaption>
        <img src = "img/dog.jpg">
    </figure>

    <b>5.表格元素</b> <br>
    
    构建基本的表格:
    <table border="1" style="width: 300px;">
        <!--表的标题-->
        <caption>这是标题</caption>
        <!--设置某一列为红色-->
        <colgroup>
            <!--第一列不设置-->
            <col>
            <!--第二列为红色-->
            <col style = "background: red;" span = "1">
        </colgroup>
        <!--表头thead-->
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>婚姻</td>
                <td rowspan="4">基本情况</td>
            </tr>
        </thead>
        <!--表格数据部分-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>未婚</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>已婚</td>
            </tr>
        </tbody>
        <!--表脚foot-->
        <tfoot>
            <tr>
                <td colspan="3">统计:共两人</td>
            </tr>
        </tfoot>

    </table>

    <b>6.文档元素</b> <br>

    标题: <br>
    <header>
        这里存放页面的表头部分:LOGO,标题,导航等.
        <hgroup>
            <h1>这是大标题</h1>
            <h4>这是一个副标题</h4>
        </hgroup>
        <nav>
            这里是一个导航
        </nav>
    </header>

    主题部分: <br>

    <section>
        这是文档的主题部分
    </section>

    <article>
        这是一个文档
        <header>...</header>
        <section>...</section>
        <footer>...</footer>
    </article>

    <aside>

    </aside>


    页面尾部: <br>
    <footer>
        这里是页面尾部,版权啊,等等
        <address>
            这里是联系信息
        </address>
    </footer>

    <br>

    <b>7.嵌入元素</b> <br>
    
    插入图片:
    <!--alt:加载错误的时候显示的文字,width/height设置长度高度, usemap设置点击图片跳转到另外一个网址-->
    <img src="img/dog.jpg" alt="狗图" width="200" height="300"> <br>

    在页面中插入另外一个frame: <br>
    <a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a>

    <br>

    <iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br>

    嵌入插件内容:  <br>

    <!--为了扩展浏览器的功能,-->
    <embed src="https://www.bilibili.com/video/av10257787/?p=2" width="480" height="400"> <br>

    进度条:  <br>
    <progress value = "30" max = "100"></progress> <br>

    范围值:  <br>
    
    <meter value = "30" min = "10" max = "100" low = "40" high="80" optimum="60"></meter> <br>

    <b>8.音频和视频</b> <br>
    
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name = "1"></a>这是第一章内容
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name = "2"></a>这是第二章内容
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name = "3"></a>这是第三章内容

</body>
</html>

HTML教程

标签:怎么   文件   div   倾斜   lang   嵌入   删除线   apt   文档   

原文地址:https://www.cnblogs.com/haochen273/p/10269327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!