1.标签
单标签<标签名> Eg: <html>
双标签<标签名></标签名> Eg: <b>内容</b>
属性标签<属性格式 属性名="属性值"></属性格式>Eg:<a href="www.baidu.com">文本</a>
2.注释:
定义:HTML注释是用于在HTML代码中添加说明或隐藏信息的一种方法,它不会影响网页的显示效果,但可以帮助开发者理解和维护代码。
作用:
- 提高可读性:通过注释,可以对代码的功能、结构或者设计意图进行说明,使得其他开发人员或未来的自己更容易理解代码的目的和逻辑。
- 方便调试:在测试和开发阶段,注释可以用来临时禁用某些代码块,以检查代码运行效果或进行故障排除。
- 记录修改历史:在注释中记录修改的时间、作者以及修改原因,有助于追踪代码的变更历史。
- 保护敏感信息:将敏感信息如密码、API密钥等置于注释中,可避免这些信息直接暴露在源代码中,减少安全风险。
使用方法:
- 单行注释:在HTML文件中,按下Ctrl+/可以插入或移除单行注释。
- 多行注释:如果你想要注释多行代码,可以使用Ctrl+Shift+/来包裹选中的多行文本。
3.常用标签
(1)标题标签: 用于定义网页中的标题,从<h1>
到<h6>
共六个级别,其中<h1>
最重要,字号也最大。
(2)段落标签: 段落标签<p>
用于定义网页中的一个段落。浏览器会在段落的前后自动添加空行,以区分不同的段落。
(3)超链接标签:
- 基本语法:超链接的基本语法格式为
<a href="跳转目标链接" target="目标窗口的弹出方式">文本或图像</a>
。其中,href
属性指示链接的目标地址;而target
属性则决定了链接打开的方式,比如_blank
表示在新窗口或新标签页中打开链接,而_self(默认)
则表示在当前窗口或标签页中打开链接。
(4)图像标签:
- 基本语法:
<img src="图片地址" title="光标悬停显示文字" alt="替代文本">
。它有两个必需的属性:src
和alt
。src
属性指定了图片的地址,而alt
属性提供了当图片无法显示时的替代文本。 - Width和Height属性:虽然这两个属性不是必需的,但建议总是设置这两个属性。它们分别指定了图像的宽度和高度。设置这些属性可以帮助浏览器预留出图像的空间,避免页面在加载图像时出现跳动或重排。
(5)列表标签: 包括无序列表<ul>
、有序列表<ol>
和列表项<li>
,用于创建列表。
无序列表(Unordered List):
- 无序列表使用
<ul>
标签创建,它适用于那些条目之间没有顺序关系的情况,比如列出一些蔬菜的名称或者一些著名的历史人物。 - 每个列表项(List Item)使用
<li>
标签定义,它是"list item"的缩写。一个<ul>
标签可以包含多个<li>
标签,每个<li>
标签代表列表中的一个条目。 - 无序列表在网页中的应用非常广泛,例如新闻列表、商品列表、导航条等。
有序列表(Ordered List):
- 有序列表使用
<ol>
标签创建,它适用于需要按照特定顺序排列的条目,如步骤指南、排名榜单等。 - 同样地,每个列表项也使用
<li>
标签定义。有序列表中的<li>
标签会有一个自动编号,可以是数字或者字母,取决于浏览器的默认设置或CSS的定义。
(6)表单标签: HTML中的<form>
标签用于创建网页上的表单,它允许用户输入数据并提交到服务器。
- action 属性:这个属性定义了当表单提交时数据发送到的URL。如果没有指定
action
属性,表单数据将发送到当前页面的URL。例如,<form action="/action_page.php">
会将数据发送到服务器上的"action_page.php"页面。 - method 属性:这个属性指定了提交表单数据时要使用的HTTP方法,可以是
get
或post
。get
方法将数据作为URL的一部分发送,而post
方法将数据包含在请求的主体中。如果没有指定method
属性,默认的HTTP方法是get
。
GET方法是默认的提交方式,它将表单数据附加在URL之后,以查询字符串的形式发送。这种方式有几个特点:
- 数据会显示在浏览器的地址栏中,因此不适合发送敏感信息。
- GET请求可以被缓存和保存在浏览器历史记录中,也可以被收藏为书签。
- 由于浏览器对URL长度有限制,通常为3000个字符左右,因此GET方法提交的数据量有限。
POST方法则将数据放在HTTP请求的主体中发送,不会显示在URL上,适合发送大量数据或敏感信息,如密码等。它的特点包括:
- 数据不会显示在地址栏中,相比GET方法更具隐蔽性。
- 没有数据大小的限制,适合上传大文件。
- POST请求不会保留在浏览器历史记录中,也不容易被缓存。
如果需要提交的数据量小且不包含敏感信息,可以选择GET方法;如果需要提交大量数据或敏感信息,应使用POST方法。
常用的表单元素:
(1)输入框(Input fields):使用<input>
标签创建,可以是文本字段、密码字段、单选按钮、复选框等。
- 文本输入:使用
type="text"
,定义单行文本输入框,用于输入简短的文本信息。 - 密码输入:使用
type="password"
,定义密码字段,用于输入密码,输入的内容会以圆点或星号显示,以隐藏实际输入的字符。 - 文件上传:使用
type="file"
,定义文件上传控件,允许用户选择本地文件上传到服务器。 - 单选按钮:使用
type="radio"
,定义单选按钮,通常用于多个选项中选择一个的场景。单选按钮允许用户在一组选项中选择一个,并且只能选择一个。为了实现这一点,同一组内的单选按钮通常需要具有相同的name
属性值。这样,浏览器就知道这些按钮是一组的,用户只能从中选择一个。
Eg:
<p>请选择您的性别:</p>
<input type="radio" name="gender" />男
<input type="radio" name="gender" />男
- 复选框:使用
type="checkbox"
,定义复选框,用于在多个独立选项中选择多个。 - 按钮:使用
type="button"
,定义一个简单的按钮,通常用于执行某些JavaScript函数。 - 提交按钮:使用
type="submit"
,定义一个提交按钮,用于提交表单数据到服务器。 - 重置按钮:使用
type="reset"
,定义一个重置按钮,用于清除表单中的所有数据
(7)换行:<br>
标签: 用于在HTML中创建一个换行。这是一个空标签,没有结束标签,它在文本中插入一个换行。
(8)空格: 
: 这个HTML实体代表一个空格,并且会显示为一个空格,即使在浏览器通常会忽略连续空格的情况下。
(9)布局标签:<div>
:大盒子,独占一行。<span>小盒子,一行可放多个。