HTML中最核心的标签用法

1.注释标签

    <!--  -->

快捷键：ctrl+/

2.标题标签

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

 效果展示：

 3.段落标签

<p>这是第一个段落：Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi consequatur ullam odio alias, quas praesentium saepe aliquid? Ipsum laudantium numquam sapiente, culpa quasi nobis, vero nam consequuntur sunt debitis id.</p>
    <p>这是第二个段落：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo doloremque distinctio id sint eum voluptas eaque rerum sapiente aperiam, veniam natus ut eius ex fugit. Commodi fugiat corporis voluptate id!</p>

效果展示：

 段落标签之间会有换行，并且有明显的段落间距

4.换行标签

<br/> （规范写法） 或者 <br>

 在html中，直接进行换行是没用的，包过制表符，输入多个空格，这些都只相当于一个空格

br是一个单标签，只有开始标签，没有结束标签

5.格式化标签

<strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

效果展示：

可以发现这些标签在同一行， 因此我们把这样的标签叫做“行内元素”。而独占一行的标签，叫做“块级元素”。

6.图像标签

    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.7baa601167fd720b757828767332d244?rik=Gd6NAso23GF50Q&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20201031ac%2f457%2fw640h617%2f20201031%2f53f7-kcieyvy9757951.jpg&ehk=oO6CdVdNFMTcf4fcLnJhM8T3HLxBmoKTXyZYdCWSh08%3d&risl=&pid=ImgRaw&r=0" alt="詹姆斯图像" width="300px" height="350px">

src中的路径可以是绝对路径，相对路径，网络路径，我这里是网上路径。alt是在图片显示失败的时候显示alt中的文字，提升图片是什么。width和height用来指定图片大小，px是像素。

效果展示：

 7.超文本链接

    <a href="http://www.csdn.com">csdn</a>

效果展示：点击之前是蓝色的，点击后是紫色的

8.表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

<table width="200px" height="250px" border="1px">
        <tr>
            <th>姓名</th>
            <th>id</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>350525110</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>350525120</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>350525119</td>
        </tr>
    </table>

其中border表示边框大小

效果图：

9.列表标签

有序列表 ol(ordered list)

无序列表ul(unordered list)

列表项 li(list item)

<ol>
        <li>刘备</li>
        <li>关羽</li>
        <li>张飞</li>
    </ol>

    <ul>
        <li>刘备</li>
        <li>关羽</li>
        <li>张飞</li>
    </ul>

效果图：

 10.表单标签

1.input标签

1.文本框：<input type="text">

2.密码框：<input type="password">

3.单选框：<input type="radio">

4.复选框：<input type="checkbox>

5.普通按钮：<input type="button">

6.提交按钮：<input type="submit">

7.选择文件：<input type="file">

<!-- 文本框 -->
    <input type="text">
    <br>
    <!-- 密码框 -->
    <input type="password">
    <br>
    <!-- radio单选框，checked默认选项 单选框必须要有相同的name属性才能实现多选1的效果-->
    <input type="radio" name="sex" id="male" checked="checked"> 男
    <input type="radio" name="sex" id="female"> 女
    <br>
    <!-- checkbox复选框 -->
    <input type="checkbox" name="action" > 吃饭
    <input type="checkbox" name="action"> 睡觉
    <input type="checkbox" name="action"> 打游戏
    <br>
    <!-- button普通按钮 -->
    <input type="button" value="按钮">
    <br>
    <!-- submit提交按钮 -->
    <input type="submit" value="提交按钮">
    <br>
    <!-- file选择文件 -->
    <input type="file" >

 效果图：

 2.lable标签

可以让对应的单选/复选框的范围变大，提升用户体验。

<input type="radio" name="sex" id="male" checked="checked"> <label for="male">男</label> 
    <input type="radio" name="sex" id="female"> <label for="female">女</label>

效果图：

有了lable标签，点击汉字也可以。

3.select标签，用于下来菜单。里面的每一个选项，是一个option标签

<select>
        <option>北京</option>
        <option selected="selected">上海</option> <!--默认选项-->
        <option>广州</option>
        <option>深圳</option>
    </select>

效果图：

4.textarea标签，多行文本框

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

 效果图：