html基础知识

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="替代文本">。它有两个必需的属性:srcaltsrc属性指定了图片的地址,而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方法,可以是getpostget方法将数据作为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)空格:&nbsp : 这个HTML实体代表一个空格,并且会显示为一个空格,即使在浏览器通常会忽略连续空格的情况下。

(9)布局标签<div>:大盒子,独占一行。<span>小盒子,一行可放多个。

  • 31
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值