【前端】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只能写一行