HTML简要解析
发布于2021-05-30 07:15 阅读(1033) 评论(0) 点赞(5) 收藏(0)
HTML基础
标签
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML 水平线
<hr />标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
HTML 段落
段落是通过<p> 标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br />标签：
<p>This is<br />a para<br />graph with line breaks</p>
<br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML 引用
HTML 元素定义短的引用。
浏览器通常会为 元素包围引号。
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
HTML
元素定义被引用的节。
浏览器通常会对
元素进行 缩进处理。
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
HTML 链接
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
target属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
name属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
HTML 图像
在 HTML 中，图像由 标签定义。
是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />
URL 指存储图像的位置。
alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
HTML 表格
表格由
标签来定义。每个表格均有若干行（ 由 标签定义），每行被分割为若干单元格（ 由| 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格边框
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格空单元格
在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML 列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于
- 标签。每个列表项始于
- 。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以
-
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
- 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML 块元素
<div>
HTML
文档中的一个部分会显示为绿色：
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<span>
HTML 元素是内联元素，可用作文本的容器。一般用于行内元素组合使用。
<p><span>some text.</span>some other text.</p>
样式
这里仅对常用的HTML样式讨论，其余样式倾向于使用CSS实现。
HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
HTML 样式实例 - 文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
属性
HTML id 属性
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
下面的例子中我们有一个 <h1> 元素，它指向 id 名称 “myHeader”。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
通过 ID 和链接实现 HTML 书签
首先，用 id 属性创建书签：
<h2 id="C4">第四章</h2>
然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：
<a href="#C4">跳转到第四章</a>
或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：
<a href="html_demo.html#C4">Jump to Chapter 4</a>
在 JavaScript 中使用 id 属性
JavaScript 也可以使用 id 属性为特定元素执行某些任务。
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素：
使用 id 属性通过 JavaScript 来处理文本：
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
HTML class 属性
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* 设置类名为 "city" 的所有元素的样式 */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>
<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
HTML表单
元素
元素是最重要的表单元素。 元素有很多形态，根据不同的 type 属性。
这是本章中使用的类型（type）：
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
属性
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">
什么时候用GET？什么时候用POST？
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
如果表单正在更新数据，或者包含敏感信息（例如密码）。
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>
组合表单数据
元素组合表单中的相关数据
元素为 元素定义标题。
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
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"></fieldset>
</form>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16EiQYqa-1622208833890)(D:\OneDrive空间\OneDrive - Rain\Tupora\HTML\image-20210528104300700.png)]
Target 属性
target 属性规定提交表单后在何处显示响应。
| 值 | 描述 |
|---|---|
| _blank | 响应显示在新窗口或选项卡中。 |
| _self | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| framename | 响应显示在命名的 iframe 中。 |
默认值为 _self，这意味着响应将在当前窗口中打开。
此处，提交的结果将在新的浏览器标签中打开：
<form action="/action_page.php" target="_blank">
元素
select元素（下拉列表）
元素定义下拉列表：
<form action="/demo/demo_form.asp">
<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>
<br><br>
<input type="submit">
</form>
可以通过添加 selected 属性来定义预定义选项。
textarea元素（文本域）
元素定义多行输入字段（文本域）：
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
button元素（按钮）
元素定义可点击的按钮：
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
以上 HTML 代码在浏览器中显示为：
Click Me!，且点击后会弹出弹窗Hello World!。
HTML5 的datalist元素
元素为 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
元素的 list 属性必须引用 元素的 id 属性。
通过 设置预定义值的 元素：
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
输入类型
输入类型：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>
**注释：**password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
输入类型：submit
定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）：
<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"><--按钮上显示Submit-->
</form>
输入类型：radio
定义单选按钮。
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
输入类型：checkbox
定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
HTML5 输入类型
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
**注释：**老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
输入属性
value 属性
value 属性规定输入字段的初始值：
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
readonly 属性
readonly 属性规定输入字段为只读（不能修改）：
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
readonly 属性不需要值。它等同于 readonly=“readonly”。
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
size 属性
size 属性规定输入字段的尺寸（以字符计）：
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
maxlength 属性
maxlength 属性规定输入字段允许的最大长度：
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈 。如果需要提醒用户，则必须编写 JavaScript 代码。
**注释：**输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。
原文链接:https://blog.csdn.net/zz_smallred/article/details/117374742
所属网站分类: 技术文章 > 博客
作者：Bhbvhbbgg
链接：http://www.qianduanheidong.com/blog/article/115778/fa7eef59184d40b52607/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力