HTML基础学习总结

最新推荐文章于 2022-11-01 16:21:33 发布

rotation ㅤ

最新推荐文章于 2022-11-01 16:21:33 发布

阅读量3.1k

点赞数 6

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/fengxinlinux/article/details/77899500

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1>与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

HTML标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
例如：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。
例：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。
例：

<a href="https://blog.csdn.net/fengxinlinux/">This is a link</a>

在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。
例：

<img src="w3school.jpg" width="104" height="142" />

HTML 元素

HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 实例解释

<p> 元素：

<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。

<body> 元素：

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。

空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML属性

属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定。

属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.w3school.com.cn">This is a link</a>

始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的

在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML图像

图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。

HTML表单

HTML 表单用于搜集不同类型的用户输入。
<form> 元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单：
实例

<form>
 
form elements
 
</form>

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。

类型	描述
text	定义常规文本输入。
radio	定义单选按钮的输入。
submit	定义提交按钮（提交表单）。

文本输入
<input type="text"> 定义用于文本输入的单行输入字段：

例如：

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

单选按钮输入

<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
例如：

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

其中加上checked的标签按钮为默认选择

提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定：
例如：

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：

例如：

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

HTML 表单元素

<input> 元素
最重要的表单元素是 <input> 元素。
<input> 元素根据不同的 type 属性，可以变化为多种形态。

<select> 元素（下拉列表）
<select> 元素定义下拉列表：
例如：

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

列表通常会把首个选项显示为被选选项。
能够通过添加 selected 属性来定义预定义选项。

例如：

<option value="fiat" selected>Fiat</option>

<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）：
例如：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button>元素
<button> 元素定义可点击的按钮：
例如：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML输入类型

输入类型：text
<input type="text"> 定义供文本输入的单行输入字段：

例如：

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

输入类型：password
定义密码字段：
例如：

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

HTML块

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

<div>元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<span>元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 头部元素

文档标题：<title> 标题定义文档的标题。
所有链接一个目标：如何使用 base 标签使页面中的所有标签在新窗口中打开。
文档描述：使用 <meta> 元素来描述文档。
文档关键词：使用 <meta> 元素来定义文档的关键词。
重定向用户：如何把用户重定向到新的网址。

<head>元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>元素
<title> 标签定义文档的标题。
title 元素在所有 HTML文档中都是必需的。

title 元素能够：

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

<base>元素
所有浏览器都支持，为页面上的所有链接规定默认地址或目标，设置了base url之后，浏览器会使用基地址url来填充
所有的相对url，包括的标签有a , link ,img ,form.
href :规定页面中所有相对链接的基准url
target:在何处打开页面中的所有链接: _blank:新页面， _self：当前页面

<link>元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<style>元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta>元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

<script>元素
<script> 标签用于定义客户端脚本，比如 JavaScript。

URL 字符编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

文档类型声明

<!DOCTYPE> 声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

常用的声明：
HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

rotation ㅤ

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习总结

什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTM
复制链接

扫一扫