标签：HTML 元素基础知识 html 文档标题梳理定义

HTML基础教程

　　　　超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。且.html与.htm文件类型相同，并无区别。

HTML的基础格式样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>博客园(cnblogs.com)</title>
 6 </head>
 7 <body>
 8 
 9 <h1>标题测试</h1>
10 <p>段落测试</p>
11 
12 </body>
13 </html>

<!DOCTYPE html> 声明是html文件
<html>文件是html页面的根目录
<head>元素包含了文档的元数据，例子如上述所示
<title>描述了标题
<body>元素包含了可见的页面内容
<h1>元素定义了大标题
<p>元素定义了一个段落

　　　　下面是一个简单的HTML的实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>
 6 页面标题</title>
 7 </head>
 8 <body>
 9  
10 <h1>我的第一个标题</h1>
11  
12 <p>我的第一个段落。</p>
13  
14 </body>
15 </html>

HTML基础--一个实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>博客园</title>
 6 </head>
 7 <body>
 8 
 9 <h1>这是标题 1</h1>
10 <h2>这是标题 2</h2>
11 <h3>这是标题 3</h3>
12 <h4>这是标题 4</h4>
13 <h5>这是标题 5</h5>
14 <h6>这是标题 6</h6>
15 
16 <p>这是一个段落。</p>
17 
18 <a href="https://www.cnblog.com">博客园</a>
19 
20 <img src="logo.png" width="258" height="39" />
21 </body>
22 </html>

HTML元素以及属性

　　　　HTML元素的具体构成如下表所示：

开始标签*	元素内容	结束标签*
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个超链接	</a>
<br>	换行

　　　　Tips：对于元素部分，需要注意部分内容：某些HTML元素可以是空内容，空内容在开始标签中关闭。

　　　　HTML属性

　　　　属性示例如下：

<a href="http://www.runoob.com">这是一个链接</a>

　　　　适用于大部分的HTML5的表单元素当中的属性列表如下：

属性	描述
class	为html元素定义一个或者多个类名
id	定义元素的唯一性id
style	规定元素的行内样式
title	描述元素的额外信息

HTML标题和段落

　　　　具体参照上述的实例，此处主要列举一些标签参考手册。

属性	描述
<html>	定义html文档
<body>	定义文档的主体
<h1>-<h6>	定义html标题
<hr>	定义水平线
<!-->	定义注释
<p>	定义一个段落
<br>	换行

HTML超链接

　　　　超链接的代码很简单，模式以及实例如下所示：

1 <a href="url">链接文本</a>
2 <a href="https://www.google.com/">访问谷歌</a>
3 <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">访问谷歌网站</a>
4 <a id="tips">有用的提示部分</a>

　　　　注意：target定义了被链接的文档在何处显示

　　　　此处，我觉得较为重要的一点，便是超链接使用id属性，id属性可以创建文档标签，具体可以参看下面的文档：

1 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
2 <a href="#tips">访问有用的提示部分</a>
3 在HTML文档中插入ID:
4 <a id="tips">有用的提示部分</a>
5 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
6 <a href="https://www.google.com/html/html-links.html#tips">访问有用的提示部分</a>

　　　　另外需要注意的一点是：请始终将正斜杠添加到子文件夹当中，防止多次请求访问，效率偏低。书写类似这种：https://www.google.com/html/。

HTML头部

　　　　头部主要是<head>部分，具体使用方法以及概述主要通过下方的代码以及表格进行概述：

 1 <head>
 2 <base href="http://www.runoob.com/images/" target="_blank">
 3 </head>
 4 
 5 <head>
 6 <link rel="stylesheet" type="text/css" href="mystyle.css">
 7 </head>
 8 
 9 <head>
10 <style type="text/css">
11 body {
12     background-color:yellow;
13 }
14 p {
15     color:blue
16 }
17 </style>
18 </head>
19 
20 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

　　　　表格部分主要是对于其进行说明:

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了文档与外部资源的关系
<meta>	定义了文档中html文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了html文件的样式文件

HTML样式-CSS

　　　　常用的几种样式方法，通过代码向大家展示，具体如下：

 1 内联样式：
 2 <p style="color:blue;margin-left:20px;">这是一个段落。</p>
 3 
 4 
 5 <body style="background-color:yellow;">
 6 <h2 style="background-color:red;">这是一个标题</h2>
 7 <p style="background-color:green;">这是一个段落。</p>
 8 </body>
 9 
10 <h1 style="font-family:verdana;">一个标题</h1>
11 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
12 
13 <h1 style="text-align:center;">居中对齐的标题</h1>
14 <p>这是一个段落。</p>
15 
16 内部样式表：
17 <head>
18 <style type="text/css">
19 body {background-color:yellow;}
20 p {color:blue;}
21 </style>
22 </head>
23 
24 外部样式表：
25 <head>
26 <link rel="stylesheet" type="text/css" href="mystyle.css">
27 </head>

html常用样式标签如下：

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

HTML图片、表格、列表

　　　　图像、表格、列表的具体代码如下：

 1 图像：
 2 <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
 3 
 4 表格：
 5 <table border="1">
 6     <tr>
 7         <th>Header 1</th>
 8         <th>Header 2</th>
 9     </tr>
10     <tr>
11         <td>row 1, cell 1</td>
12         <td>row 1, cell 2</td>
13     </tr>
14     <tr>
15         <td>row 2, cell 1</td>
16         <td>row 2, cell 2</td>
17     </tr>
18 </table>
19 
20 列表：
21 
22 无序列表：
23 <ul>
24 <li>Coffee</li>
25 <li>Milk</li>
26 </ul>
27 
28 有序列表：
29 
30 <ol>
31 <li>Coffee</li>
32 <li>Milk</li>
33 </ol>
34 
35 自定义列表：
36 <dl>
37 <dt>Coffee</dt>
38 <dd>- black hot drink</dd>
39 <dt>Milk</dt>
40 <dd>- white cold drink</dd>
41 </dl>

HTML 区块

　　　　具体的标签文档如下：

标签	描述
<div>	定义了文档的区域
<span>	用来组合文档中的行内元素

HTML 布局

　　　　大部分网站可以使用<div>或者<table>来创建多行，CSS对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

HTML 表单和框架

　　　　HTML表单用于收集用户的输入信息，表示文档中的一部分区域，此部分包含交互式控件，将用户的信息发送到Web服务器。如下代码分别区分出文本域、密码字段、单选按钮、复选框等内容。

 1 文本域
 2 <form>
 3 First name: <input type="text" name="firstname"><br>
 4 Last name: <input type="text" name="lastname">
 5 </form>
 6 
 7 密码字段
 8 <form>
 9 Password: <input type="password" name="pwd">
10 </form>
11 
12 单选按钮（Radio Buttons）
13 <form action="">
14 <input type="radio" name="sex" value="male">男<br>
15 <input type="radio" name="sex" value="female">女
16 </form>
17 
18 复选框（Checkboxes）
19 <form>
20 <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
21 <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
22 </form>
23 
24 提交按钮(Submit)
25 <form name="input" action="html_form_action.php" method="get">
26 Username: <input type="text" name="user">
27 <input type="submit" value="Submit">
28 </form>

　　　　上述示例当中，存在一个method属性，其定义了表单数据的提交方式，可以是如下值：

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

　　　　html框架让浏览器窗口显示不止一个，具体用法如代码所示：

 1 iframe语法:
 2 <iframe src="URL"></iframe>
 3 
 4 iframe - 设置高度与宽度
 5 <iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
 6 
 7 iframe - 移除边框
 8 <iframe src="demo_iframe.htm" frameborder="0"></iframe>
 9 
10 使用 iframe 来显示目标链接页面
11 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
12 <p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML脚本

　　　　JavaScript使脚本更具有动态和交互性。

1 简单实例：
2 <script>
3 document.write("Hello World!");
4 </script>

HTML URL

　　　　URL是一个网页地址，URL由称为统一资源定位器，其语法规则如下：

scheme://host.domain:port/path/filename

scheme：定义因特网服务的类型，最常见的类型是http
host：定义域主机（http默认是www)
domain: 定义互联网域名，不如cnblogs.com
post: 定义主机上的端口号，http默认端口号是80
path: 定义服务器上的路径
filename: 定义文档/资源名称

　　　　常见的scheme具体如下：

Scheme	访问	用于
http	超文本传输协议	以http://开头的普通网页，不加密
https	安全超文本传输协议	安全网页，加密所有的信息交互
ftp	文件传输协议	用于将文件下载或者上传到该网页
file		您计算机上的文件

标签：HTML,元素,基础知识,html,文档,标题,梳理,定义
From： https://www.cnblogs.com/liuxinkai94/p/16774007.html

HTML基础知识梳理