HTML笔记

是星星啊！

已于 2022-11-27 17:27:18 修改

阅读量103

点赞数

分类专栏：笔记文章标签： html5

于 2021-10-04 22:05:11 首次发布

本文链接：https://blog.csdn.net/qq_45052616/article/details/120608892

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

HTML笔记

HTML笔记

注：1.保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名

HTML基础

1.HTML标题：通过< h1 >到< h6 >来进行定义。
2.HTML段落：通过< p >来定义。
3.HTML链接：通过< a >来定义。

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

4.HTML图像：通过来定义。

<img src="cxx.jpg" width="100" height="100" />

HTML 元素

1.HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）

    在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

大多数 HTML 元素可拥有属性

注：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
2.HTML 引文、引用和定义元素

<q>  定义短的行内引用，相当于是个引号。
<blockquote>  浏览器通常会对 <blockquote> 包裹的内容进行缩进处理
<abbr>  定义缩写或首字母缩略语
<dfn>  定义项目或缩略词的定义，较复杂，不建议使用
<address>  定义文档作者或拥有者的联系信息。
<bdo>  定义文本方向。
<cite>  定义著作的标题。

3.注释

<!-- 在此处写注释 -->

4.颜色
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB），每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。
注：提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。

HTML CSS

1.外部样式表

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

2.内部样式表

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3.内联样式

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML 链接

1.点击链接可以从一张页面跳转到另一张页面
有两种使用 < a > 标签的方式：
（1）通过使用 href 属性 - 创建指向另一个文档的链接
（2）通过使用 name 属性 - 创建文档内的书签
href 属性规定链接的目标。
target 属性，你可以定义被链接的文档在何处显示。
target=“_blank”：在新窗口打开文档
在这里插入图片描述

HTML 图像

1.在 HTML 中，图像由 < img > 标签定义，它只包含属性，并且没有闭合标签。
2.< img >的属性
(1)src(源属性)：src 指 “source”,源属性的值是图像的 URL 地址。
(2)alt(替换文本属性)：alt 属性用来为图像定义一串预备的可替换的文本,当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像.

<img src="cxx.gif" alt="cxx">

在这里插入图片描述

HTML 表格

1.定义：表格由 < table > 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2.边框属性：如果不定义边框属性，表格将不显示边框，如需使用，在table标签中设置border的值即可。
3.表头属性：表格的表头使用标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。
在这里插入图片描述
< table >标签的可选属性

HTML 列表

1.无序列表:标签为< ul >,列表项标签为< li >.(无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。)

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

2.有序列表：标签为< ol >,列表项标签为< li >.(有序列表也是一列项目,列表项目使用数字进行标记。)

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

3.自定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合,自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML div 和 span

1.HTML 块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）
例子：< h1 >, < p >, < ul >, < table >
2.HTML 内联元素：内联元素在显示时通常不会以新行开始。
例子：< b >, < td >, < a >, < img >
3.（1）HTML < div > 元素：< div > 元素是块级元素，它是可用于组合其他 HTML元素的容器，由于它属于块级元素，浏览器会在其前后显示折行，< div > 元素的另一个常见的用途是文档布局。如果与 CSS一同使用，< div > 元素可用于对大的内容块设置样式属性。
（2）HTML < span > 元素：HTML < span > 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，< span > 元素可用于为部分文本设置样式属性。

HTML 类（属性）

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式；为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<div class="cxx">

HTML id 属性

1.HTML id 属性用于为HTML 元素指定唯一的 id,一个 HTML文档中不能存在多个有相同 id 的元素。
2.id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

HTML iframe

1.iframe :用于在网页内显示网页。(定义内联的子窗口（框架）)
2.添加 iframe 的语法

<iframe src="URL"></iframe>
URL需要为https://www.cxx.com(firefox中)

(1)height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）.

<iframe src="URL" width="100" height="100"></iframe>

(2)frameborder 属性规定是否显示 iframe 周围的边框,设置属性值为 “0” 就可以移除边框.

<iframe src="URL" frameborder="0"></iframe>

HTML JavaScript

1.HTML < script > 标签
(1) < script > 标签用于定义客户端脚本（JavaScript）。
(2)< script > 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
(3)JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

HTML 文件路径

在这里插入图片描述
1.绝对路径
绝对文件路径是指向一个因特网文件的完整 URL

<img src="https://www.cxx.com.cn/images/picture.jpg" alt="flower">

2.相对路径
相对路径指向了相对于当前页面的文件。

<img src="images/picture.jpg" alt="flower">

注：建议相对路径是个好习惯，如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上(localhost) 或未来的公共域中均可正常工作

HTML 布局

List item

1.使用 < div > 元素的 HTML 布局
2.使用 HTML5 的网站布局
在这里插入图片描述

HTML 响应式 Web 设计

1.使用css中的@media媒体查询来适配不同的终端。（这里有一个比较好的习惯是将页面栅格化，栅格化的意思就是将页面划分成一块一块的区域，然后不同的终端适配就是将栅格重新排列）
2.使用 Bootstrap，使用现成的 CSS 框架

HTML 表单

一.表单属性
1.< form > 元素：用于定义 HTML 表单.
（1）action 属性定义在提交表单时执行的动作。
（2）method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST），提交表单数据时，默认的 HTTP 方法是 GET。
注：

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

（3）：target 属性规定提交表单后在何处显示响应。
在这里插入图片描述
默认值为 _self，响应将在当前窗口中打开。
（4）：autocomplete 属性规定表单是否应打开自动完成功能，启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
（5）：novalidate 属性是一个布尔属性，如果已设置，它规定提交时不应验证表单数据。
二.表单元素
1.< input > 元素：
（1）< input type=“text”> 定义用于文本输入的单行输入字段。
（2）< input type=“radio”> 定义单选按钮，checked用于默认选项。
（3）< input type=“submit”> 定义用于向表单处理程序（form-handler）提交表单的按钮。
注：如果要正确地被提交，每个输入字段必须设置一个 name 属性。
2.< select > 元素定义下拉列表
< option > 元素定义待选择的选项，列表通常会把首个选项显示为被选选项，能够通过添加 selected 属性来定义预定义选项。
在这里插入图片描述
3.< textarea > 元素定义多行输入字段（文本域）
4.< button > 元素定义可点击的按钮
5.< datalist > 元素为元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表，元素的 list 属性必须引用元素的 id 属性。
在这里插入图片描述
三.< input > 元素的输入类型
1.输入类型：text
< input type=“text”> 定义供文本输入的单行输入字段
2.输入类型：password
< input type=“password”> 定义密码字段
3.输入类型：submit
< input type=“submit”> 定义提交表单数据至表单处理程序的按钮，表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面，在表单的 action 属性中规定表单处理程序（form-handler）
4.输入类型: radio
< input type=“radio”> 定义单选按钮。
5.输入类型: checkbox
< input type=“checkbox”> 定义复选框。
6.输入类型: button
< input type="button> 定义按钮。
在这里插入图片描述
四.input 属性

五.Input form 属性*
1.form 属性：input 的 form 属性规定 < input > 元素所属的表单，此属性的值必须等于它所属的 < form > 元素的 id 属性。

<form action="/action_page.php" id="form1">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
</form>

<label for="lname">名字：</label>
<input type="text" id="lname" name="lname" form="form1">

2.formaction 属性：input 的 formaction 属性规定当提交表单时，对输入（数据）进行处理的文件的 URL。
3.formmethod 属性：input 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法。
4.formtarget 属性：input 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应。
5.formnovalidate 属性：input 的 formnovalidate 属性规定提交时不应验证元素。
注：以上会覆盖元素的 action 属性。

< fieldset > 元素组合表单中的相关数据，< legend > 元素为 < fieldset > 元素定义标题。
在这里插入图片描述