HTML笔记_<head> 元素包含了文档的元(meta)数据如 <meta charset="utf-8"> 定-CSDN博客

本文链接：https://blog.csdn.net/u013474568/article/details/84997726

HTML笔记

Html简介
- HTML后缀
- HTML/CSS/JavaScript区别
HTML速查列表
教程参考及笔记

Html简介

HTML(HyperText Markup Language，译文：超文本标记语言)是一种用于创建网页的标准标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

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

HTML后缀

.html
.htm

HTML/CSS/JavaScript区别

HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
我给大家打个比喻。我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。

HTML速查列表

基本文档

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

` 声明为 HTML5 文档
<html> 元素是HTML 页面的根元素。HTML 的 lang 属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。
<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8。
<titile>元素描述了文档的标题
<body>元素包含了可见的页面内容

基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br/> （换行）
<hr/> （水平线）
<!-- 这是注释 -->

文本格式化(Formatting)

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

链接(Links)

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
协议限定符链接： <a href="javascript:alert('');">协议限定符链接</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

target属性

target属性值	语义
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

图片(Images)

<img src="URL" alt="图片显示不出来时的提示文字" height="42" width="42" title="鼠标移到图片上的提示文字">

提示： 当处理色调复杂、绚丽的图像时，如照片、图画等，使用使用JPG格式；而处理一些logo、banner、简单线条构图的时候，适合使用PNG格式；GIF格式通常只适合表达动画效果。

样式区块(Styles/Selects)

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始(结束)。
HTML 中<div>元素是块级元素，它可以组合其它 HTML 元素的容器。

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<!-- 能自动换行 -->
<div>文档中的块级元素</div>
<!-- 不能自动换行 -->
<span>文档中的内联元素</span>

无序列表(ul)

<ul type="disc">
    <li>项目</li>
    <li>项目</li>
</ul>

type属性值	语义
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

有序列表(ol)

<!-- ol属性 type 默认为数字1；大写字母列表A；小写字母列表a；罗马大数字列表I；罗马小数字列表i；-->
<!-- ol属性 start 起始排序号 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

type属性值	列表项的序号类型
1	数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

自定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格(Tables)

<table border="1" aligen="left">
  <caption>表格的标题</caption>
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
  	<!-- colspan:左右合并; rowspan:上下合并 -->
    <td colspan="1" rowspan="">表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

<table>标签:
在这里插入图片描述
<caption>:

<tr>:
在这里插入图片描述
<td>和<th>:

框架(iframe)

<!-- frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框: -->
<iframe src="demo_iframe.htm" frameborder="0" scrolling=“auto”></iframe>

scrolling属性：

scrolling属性值	说明
auto	默认值，整个表格在浏览器页面中左对齐
yes	总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no	在任何情况下都不显示滚动条

注：HTML5已经舍弃了frameset标签（框架集标签）。

表单(Forms)

<form action="demo_form.php" method="post/get">
    <!-- 文本域 -->
    <input type="text" name="email" size="40" maxlength="50">
    <!-- 密码字段 -->
    <input type="password">
    <!-- 复选框 -->
    <input type="checkbox" checked="checked">
    <!-- 单选按钮 -->
    <input type="radio" checked="checked">
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">    
    <!-- 提交按钮 -->
    <input type="submit" value="Send">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 隐藏域 -->
    <input type="hidden">
    <!-- 下拉框 -->
    <select name="" id="">
        <option value="1">苹果</option>
        <option value="2" selected="selected">香蕉</option>
        <option value="3">樱桃</option>
    </select>
    <!-- 文本域 -->
    <textarea name="comment" rows="60" cols="20" readonly title="鼠标放上提示"></textarea>
</form>

提示： <input>没有结束标记。
<form>...</form>:
在这里插入图片描述
文本域(text)和密码(password):

实体(Entitys)

&lt; 等同于 <
&gt; 等同于 >
&nbsp; 等同于 空格
&quoat; 等同于 '引号
&amp; 等同于 &
&#169; 等同于 © 版权号

音频视频

<body>
    <!-- 插入音频文件 -->
    <embed src="media/西班牙舞曲.mp3" width="400px" height="80px"/>
    
    <!-- 插入视频文件 -->
    <embed src="media/小苹果.wmv" width="400px" height="80px"/>
</body>

HTML 颜色(Colors)

路径

绝对路径(Absolute Path)

从磁盘出发的路径。比如：D:\Program Files\Java\jdk-11.0.1、/root/xxx/

相对路径(Relative Path)

相对于该文件的路径。

表示	语义
`/`	根目录
`./`	当前目录
`../`	上一级目录

HTML 布局

使用<div>元素布局
使用<table>元素布局
提示： 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

使用 div 元素布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">主要的网页标题</h1>
    </div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    内容在这里
    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    版权 © runoob.com
    </div>
</div>
</body>
</html>

上面的 HTML 代码会产生如下结果：

使用 table 元素布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
        <h1>主要的网页标题</h1>
        </td>
    </tr>
 
    <tr>
        <td style="background-color:#FFD700;width:100px;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </td>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
        	内容在这里
        </td>
    </tr>
 
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
        	版权 © runoob.com
        </td>
    </tr>
</table>
 
</body>
</html>

上面的 HTML 代码会产生以下结果：

**提示：**使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

HTML 头部(HEAD)

HTML head 元素

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

可以添加在头部区域的元素标签为: 网页标题:<title>, <style>, 基本的元数据:<meta>, <link>, <script>, <noscript>, <base>。

HTML title 元素

文档标题。

HTML base 元素

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

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML link 元素

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

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

HTML style 元素

<style> 标签定义了HTML文档的样式文件引用地址.
在<style>元素中你也可以直接添加样式来渲染 HTML 文档:

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

HTML meta 元素

meta标签描述了一些基本的元数据。
<meta>标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于<head>区域。
为搜索引擎定义关键词:

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

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="laiqi">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML script 元素

<script>标签用于加载脚本文件,如：JavaScript。

全局属性

提示： New表示HTML5 新属性。

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditableNew	规定是否可编辑元素的内容。
contextmenuNew	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggableNew	指定某个元素是否可以拖动
dropzoneNew	指定是否将数据复制，移动，或链接，或删除
hiddenNew	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheckNew	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translateNew	指定是否一个元素的值在页面载入时是否需要翻译

HTML 事件(Events)

详见参考

窗口事件属性(Window Event Attributes)

属性	描述
onblur	当窗口失去焦点时运行脚本
onerror	当错误发生时运行脚本
onfocus	当窗口获得焦点时运行脚本
onload	当文档加载时运行脚本
onmessage	当触发消息时运行脚本

表单事件(Form Events)

键盘事件(Keyboard Events)

鼠标事件(Mouse Events)

多媒体事件(Media Events)

HTML 统一资源定位器(URL)

详细参见

常见的URL Scheme

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

URL 字符编码

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

HTTP 方法 GET 对比 POST

什么是HTTP?

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。
HTTP 的工作方式是客户端与服务器之间的请求-应答协议。
web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

两种 HTTP 请求方法：GET 和 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded or multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

其他 HTTP 请求方法

方法	描述
HEAD	与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT	上传指定的 URI 表示。
DELETE	删除指定资源。
OPTIONS	返回服务器支持的 HTTP 方法。
CONNECT	把请求连接转换到透明的 TCP/IP 通道。