HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Fighting_No1/article/details/77148751

HTML 笔记

这只是我关于HTML的笔记，完整的HTML教程请自行查看 w3cschool 或者菜鸟教程。

HTML 结构

HTML的结构基本如下：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //这里是网页编码，现在是gb2312
    <meta name="keywords" content="关键字" />
    <meta name="description" content="本页描述或关键字描述" />
    ...
</head>
<body>
    这里就是正文内容...
</body>
</html>

理解DOCTYPE声明和meta标签

在文档最顶部声明DOCTYPE，用来说明你用的HTML是什么版本；
以<html>开始，然后在网页最后以</html>结尾；
<html>后接着是<head>页头，在<head></head>中的内容在浏览器中是无法显示的，<title></title>中放置的是网页标题，可在浏览器最左上看见；
接着<meta name="keywords" content="关键字" /> <meta name="description" content="本页描述或关键字描述" /> 这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
接着就是正文<body></body>也就是常说的body区，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区域，网页的内容呈现区。

以上就是通俗来讲的最简单的html语言结构，如果需要看更多更丰富的html语言结构，可打开一个网站的网页，然后点击浏览器的“查看”–然后点击“查看源代码”即可看见该网页的html语言结构，这样可以根据此源代码来分析此网页的HTML语言结构与内容。

HTML 元素

HTML 元素以开始标签起始
HTML 元素以结束标签终止。即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
元素的内容是开始标签与结束标签之间的内容。
某些 HTML 元素具有空内容（empty content）。没有内容的 HTML 元素被称为空元素。 <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
空元素在开始标签中进行关闭（以开始标签的结束而结束），但在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。所以即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
大多数 HTML 元素可拥有属性，属性是 HTML 元素提供的附加信息。
HTML 标签对大小写不敏感：<P> 等同于 <p>。但在未来 (X)HTML 版本中强制使用小写。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’
属性和属性值对大小写不敏感，但新版本的 (X)HTML 要求使用小写属性。

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text） (作为工具条使用)

HTML 头部

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

可以添加在头部区域的元素标签为:

标签	描述	示例
`<title>`	1.定义了浏览器工具栏的标题 2.当网页添加到收藏夹时，显示在收藏夹中的标题 3.显示在搜索引擎结果页面的标题	`<title>文档标题</title>`
`<base>`	定义了页面链接标签的默认链接地址	`<base href="http://www.runoob.com/images/" target="_blank">`
`<link>`	定义了一个文档和外部资源之间的关系	`<link rel="stylesheet" type="text/css" href="mystyle.css">`
`<meta>`	定义了HTML文档中的元数据，元数据不显示在页面上，但会被浏览器解析
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

HTML 文本

标签	描述
`<h1>` - `<h6>`	定义 HTML 标题
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字(在新插入文本下添加一条下划线)
`<del>`	定义删除字(在已删除文本上添加一条删除线)
`<pre>`	定义预格式文本(被包围在 `<pre>` 标签元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体。)
`<abbr>`	定义缩写
`<address>`	定义地址
`<blockquote>`	定义长的引用（浏览器通常会对 `<blockquote>` 元素进行缩进）
`<q>`	定义短的引用语（浏览器经常会在这种引用的周围插入引号）
`<cite>`	定义作品的标题
`<dfn>`	定义特殊术语或短语

HTML 链接

URL 统一资源定位器

URL 语法规则

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

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3cschool.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的 URL Schemes

以下是一些URL scheme：

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

URL 字符编码

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

`<a>` 属性

属性	作用
href	创建指向另一个文档的链接
name	规定锚（anchor）的名称，创建文档内的书签。书签不会以任何特殊方式显示，它对读者是不可见的。可使用id属性来代替。
target	设定新的页面在什么窗口显示。
download	HTML5新属性。提示浏览器下载链接目标而不是导航到该目标。如果指定了文件名，浏览器会提示下载并保存为指定文件名。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

锚点链接

除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

空链接

以下是常见的几种设置空链接的方法，以及它们之间的区别：

方法	作用	是否会跳转	场景适用性
`href="#"`	导航到页面顶部	是	占位符，捕获点击事件
`href="javascript:void(0)"`	阻止默认行为，不刷新页面	否	阻止跳转，配合 JS 使用
`href=""`	刷新当前页面	是	需要页面刷新时
`href="about:blank"`	打开空白页面	是	新窗口打开空白页面
`role="button"`	链接表现为按钮，无默认行为	否	配合 JS 实现按钮功能，无跳转

理解target的值

target的值有：

_self: 链接的页面在当前页面显示，默认设置。
_blank: 链接的页面在新的浏览窗口显示
_parent: 链接的页面在当前窗口的父窗口显示
_top: 链接的页面在整个浏览窗口显示

main.html定义两个框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
</head>
<frameset rows="20%,*">
    <frame src="top.html" name="top" noresize="noresize" />
    <frame src="bottom.html" name="bottom" noresize="noresize" />
</frameset>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top</title>
</head>
<body style="font-size:24px;font-weight:bold;">
Example of "_parent" and "_top"
</body>
</html>

bottom.html定义两个框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bottom</title>
</head>
<frameset cols="20%,*">
    <frame src="left.html" name="left" noresize="noresize" />
    <frame src="right.html" name="right" noresize="noresize" />
</frameset>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Left</title>
</head>
<body style="font-size:18px;font-weight:bold;">
I'm left in bottom!!
</body>
</html>

right.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Right</title>
</head>
<body>
    <h2>这是_blank的演示，点击链接会打开新的浏览窗口</h2>
    <a href="main.html" target="_blank">main</a>
    <br />
    <h2>这是_self的演示，点击链接会替换整个right(当前页面)内容</h2>
    <a href="test1.html" target="_self">test1</a>
    <br />
    <h2>这是_parent的演示，点击链接会替换当前窗口(right)的父窗口(bottom)的内容</h2>
    <a href="test2.html" target="_parent">test2</a>
    <br />
    <h2>这是_top的演示，点击链接会替换整个窗口(main)的内容</h2>
    <a href="test3.html" target="_top">test3</a>
    <br />
    <h2>这是名称的演示，点击链接会替换掉对应name的页面内容</h2>
    <a href="test4.html" target="left">test4</a>
</body>
</html>

test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test1</title>
</head>
<body>
    <h1>这是test1.html文件</h1>
    <a href="right.html">返回</a>
</body>
</html>

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test2</title>
</head>
<body>
    <h1>这是test2.html文件</h1>
    <a href="bottom.html">返回</a>
</body>
</html>

test3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test3</title>
</head>
<body>
    <h1>这是test3.html文件</h1>
    <a href="main.html">返回</a>
</body>
</html>

test4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test4</title>
</head>
<body>
    <h1>这是test4.html文件</h1>
    <a href="left.html">返回</a>
</body>
</html>

访问main.html，main里包含top和bottom，bottom里包含left和right。效果如下：

main里包含top和bottom，bottom里包含left和right

点击target=_blank的mian链接，则会打开新的标签页显示main页面。

点击target=_selft的test1链接，则test1的内容会替换right(当前页面)内容，效果如下：

test1的内容会替换right(当前页面)内容

点击target=_parent的test2链接，则test2的内容会在当前窗口(right)的父窗口(bottom)中显示，效果如下：

test2的内容会在当前窗口(right)的父窗口(bottom)中显示

点击target=top的test3链接，则test3的内容会替换整个页面(main)内容，效果如下：

点击target=left的test4链接，则test4的内容会替换left页面的内容，效果如下：

test4的内容会替换left页面的内容

HTML 列表

<ol> 定义有序列表;
<ul> 定义无序列表;
自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。

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

HTML 图像

标签	描述	属性
`<img>`	定义图像	1. alt= text ，规定图像的替代文本 2. height= pixels ,规定图像的高度 3. width= pixels ,规定图像的宽度 4. src= URL ,规定显示图像的URL 5. usemap= #mapname ,将图像定义为客户器端图像映射
`<map>`	定义图像地图	name= mapname ，必需，为 image-map 规定的名称
`<area>`	定义图像地图中的可点击区域	1. alt= text , 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。 2. coords= coordinates ,规定区域的坐标。 3. href= URL ,规定区域的目标 URL。 4. shape= default\|rect\|circle\|poly ,规定区域的形状。 5. target= _blank\|_parent\|_self\|_top\|framename ,规定在何处打开目标 URL。

定义area：

距形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>
圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>
多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML 表格

标签	描述
`<table>`	定义表格。属性 cellspacing = “number” 设置单元格间距， cellpadding = “number” 设置单元格边距
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元。属性 rowspan = “number” 规定单元格纵跨的行数，属性 colspan = “number” 规定单元格横跨的列数
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组。通过使用 `<colgroup>` 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
`<col>`	定义用于表格列的属性。属性 span = “number” 规定列组应该横跨的列数。
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体

<table border="1" cellpadding="10">
    <colgroup>
        <col style="background-color:red">
        <col span="2" style="background-color:yellow">
    </colgroup>
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

效果如下：

这里写图片描述

HTML 表单

标签	描述
`<form>`	定义供用户输入的表单
`<input>`	定义输入域
`<textarea>`	定义文本域 (一个多行的输入控件)
`<label>`	定义了 `<input>` 元素的标签，一般为输入标题
`<fieldset>`	定义了一组相关的表单元素，并使用外框包含起来
`<legend>`	定义了 `<fieldset>` 元素的标题
`<select>`	定义了下拉选项列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个点击按钮

输入框类型	效果
Text	文本框
Password	密码框
Radio	单选框
Check	复选框
Reset	重选按钮
Submit	发送按钮
Button	命令按钮
Hidden	隐藏项
File	文件浏览框

<form action="" method="post">
    <fieldset>
        <legend>个人信息</legend>
        性别
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br/>
        是否已就业
        <input type="checkbox" name="work" value="Y">是
        <input type="checkbox" name="work" value="N">否<br/>
        现居地
        <select>
            <optgroup label="广东省">
                <option value="GZ">广州</option>
                <option value="SZ">深圳</option>
            </optgroup>
        </select>
        <br/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </fieldset>
</form>

区块

span、div、p的区别

span是内联的，用在一小块的内联HTML中，前后不断行. 它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
div元素是块级的，其前后有断行，用于组合一大块的代码。可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。
p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行.

div和table的区别

div 的加载方式是即读即加载，遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容，读多少加载多少；
table 的加载方式是完成后加载，遇到 <table> 后，在读到 </table> 之前，table 中的内容不加载，或者传输中断了(document.onload()事件)的时候加载，这是因为table牵涉到多行多列问题,所以只有当table所有内容加载完毕,IE才知道该怎么显示。