您的位置:首页 > Web前端 > HTML

没人比我更懂html_HTML常用标签汇总

2020-08-01 13:00 148 查看

HTML常用标签

  • 二:无语义标签(容器/盒子)
  • 四:功能标签
  • 2.列表标签(布局)
  • 3.表单标签(获取用户信息)
  • 一:语义化标签

    1.标题标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    2.段落标签

    <p>段落标签</p>

    3.换行标签

    <br>       /*用来换行*/

    二:无语义标签(容器/盒子)

    1.div(块元素)

    <div>
    我就是个盒子(块级元素  占一行)
    </div>

    2.span(行内元素)

    <span>我是行内元素  不会独自占一行</span>

    三:内容标签

    1.img(图片标签)

    <img src="url" />
    
    src:URL 指存储图像的位置。
    如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,
    那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
    
    alt:在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。
    此时,浏览器将显示这个替代性的文本而不是图像。
    为页面上的图像都加上替换文本属性是个好习惯,
    这样有助于更好的显示信息,
    并且对于那些使用纯文本浏览器的人来说是非常有用的。

    2.a(超链接标签)

    <a href="url">Link text</a>
    
    href 属性规定链接的目标。
    Link text 被超链接的文本

    3.注释标签

    <!-- 我就是用来注释的 -->

    4.特殊字符

    四:功能标签

    1.表格标签(用于显示数据)

    a.基本语法

    <table>
    <tr>  						<!-- 行 -->
    <td></td> 				<!-- 列 -->
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>             			<!-- 行 -->
    <td></td> 				<!-- 列 -->
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    b.表格属性

    c.合并单元格

    合并单元格步骤:

    1.先确定是跨行合并还是跨列合并
    2.找到目标单元格。写上合并方式=合并单元格数量
    3.删除多余单元格

    跨行合并:rowspan=“合并单元格的个数”
    跨列合并:colspan=“合并单元格的个数”

    2.列表标签(布局)

    a.有序

    <ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    </ol>

    b.无序

    <ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    </ul>

    c.自定义

    <dl>
    <dt>名词1</dt>
    <dd>名词1解释</dd>
    <dd>名词2解释</dd>
    <dd>名词3解释</dd>
    </dl>

    3.表单标签(获取用户信息)

    a.input(type属性)

    <input type="text">

    b.label(提高用户体验)

    c.select(下拉列表)

    <select name="" id="">
    <option value="">选项一</option>
    <option value="">选项二</option>
    <option value="">选项三</option>
    <option value="">选项四</option>
    </select>

    d.textarea(多行文本框)

    <textarea name="" id="" cols="30" rows="10">
    我可以装很多东西
    </textarea>
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: