zoukankan      html  css  js  c++  java
  • 认识html标签

    1.!DOCTYPE 文档结构类型

    2.<html>开始标记
    </html>闭合标记

    3.charset 字符编码集

    常用字符集:UTF-8、GB2312、GBK等

    4.<meta>单标记

    5.<h1>h1到h6的标题

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    

    6.<p>段落

    7.<ul>无序列表

    • 不要独自驾车去山区
    • 不要跟别人的男朋友驾车去山区
    • 不要跟别人的老婆驾车去山区
    • 不要跟带别人的狗驾车去山区
        <ul>
            <li>不要独自驾车去山区</li>
            <li>不要跟别人的男朋友驾车去山区</li>
            <li>不要跟别人的老婆驾车去山区</li>
            <li>不要跟带别人的狗驾车去山区</li>
        </ul>
    

    8.<ol>有序列表

    1. 不要独自驾车去山区
    2. 不要跟别人的男朋友驾车去山区
    3. 不要跟别人的老婆驾车去山区
    4. 不要跟带别人的狗驾车去山区
    <ol>
        <li>不要独自驾车去山区</li>
        <li>不要跟别人的男朋友驾车去山区</li>
        <li>不要跟别人的老婆驾车去山区</li>
        <li>不要跟带别人的狗驾车去山区</li>
    </ol>
    

    9.<dl>定义列表

    名字
    是一个人的标识
    <dl>
        <dt>名字</dt>
        <dd>是一个人的标识</dd>
    </dl>
    

    10.<pre>预格式

    11.<blockquote>大引用

    这是一个大引用
    <blockquote>这是一个大引用</blockquote>
    

    12.<q>小引用

    这是一个小引用

    <q>这是一个小引用</q>
    

    13.<span>跨越多个字符

    这是一个红色的词

    <p>这是一个<span style="color:blue;">红色</span>的词</p>
    

    14.<a>超链接

    <a href="链接" target="_blank">
    

    15.<img>图片

    <img src="" alt="提示" />
    

    16.<div>区块

    17.<strong><b>加粗

    加粗

    <strong>加粗</strong>
    

    18.<em><i>斜体

    斜体

    <em>斜体</em>
    

    19.<sup>上标

    22

    2<sup>2</sup>
    

    20.<sub>下标

    log2

    log<sub>2</sub>
    

    21.<abbr>缩写

    DOTA

    <abbr title="Defend Of Ancient">DOTA</abbr>
    

    22.<figure>定义说明

    图片 图片

    <figure>
        <img src="XXX" alt="图片">
        <figcaption>图片</figcaption>
    </figure>
    

    23.<audio>音频

    <audio src="XXX" controls autoplay></audio>
    

    controls使可控 autoplay自动播放

    24.<video>视频 支持格式:MP4 webm ogg

    <video src="" controls autoplay loop></video>
    

    loop循环播放

    25.<table>表格

    1-1 1-2
    2-1 2-2 2-3
    3-2 3-3
    <table border="1">
        <tr>
            <td colspan="2">1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
    

    tr表示表格行,td表示表格数据,table-row,border设置边框线粗细,

    colspan合并行,rowspan合并列

    th表头,加粗 caption大表头

    26.<style>样式控制 置于head标签中

    table{
        border-collapse: collapse;
    }
    

    为表格添加上边框

    27.<form>表单







      
    班长 学委 纪委

    <form action="XXX" method="get">
        <input type="text" placeholder="请输入账号" />
        <input type="password" maxlength="6" />
        <input type="button" value="点击我" />
        <input type="reset" value="清空" />
        <input type="submit" value="提交" />
        <button>新的提交按钮</button>
    
        <label for="male">男</label>
        <input type="radio" name="sex" id="male" />
        <label for="female">女</label>   
        <input type="radio" name="sex" id="female" />
    
        班长<input type="checkbox" />
        学委<input type="checkbox" checked />
        纪委<input type="checkbox" />
    
        <select name="" id="">
            <option value="">北京</option>
            <option value="">南京</option>
            <option value="">东京</option>
            <option value="">西京</option>
        </select>
    
        <textarea name="" id=""></textarea>
    </form>
    

    action提交外部链接 method提交方式:get post

    input类型:文本框(text),密码框(password);点击按钮(button),重置按钮(reset),提交按钮(submit);单选(radio);多选(checkbox)

    placeholder:预定义文本框内容;maxlength:最大输入限制;value:文字内容;name:命名,用于表单提交数据;for:ID选择;checked:默认选择

    <lable>可以增强用户体验

    <select>创建下拉栏,使用<option>编辑选项

    <textarea>一个可以多行输入的文本框

    28.<mark>高亮

    <p>我是<mark>中国人</mark></p>
    

    29.<nav>导航栏

    科技 体育 军事

    <nav>
        <a href="XX">科技</a>
        <a href="XX">体育</a>
        <a href="XX">军事</a>
    </nav>
    

    30.<header><footer><article><section><aside>等h5新语义标签

    header页眉 footer页脚 article内容 section区块 aside侧边栏

    31.行内元素,块级元素

    行内:

    块级:

    inline-block行内块

  • 相关阅读:
    Python挂载杂记
    Python Log的使用, 模块化
    Python实现图片长宽比例缩放和填充
    系统监控与硬盘
    linux基础三
    linux基础二
    linux基础一
    网络基础
    操作系统
    计算机硬件基础
  • 原文地址:https://www.cnblogs.com/pq1234/p/7183300.html
Copyright © 2011-2022 走看看