常用标签介绍"/>
【前端】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只能写一行
更多推荐
【前端】html常用标签介绍
发布评论