HTML HTML5基础教程_笔记

HTML简介

head部分

HTML 是用来描述网页的一种语言。指的是超文本标记语言: HyperText Markup Language。

他不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)。使用标记标签来描述网页。文档包含了HTML 标签及文本内容。文档也叫做 web 页面

这是HTML中的常规模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSDN博客</title>
</head>
<body>
    //一般在这里编写web内容
</body>
</html>

<head>元素

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

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

<title> 元素

<title> 标签在<head>标签内，它定义了不同文档的标题。在 HTML/XHTML 文档中是必需的。

<title> 元素:

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

<base> 元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="http://www.runoob.com/images/" target=" blank">
    <title>CSDN博客</title>
</head>

<link> 元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>CSDN博客</title>
</head>

<style> 元素

<div>标签为一个块级元素，像一个盒子一样，可以为他设置他的宽（width:）（px为单位）、高（height：）和背景颜色（ background-color:）

<body>
    <div class="div"></div>
    <style>
        .div{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</body>

<meta> 元素

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

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

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

<head>
    <meta charset="UTF-8">
    <!-- 为引擎定义关键词 -->
    <meta name="keywords" content="HTML, CSS,XML,XHTML, Javascript">
    <!-- 为网页定义描述内容 -->
    <meta name="description" content="免费 Web & 编程 教程">
    <!-- 定义网页作者 -->
    <meta name="author" content="Runoob">
    <!-- 每30秒刷新当前页面 -->
    <meta http-equiv="refresh" content="30">
    <title>CSDN博客</title>
</head>

<script> 元素

<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<body>
    <script>
        document.write("Hello World!")
    </script>
   <noscript>抱歉，你的浏览器不支持Javascript！</noscript>
   <p>不支持的浏览器会使用&lt;noscript&gt;a元素中定义的内容（文本）来替代。</p>

</body>

body部分

HTMl标题

<h1>-<h6>为标题标签，h1-h6字体逐渐变小

<body>
   <h1>这是标题1</h1>
   <h2>这是标题2</h2>
   <h3>这是标题3</h3>
   <h4>这是标题4</h4>
   <h5>这是标题5</h5>
   <h6>这是标题6</h6>
</body>

运行结果

HTMl链接

链接用<a></a>表示，内容在<a></a>中间写

语法为<a href=” ”　>这是一个链接<a/>

<body>
    <a href="https://blog.csdn.net/2202_75717477?spm=1010.2135.3001.5421">那天的主页</a>
</body>

点击前

点击后

HTML锚点链接

锚点链接是超链接的一种，形式和超链接并不相同，利用锚点链接主要就是为了在一个页面中更加方便的跳转到某个位置。使用的场景就是在一个过长的页面中方便用户能够跳转到自己想去的相应位置，（就像返回顶部按钮一样）

跳转到当前页面的指定位置

（１）设置一个锚点链接我是锚点一；（注意：href属性的属性值最前面要加#）

（２）在页面中需要的位置设置锚点我是锚点一；（注意：a标签中要写一个name属性，属性值要与[1]中的href的属性值一样，不加#）标签中按需填写相应的文字，一般不写内容。

<body>
 <a href="#mao">找到锚点一</a>
 <p>1</p>
  ．．．<!-- 添加多个P标签以分离两个标签 -->
 <p>1</p>
 <a href="#" name="mao">我是锚点一</a>

</body>

点击前

点击后

利用锚点链接还可以跳转到其他页面

HTML链接－下载链接

如果希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。

<body>
    <a href="document.pdf" download>下载文档</a>
</body>

HTMl链接－ target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

<body>
    <a href="https://blog.csdn.net/2202_75717477?spm=1010.2135.3001.5421" target="_blank">下载文档</a>
</body>

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

HTML 图像-Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

<body>
    <img src="./11.png" alt="月球">
</body>

图片正常显示

图片无法显示的情况下

HTML 图像标签

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML水平线

水平线<hr />

<body>
    <h1>HTML</h1>
    <p>HTML 是用于描述 web 页面的一种语言。</p>

    <hr/>

    <h1>CSS</h1>
    <p>CSS 定义如何显示 HTML 元素。</p>
</body>

HTML注释

注释不会运行

<body>
    <!-- 这是一个注释，在浏览器中不会运行 -->
 <p>这是一个段落</p>
</body>

运行结果

元素

HTML列表

HTML文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML 支持有序、无序和定义列表:

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<body>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
</body>

浏览器显示如下

HTML有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<body>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
</body>

浏览器显示如下

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<body>
    <dl>
        <dt>Coffee</dt>
        <dd>-bleck hot drink</dd>
        <dt>Milk</dt>
        <dd>-white cold drink</dd>
    </dl>
</body>

浏览器显示如下

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML <div> 和<span>

HTML 可以通过 <div> 和 <span>将元素组合起来

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table>

<div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span>元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 表单和输入

HTML 表单用于收集用户的输入信息。表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的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>

运行结果：

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签 <input>。

输入类型是由 type 属性定义。

接下来我们介绍几种常用的输入类型：

文本域（Text Fields）（１）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<body>
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</body>

运行结果：

注意: 表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

文本域（Textarea）（２）

创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

<body>
    <textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
</body>

运行结果：

密码字段（password）

密码字段通过标签 <input type="password"> 来定义:

<body>
    Password:<input type="password" name="pwd">
</body>

浏览器显示如下：

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项:

<body>
 <input type="radio" name="sex" value="male">男<br>
 <input type="radio" name="sex" value="female">女
</body>

浏览器显示效果如下：

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。

复选框可以选取一个或多个选项：

<body>
 <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
 <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</body>

浏览器显示效果如下：

提交按钮(Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

<body>
    Username：　<input type="text" name="user">
<input type="submit" value="Submit">
</body>

浏览器运行结果：

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

创建按钮

创建按钮。可以对按钮上的文字进行自定义。

<body>
    　<input type="button" name="Hello wrold!">
</body>

简单的下拉列表

selected是预选的标识符

<body>
    <select name="cars">
        　<option value="Volvo">Volvo</option>
        　<option value="saab">saab</option>
        　<option value="fiat" selected>Fiat</option>
        　<option value="audi">Audi</option>
    </select>
</body>

浏览器运行结果：

没加 selected时

加了 selected时

HTML表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

下部分内容．．．稍后更新