(一) html常用标签
记录前端学习过程,方便查漏补缺,如有错误,请评论告知~
一、标题
语义 | 标签 | 说明 |
标题 | <h1> | h1 ~h6 |
二、段落
段落 |
<p> |
三、换行、水平线
换行 | <br /> | 自闭合标签 |
水平线 | <hr> | 创建一条宽度撑满父元素的水平线 |
四、文本格式化标签
加粗 | <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设置
标签使用方式多样化,要灵活多变的运用,而不是死板的记忆