【前端】html常用标签介绍

打开VSCode

1.输入 ！+TAB(Enter)

<title> 是网页标题，可以进行修改

2.Ctrl+s 保存，并且刷新网页

3.注释  <!-- -->

4.在网页可以查看源代码，修改当前网页内容

5.快速生成注释  Ctrl+/   按一下出现，再按一下消失

---

6.标题标签：h1，h2，h3，h4，h5，h6

一共六个

数字越小，越大越粗，数字越大，越小越细

7.段落标签 ：p

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

lorem是用来生成随机字符串

8.换行标签：br

在html里面，直接进行换行是没用的，用<br>放在段尾进行换行

【br是单标签】

<p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur <br>
        adipisicing elit. Ipsa necessitatibus laboriosam debitis? <br>
        Et temporibus aut vitae facere, inventore, <br>
        voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>
    <p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus laboriosam debitis? Et temporibus aut vitae facere, inventore, voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>
    <p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus laboriosam debitis? Et temporibus aut vitae facere, inventore, voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>
    <p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus laboriosam debitis? Et temporibus aut vitae facere, inventore, voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>

9.格式化标签

加粗：strong / b

倾斜：em / i                                  

删除线：del / s

下划线：ins / u

以上不独占一行

独占一行的标签：块级元素

不独占一行的标签：行内元素

块级和行内之间可以转换

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

 10.图片标签：img

Img必须带有一共src属性，通过这个属性来指定你要显示的图片的路径

<img src="" alt="">

这个路径可以写绝对路径，相对路径（基准目录就是html所在目录），也可以写网络路径

atl调图片大小

atl=""height……

如果网图错误，调用网图的alt就是图片文字描述

也可以传动图gif

11.超链接：a

通过链接就可以找到另外一个资源

超链接的资源可来自外部网站

（1）网页之间的跳转

（2）点击图片，文字跳转

12.表格标签

这是一组标签

table标签：表示整个表格

tr：表示表格的一行

td：表示一个单元格

th：表示表格单元格，会居中加粗

给表格加上属性，才会好看

（1）width，height，border

（2）让文字水平居中，用CSS

<!-- 表格标签 -->
    <style>
        td{
            text-align: center;
        }
    </style>
    <table width="500px" height="300px" border="1px">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1101</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2202</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>3303</td>
        </tr>
    </table>

13.列表标签

有序列表：ol

无序列表：ul

列表项：li

li标签里面可以放其他元素

 <ol>
        <a href="http://www.baidu.com"><li>这是a链接文字</li></a>
        <li>烂番茄</li>
        <li>咬人猫</li>
        <li>东尼ok</li>
    </ol>
    <ul>
        <li>笠原君</li>
        <li>大漠</li>
        <li>张三</li>
        <a href="http://www.baidu.com"><li>这也是a链接文字</li></a>
    </ul>

14.表单标签：为了和用户交互

form标签：进行前后端交互，功能是构造一共HTTP请求

input标签

有很多形态

（1）”text“ 单行输入包

（2）”password“ 密码（查看密码，改type改成text）

（3）单选框 ”radio“

使用单选框，要设置相同的name属性，此时才会有互斥效果

扩大点击范围

checkd默认选中一个值

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

（4）复选框：checkbox（lable+checked）

  <input type="checkbox" name="action" id="eat"><label for="eat">吃饭</label>
    <input type="checkbox" name="action" id="sleep" checked="checked"><label for="sleep">睡觉</label>
    <input type="checkbox" name="action" id="play"><label for="play">打游戏</label>

 （5）botton设置按钮，submit提交按钮

 <!-- <input type="button" value="这是按钮" onclick="alert('hello')"> -->

    <!-- <input type="submit" value="提交"> -->

（6）file：选择文件

<!-- <input type="file" name="" id=""> -->

15.下拉菜单：select

里面的每一个选项是一个option

 <select>
        <option>北京</option>
        <option selected="selected">海南</option>
        <option>重庆</option>
        <option>云南</option>
    </select>

16.textarea 多行文本框

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

input只能写一行