【HTML+CSS】HTML常用标签

咕啾啾

已于 2022-03-09 12:56:32 修改

阅读量517

点赞数 1

分类专栏：前端文章标签： css html 前端 html5

于 2022-02-25 11:59:40 首次发布

本文链接：https://blog.csdn.net/qq_30148319/article/details/123127081

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

学习视频及知识点来源：https://www.bilibili.com/video/BV14J4114768?p=12&spm_id_from=pageDriver

一、标题标签<h1>-<h6>

标签语义：作为标题使用，并且依据重要性递减。
单词 head 的缩写，意为头部、标题。
特点：①加了标题的文字会变的加粗，字号也会依次变大。②一个标题独占一行。

<h1> 我是一级标题 </h1>

二、段落和换行标签

标签语义：可以把 HTML 文档分割为若干段落。
单词 paragraph [ ˈ pær ə græf] 的缩写，意为段落。
特点：① 文本在一个段落中会根据浏览器窗口的大小自动换行。②段落和段落之间保有空隙。

<p> 我是一个段落标签 </p>

三、文本格式化标签

标签语义 : 突出重要性, 比普通文字更重要。

语义	标签
加粗	<strong></strong>
倾斜	<em></em>
删除线	<del></del>
下划线	<ins></ins>

四、<div> 和<span>标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 这是头部 </div> 
<span> 今日价格 </span>

区别：

1、<div> 标签用来布局，但是现在一行只能放一个<div>。【大盒子】

2、<span> 标签用来布局，一行上可以多个 <span>。【小盒子】

五、图像标签和路径

1、图像标签

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

<img src="图像URL" />

2、图像标签其他属性

属性	属性值	说明
src	图片路径	必须具有的属性
alt	文本	替换文本 -> 当图片不能显示时显示的文字。
title	文本	提示文本 -> 鼠标放在图像上显示的文字。
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!-- 事例 -->
<body>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg"/>
    <h4>alt 替换文本(图像不能显示时出现的文字)的使用：</h4>
    <img src="img1.jpg" alt="This is an image."/>
    <h4>titlt 提示文本(鼠标放在图像上, 显示的文字)的使用：</h4>
    <img src="img.jpg" title="The image is ..."/>
    <h4>width 设置图像的宽度</h4>
    <img src="img.jpg" width="100" />
    <h4>width 设置图像的高度</h4>
    <img src="img.jpg" height="100" />
    <h4>border 设置图像的边框粗细</h4>
    <img src="img.jpg" border="10" />
</body>

3、路径

相对路径： 以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类	符号	说明
同级		<img src="img.jpg" />
下级	/	<img src="/images/img.jpg" />
上级	../	<img src="../img.jpg" />

绝对路径： 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

六、超链接标签

1、链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性	作用
href	用于指定链接目标的url地址。是必须属性。
target	用于指定链接页面的打开方式。_self为默认值（覆盖原页面），_blank为在新窗口打开的方式。

2、链接分类

外部链接：例如 < a href="http:// www.baidu.com "> 百度</a >。
内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
空链接：如果当时没有确定链接目标时，< a href="#"> 首页 </a >。
下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。

（1）在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> 第2集 </a> 。

（2）找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two">第2集介绍</h3>。

七、HTML 中的注释和特殊字符

1、注释

<!-- 注释语句 --> 快捷键: ctrl + /

2、特殊字符

特殊字符	描述	字符的代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt

八、表格标签

1、表格的相关标签

1.1 基本语法

<table> </table> 是用于定义表格的标签。
<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
<th> </th> 表示 HTML 表格的表头部分，表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示。

<table>
    <tr> 
        <th>表头单元格标签</th>   
    </tr>
    <tr> 
        <td>单元格内的文字</td>  
    </tr>
</table>

1.2 表格结构标签

<thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
```
<table>
<thead>
    <tr>   <th>表头单元格标签</th>   </tr>
</thead>
<tbody>
    <tr>   <td>单元格内的文字</td>   </tr>
</tbody>
</table>
```
<thead>一整行为表格的头部区域 th th th
<tbody>表格的主体区域 td td td
td td td

<thead>一整行为表格的头部区域	th	th	th
<tbody>表格的主体区域	td	td	td
td	td	td

2、表格的相关属性

属性名	属性值	描述
align	left / center / right	规定表格相对周围元素的对齐方式
border	1 / " "	规定表格单元是否拥有边框，默认为" "，表示没有边框。
cellpadding	像素值	规定单元格与内容的空白（也就是中间的内容到周围框框的距离），默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。（如果想要只有线没有间距，就设置为0。）
width	像素值或百分比	规定表格的宽度。

3、合并单元格

3.1 基础语法

跨行合并：rowspan="合并单元格的个数" 。
跨列合并：colspan="合并单元格的个数"。

3.2 过程

先确定是跨行还是跨列合并。括号里为目标单元格。

	跨列（左）
跨行（上）
跨行（上）

找到目标单元格。写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
删除多余的单元格。

九、列表标签

1、无序列表

标签名	记忆	定义	说明
<ul></ul>	Unordered List	无序标签	<ul></ul> 中只能嵌套 <li></li>
<li></li>	List	列表项	<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

2、有序列表

标签名	记忆	定义	说明
<ol></ol>	Ordered List	有序标签	<ol></ol>中只能嵌套<li></li>
<li></li>	List	列表项	<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

3、自定义列表

标签名	记忆	定义	说明
<dl></dl>	Definition List	自定义列表	<dl></dl> 里面只能包含 <dt> 和 <dd>
<dt></dt>	Definition Title	定义项目名	<dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>
<dd></dd>	Definition Description	描述每个项目	<dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

十、表单标签

1、基础知识

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3个部分构成。 表单域 是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。

语法如下：

<!-- <form> 会把它范围内的表单元素信息提交给服务器 -->
<form action=“url地址” method=“提交方式” name=“表单域名称">
    各种表单元素控件
</form>

常用属性值如下：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get / post	用于设置表单数据的提交方式。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

2、表单控件（表单元素）

2.1 input 输入表单元素

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input /> 标签为单标签。

type 属性设置不同的属性值用来指定不同的控件类型。

属性值	描述
button	定义可点击按钮（通过JS启动脚本）。
checkbox	定义复选框。
file	提供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段，该字段中的字符被掩码（*）。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务端。
text	定义单行的输入字段，可输入文本，默认宽20字符。

<input>标签的其他属性。

属性	属性值	描述
name	自定义	定义input元素的名称。单选按钮和复选框要有相同的name值。
value	自定义	规定input元素的值。
checked	checked	checked属性主要针对于单选按钮和复选框, 主要作用一打开页面，就要可以默认选中某个表单元素。
maxlength	正整数	规定输入字段中的字符的最大长度。

一些注意点！

<form>
    <!-- 关于name与value的不同 -->
    性别: <input type="radio" name="sex" value="男"/>  男 
          <input type="radio" name="sex" value="女"/>  女 
</form>

<!-- <label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。 -->

<form>
    <!-- <label>标签的第一种用法: -->
    <label> 用户名： <input type="text" /> </label> <br />

    <!-- <label>标签的第二种用法: -->
    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex" />
      
</form>

2.2 select下拉表单元素

我们可以使用 <select> 标签控件定义下拉列表。
<select> 中至少包含一对<option> 。
在<option> 中定义 selected ="selected " 时，当前项即为默认选中项。

基本语法：

<select>
 <option>选项1</option>
 <option>选项2</option>
 ...
</select>

2.3 textarea 文本域元素

<textarea> 标签是用于定义多行文本输入的控件。
cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

基本语法：

<textarea rows="3" cols="20">
    文本内容
</textarea>

咕啾啾

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS】HTML常用标签

一、标题标签<h1>-<h6> 标签语义：作为标题使用，并且依据重要性递减。单词 head 的缩写，意为头部、标题。特点：①加了标题的文字会变的加粗，字号也会依次变大。②一个标题独占一行。 <h1> 我是一级标题 </h1>二、段落和换行标签标签语义：可以把 HTML 文档分割为若干段落。单词 paragraph [ˈpærəgræf] 的缩写，意为段落。特点：①文本在一个段落中会根据
复制链接

扫一扫