第二节：HTML简介-CSDN博客

本文链接：https://blog.csdn.net/weixin_73190941/article/details/139307521

第二节：HTML

HTML概念

超文本标记语言

HTML标签

标题：<h1>这是一个标题</h1> 其中的数字表示几级标题，最多至6级

段落：<p>这是一个段落。</p>

链接：<a href="https://serein.club">这是一个链接</a>

图像：<img src="/images/logo.png" width="258" height="39" /> 三个属性分别对应地址，高，宽

换行：<br></br>

添加水平线：<hr>

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容

例如：

<!DOCTYPE html>
<html>
  <body>
    <p>这是第一个段落。</p>
  </body>
</html>

元素简述：

<html>...</html>
<body>...</body>
<p>...</p>

HTML属性

例如：<a href="http://www.runoob.com">这是一个链接</a> 其中的href="http://www.runoob.com" 就是一个属性，href为关键词,内容用双引号括起来

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML头

HTML `<head>` 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML `<title>` 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML `<base>` 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

HTML `<link>` 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

HTML `<style>` 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档

HTML `<meta>` 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

HTML 表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<form action="/" method="post">
  <!-- 文本输入框 -->
  <label for="name">用户名:</label>
  <input type="text" id="name" name="name" required /> <br />
  <!-- 密码输入框 -->
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required /> <br />
  <!-- 单选按钮 -->
  <label>性别:</label>
  <input type="radio" id="male" name="gender" value="male" checked />
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female" />
  <label for="female">女</label> <br />
  <!-- 复选框 -->
  <input type="checkbox" id="subscribe" name="subscribe" checked />
  <label for="subscribe">订阅推送信息</label> <br />
  <!-- 下拉列表 -->
  <label for="country">国家:</label>
  <select id="country" name="country">
    <option value="cn">CN</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select>
  <br />
  <!-- 提交按钮 -->
  <input type="submit" value="提交" />
</form>