【前端】html常用标签介绍

常用标签介绍"/>

【前端】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=""><li>这是a链接文字</li></a><li>烂番茄</li><li>咬人猫</li><li>东尼ok</li></ol><ul><li>笠原君</li><li>大漠</li><li>张三</li><a href=""><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只能写一行