深入浅出HTML常用标签

思维导图

常用HTML标签

基本标签学习

H系列标签（h1-h6）

HTML 段落是通过 <p> 标签进行定义的。

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

<p>标签

HTML 段落是通过 <p> 标签进行定义的。

<p>这是一个段落</p>

<hr />水平线

<hr />

注释

<!-- 注释的内容-->

<img>标签

<img src="图片的路径" alt="找不到图片，替代的文字" />

<ul>无序列表

给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后。

   <h4>选择居住城市</h4>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
    </ul>

<ol>有序列表

给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分。

<h4>中国房价排行</h4>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
    </ol>

<dl>定义列表

给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述。

    <dl>
        <dt>北京</dt>
        <dd>国家的首都, 看升国旗的地方</dd>
        <dt>上海</dt>
        <dd>魔都, 遍地是黄金的地方</dd>
    </dl>

<a>标签（HTTP GET请求）

用于从一个页面跳转到另一个页面。

<a href="你想访问的网址" target="_blank">我的博客</a>

target的属性值含义

_blank 新窗口打开
_self 当前页面打开/加载
_parent 在父级窗口打开新页面(需结合iframe使用,才能展示出效果)
_top 在顶级窗口打开新页面(需结合iframe使用,才能展示出效果)

<a>标签的假链接

<a href="#">假链接</a>
<a href="javascript:;">假链接</a>
<!-- #会自动回到顶部，javasrcipt:;不会自动回到顶部-->

<input>标签

（name一定要写，提交数据时候要用到）

type="checkbox"复选框

你喜欢的水果:<input type="checkbox" name="friut">葡萄
<input type="checkbox" name="friut">西瓜者
<input type="checkbox" name="friut">杨桃

复选框

type="radio"单选框

性别:<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女

单选框

input和button的区别

input没有子元素,button有子元素

<select>标签

<select name="group" multiple>
    <option value="">-</option>
    <option value="1">第一组</option>
    <option value="2">第二组</option>
    <option value="3" disabled>第三组</option>
    <option value="4" selected>第四组</option>
</select>

小Tips:

multiple 可以同时选中几项
disabled 默认不能被选中
selected 默认被选中

image

<label>标签

label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。

<label><input type="checkbox" name="friut">木瓜</label>

<textarea>多行文本框(文本域)

textarea标签用于在表单中定义多行的文本输入控件

<textarea cols="30" rows="10">默认</textarea>

    <!--禁止手动拉伸-->
<style type="text/css">
    textarea{
        resize: none;
    }
</style>

<from>标签

作用用于收集用户信息, 让用户填写、选择相关信息

<form action="users" method="POST">
    所有的表单内容，都要写在form标签里面
</form>

<table>标签

表格的基本元素

基本元素	翻译/含义
caption	标题
thead	table head(表头)
tbody	table body(表格主体)
tfoot	table foot(表格的底部)
tr	table row(表格行)
th	table header(表格页眉)
td	table data(单元格)

图示：

image.png

<table border="1" style="font-size: 12px;border-collapse: collapse;">
    <colgroup>
        <col width="74">
        <col width="86">
        <col width="497">
    </colgroup>
    <thead>
        <tr>
            <th>称号</th>
            <th>姓名</th>
            <th>简介</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>白胡子</td>
            <td>爱德华·纽盖特</td>
            <td>白胡子海贼团船长，被称为世界最强男人，过去与罗杰、金狮子，并成为三大传说中的海贼，震震果实能力者，顶上战争上被黑胡子海贼团杀死，享年72岁。</td>
        </tr>
        <tr>
            <td>红发</td>
            <td>香克斯</td>
            <td>红发海贼团船长，原罗杰海贼团的实习员，拥有强大的霸王色霸气，是路飞海贼之路的引路人，为了救路飞失去了左臂。</td>
        </tr>
        <tr>
            <td>百兽</td>
            <td>凯多</td>
            <td>百兽海贼团船长，被称为世界最强生物，与和之国将军霸占着和之国。</td>
        </tr>
        <tr>
            <td>BIG·MOM</td>
            <td>夏洛特·玲玲</td>
            <td>BIG·MOM海贼团船长，四皇中的唯一女性，魂魂果实能力者，托特兰统治者。</td>
        </tr>
        <tr>
            <td>黑胡子</td>
            <td>马歇尔·D·蒂奇</td>
            <td>黑胡子海贼团提督，原白胡子海贼团二番队成员，暗暗果实、震震果实双能力者，极恶的世代之一，顶上战争杀死白胡子，夺取其果实能力，两年后成为四皇。</td>
        </tr>   
    </tbody>
</table>

image

[图片上传中...(image.png-67d8e2-1552312051179-0)]

小Tips:

th和td的区别是:th里面不是放数据,td里面全是数据
thead tbody tfoot不写,浏览器也不会报错，浏览器会自动全部加入到tbody里
thead tbody tfoot书写的顺序颠倒没关系,浏览器会自动纠正顺序(头->身体-->脚)
border-collapse: collapse;合并边框
col可以规定每一列的样式