(一) 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设置

标签使用方式多样化,要灵活多变的运用,而不是死板的记忆

posted @ 2021-04-08 20:15  只猫  阅读(215)  评论(0编辑  收藏  举报