首页 / HTML / HTML基础——1、常用标签
HTML基础——1、常用标签
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML基础——1、常用标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3314字，纯文字阅读大概需要5分钟。
内容图文
记录前端学习过程，如有错误，请评论告知~
一、标题
| 语义 | 标签 | 说明 |
| 标题 | <h1> | h1 ~h6 |
二、段落
| 段落 | <p> |
三、换行
| 换行 | <br /> | 自闭合标签 |
四、文本格式化标签
| 加粗 | <strong> / <b> | 推荐使用<strong>语义更强烈 |
| 倾斜 | <em> / <i> | 推荐使用<em> |
| 删除线 | <del> / <s> | 推荐使用<del> |
| 下划线 | <ins> / <u> | 推荐使用<ins> |
| 上标 | <sup> | |
| 下标 | <sub> | |
| 水平线 | <hr /> | 自闭合标签 |
五、图片
| 图片 | <img src="URL" /> | 自闭合标签，src是<img>标签的必须属性，用于指定图像的路径或文件名 |
// 示例 <img src="/素材/imgs/1.ico" title="这是一个头像" alt="加载失败">
alt属性：有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本
title属性：鼠标放在图片上时显示的内容
六、超链接
| 跳转 | <a href="url" target="打开方式">文本</a> | target：目标url打开方式，默认在当前窗口打开；_blank：在新窗口中打开 |
| 锚点 | <a href="#name-id"></a> <p id="name-id"></p> | href的值设置为 #id名，id名要与目标元素的id值一致 |
七、盒子标签(布局)
| <div> | 独占一行，块元素 |
| <span> | 可以多个放在同一行，行内元素 |
八、表格
| 表格 | <table> |
| 行 | <tr> |
| 表头 | <th> |
| 单元格 | <td> |
| 表格语义化标签：thead、tbody、tfoot | |
合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并单元格三部曲：1.确定跨行还是跨列；2.找到目标单元格，写合并代码,如<td colspan="2"><td>；3.删除多余的单元格
九、列表
1、无序列表 ——> <ul> 标签中只放<li>标签，但是<li>标签中可以放其他标签
2、有序列表 ——> <ol> 同上
<ul>和<ol>标签只用于定义有序/无序列表，而列表使用<li>定义
type属性（一般使用css设置：list-style-type属性）：
3、自定义列表 ——> <dl>标签，与<dt>（项目名称）和<dd>（描述项目/子列表）一起使用
// 基本语法
<dl>
<dt>名词</dt>
<dd>名词1解释1</dd>
<dd>名词2解释2</dd>
</dl>
十、表单
在html中，一个完整的表单通常由：表单域、表单控件(表单元素)和提示信息组成
1、表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它返回内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
属性说明
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method |
get/post |
用于设置表单数据的提交方式，get或post提交 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的不同表单域 |
2、表单元素：大多是由input标签（自闭合标签）实现的
其中type属性的取值如下：
除type属性外，input标签还有其他属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
| name | 用户自定义 | 定义input元素的名称 |
| value | 用户自定义 | 表单被提交时发送到服务器的值 |
| checked | 规定选框是都默认选中 | |
| maxlength | 正整数 | 规定输入字段中字符的最大数 |
1. name和value是每个表单元素都有的属性值，主要给后台人员使用
2. 对于同组的radio和checkbox，name要设置成相同值
3. checked属性主要针对radio和checkbox
3、<label>标签为 input 元素定义标注
<label> 标签可用于绑定一个表单元素，当点击<label>标签内的内容时，浏览器就会自动将焦点转到或选择对应的表单元素上，用来增加用户体验
// 语法
<label for="man">男
<input id="man" type="radio" name="sex" >
</label>
<label>标签的 for 属性值应当与相关元素的id属性值相同
4、<select>表单元素：定义下拉列表
<select>
<option >11111</option>
// selected 属性表示当前项为默认选中的项
<option selected>2222222</option>
<option >33333333</option>
</select>
5、<textarea>表单元素：多行文本输入控件
使用场景：留言板、评论等
// 语法
<textarea cols="30" rows="10">
</textarea>
说明：cols：每行输入的字符数；rows：显示的行数。实际开发中一般使用css设置
标签使用方式多样化，要灵活多变的运用，而不是死板的记忆
内容总结
以上是互联网集市为您收集整理的HTML基础——1、常用标签全部内容，希望文章能够帮你解决HTML基础——1、常用标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。