这些HTML标签你知道吗？
HTML (英文缩写：Hyper text Markup Languag）：是一种超文本标记语言，不属于编程语言，这个概念不要混淆哦~
两种标签形式：
- 双标签：<标签名></标签名>
- 单标签：<标签名/>
元素和属性：
- <标签名 属性=" 属性值 ">元素</标签名>
- <标签名 属性= " 属性值 " />
代码结构：
!DOCTYPE html>
<html lang="en">
<head>
<!--这是注释方式-->
<!--head标签里面的内容不会显示在网页上-->
<meta charset="utf-8"> <!--网页编码方式-->
<title>网页标题</title>
</head>
<body>
<!--body标签里面的元素内容会显示在网页上-->
</body>
</html>常用标签的使用
段落标签：<p></p>
水平线标签：<hr/>
换行标签：<br/>
标题标签：分为 6 种，从 h1~h6，每种标题的大小依次减小 <h1>一级标题h1</h1> <h2>二级标题h2</h2> <h3>三级标题h3</h3> <h4>四级标题h4</h4> <h5>五级标题h5</h5> <h6>六级标题h6</h6>
链接标签：<a></a>
该标签包含以下属性和对应的属性值：
- href ：超链接地址
- target = "_self " ：本窗口访问（默认）
- target = " _blank " ：新窗口访问
图片标签：<img>
该标签包含以下属性和对应的属性值：
- src = " 图片地址 "
- alt = " 图片加载异常时用于提示图片信息的文字 "
列表标签：
包含有序列表 <ol></ol> and 无序列表 <ul></ul>，列表项由<li></li>显示，其中有序列表的列表项以数字开头，无序列表的列表项以黑圆圈开头
<ul>
<li>有序内容1</li>
<li>有序内容2</li>
</ul>
<ol>
<li>无序内容1</li>
<li>无序内容2</li>
</ol>表格标签：<table></table>
- border = " 像素值 " ，设置边框大小
- width = " 像素值 " ，设置表格的宽度
- <tr></tr> ，代表表格中的行
- <th></th> ，代表表格中的表头（第一行）
- <td></td> ，代表表格中的列
<table border="1px" width="300px">
<tr>
<th>第一列表头</th>
<th>第二列表头</th>
</tr>
<tr>
<td>普通列</td>
<td>普通列</td>
</tr>
</table>表单标签：<form></form>
常用于提交表单信息，比如登录信息等
- action = " 表单提交后的跳转地址"
- method = " 请求方式（post / get(默认)）"
- enctype = " multipart/form-data "，当表单中需要提交文件时需写入
- <input>标签
- type = " text" ，填写文本
- type = " password "，填写密码
- type = " radio "，单选框
- type = " checkbox "，多选框
- type = " file "，上传文件
- type = " button "，按钮
- type = " submit "，提交表单
- type = " reset "，重置表单
<form action="跳转路径" method="post/get",enctype="multipart/form-data">
用户名：
<input type="text" name="username">
密码：
<input type="password" name="password" value="">
单选框：
男<input type="radio" name="sex" value="0">
女<input type="radio" name="sex" value="1">
复选框：
篮球<input type="checkbox" name="hobby" value="web">
游泳<input type="checkbox" name="hobby" value="spider">
上传文件：
<input type="file" name="file">
按钮：
<input type="button" value="按钮">
提交表单：
<input type="submit" value="提交按钮">
重置
<input type="reset" value="重置按钮">
</form>- 下拉框标签：<select></select>
- 文本框标签：<textarea></textarea>
<select name="学历">
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
<textarea name="comment" cols="40" rows="20"></textarea>常见的无意义标签：
- <div></div>相当于一个容器，占用整行，会自动换行
- <span></span>不占用整行，其长度由内部元素的长度决定，不会自动换行
特殊符号：
- 空格：
- 大于：>
- 小于：<
大家可以通过本文快速入门HTML,但可能不会用，所以之后我会发些实战给大家参考
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-08-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读