1.0 HTML常用标签

像我这样的人112

已于 2022-04-29 18:01:28 修改

阅读量453

点赞数

分类专栏：前端学习笔记文章标签： html5

于 2022-04-29 17:58:32 首次发布

本文链接：https://blog.csdn.net/weixin_46073653/article/details/124501059

版权

前端学习笔记专栏收录该内容

54 篇文章 1 订阅

订阅专栏

文章目录

前言
一、HTML页面结构
二、标题标签
三、段落标签和换行标签
四、文本格式化标签
五、盒子标签
六、图像标签
七、超链接标签
- 锚点链接
八、列表标签
九、表单标签

前言

提示：写博客主要用于在学习前端的过程中遇到的一些问题及笔记：

例如：随着互联网的不断发展，前端学习这门技术也越来越重要，很多人都开启了学习前端学习，本文就介绍了前端学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML页面结构

标签	含义
`<!DOCTYPE>`	定义网站类型
`<html>…</html>`	定义HTML网站
`<title>…</title>`	定义网站的标题
`<body>…</body>`	网站的主体
`<!--...-->`	定义注释
`<link>`	网站与外部资源的关系
`<style>…</style>`	网站的样式信息
`<meta>`	HTML网站的元信息

二、标题标签

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题即
<h1> </h1> … <h6> </h6> 字号依次由大变小

三、段落标签和换行标签

段落标签：<p>...</p>
在HTML标签中，p标签用于定义段落，他可以将整改网页分为若干个段落
换行标签： <br>
在HTML中，一个段落中的文字会从左到右一次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用br标签

四、文本格式化标签

加粗： <strong>...</strong>或者<b>...</b>
倾斜：<em>...</em>或者<i>...</i>
删除线：<del>...</del>或者<s>...</s>
下划线：<ins>...</ins>或者<u>...</u>
通常用于HTML中文的样式的修改

五、盒子标签

<div></div>是大盒子，一行只能放一个大盒子
<span></span>是小盒子，一行可以放多个小盒子

div标签

span标签

六、图像标签

图像标签：<img src="xxxxxx" 属性2="xxxxxx">

属性	属性值	说明
*src	url	必须属性，用来确定图片的路径
alt	文本内容	图片不能显示时的文字提示
title	文本内容	鼠标移入图片时的显示文字
width	px	设置图像宽度
height	px	设置图像高度
border	px	设置图像边框

七、超链接标签

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

属性	属性值	说明
*href	url	用于指定链接目标的url地址,当为标签应用href属性时,他就具有了超链接的功能;如果href里边地址是一个文件或者压缩包,他会下载这个文件
	#	当href="#"则表示这是一个空链接，不会有任何跳转
target	_self	用于置顶链接页面打开方式，其中_self为默认值(在本窗口中打开)
	_blank	用于在新窗口中打开

锚点链接

<a href="#要跳转的元素的id"></a>
点击链接时，会跳转到置顶元素所在的位置。

八、列表标签

无序列表

<ul></ul> 定义无序列表，里面只能放 li 标签，其它标签不被允许，但可以在li中嵌套其他标签

属性	属性值	说明
type	disc	实心圆●(默认值)
	circle	空心圆○
	square	正方形■

有序列表

<ol></ol> 定义有序列表，里面只能放 li 标签，其它标签不被允许,但可以在li中嵌套其他标签

属性	属性值	说明
type	1	阿拉伯数字：1、2、3……(默认值)
	a	小写英文字母：a、b、c……
	A	大写英文字母：A、B、C……
	i	小写罗马数字：i、ii、iii……
	I	大写罗马数字：I、II、III……

<li></li> 有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签

自定义列表

<dl></dl> 定义自定义列表，里面只能包含 dt 和 dd 标签
<dt></dt> 定义自定义列表中的项目
<dd></dd> 描述自定义列表中的每一个项目

<dl>
    <dt>帮助中心</dt>
    	<dd>账户管理</dd>
    	<dd>购物指南</dd>
    	<dd>订单操作</dd>
    <dt>服务支持</dt>
    	<dd>售后政策</dd>
    	<dd>自助服务</dd>
    	<dd>相关下载</dd>
</dl>

九、表单标签

一般情况下一个表单由一个大的表单域构成，表单域里面又包含表单元素和提示信息。
<form></form> 表单域标签，表单域就是一个包含表单元素的区域

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

<input/> 输入表单元素
<lable></lable> 绑定一个表单元素，当点击 lable 标签内的文本时，会自动将焦点转到对应的表单元素上，lable 标签的 for属性 必须得与相关元素的 id属性 相同
<select></select> 下拉表单元素，用于定义一个下拉列表
<option></option> 下拉列表中的元素，定义***selected=“selected”***属性时，当前项为默认选中项
<textarea></textarea> 文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数

<input/> 标签的常用属性

属性	属性值	说明
type	见下表	用于设置标签的不同形式
name	自定义	定义input元素的名称
value	自定义	设置input元素的默认值
checked	checked	设置此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

<input/> 标签type属性值：

属性	属性值	说明
type	button	定义可点击按钮(无提交功能)
	submit	定义提交按钮，提交到action属性指定的地址
	reset	定义重置按钮，清除表单中的所有数据
	image	定义图像形式的提交按钮
	text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符
	radio	定义单选按钮，一组单选按钮的name属性值必须相同
	checkbox	定义复选框，一组复选框name属性必须相同
	password	定义密码字段，该字段中的字符被掩码
	file	定义输入字段和 “浏览” 按钮，供文件上传
	hidden	定义隐藏的输入字段