白发败犬のHTML学习笔记

HTML学习笔记及要点记录

1.概述

(注：MarkDown中HTML已被兼容，善用替换=、=当然直接TAB也可)

"<"使用"&lt;"代替，">"则使用"&gt;"代替即可正常输出HTML语句

(1)HTML指的是超文本标记语言: HyperText Markup Language,是一种标记语言

(2)HTML标签(HTML tag),是由尖括号包围的关键词，通常是成对出现，第一个标签是开始标签，第二个标签是结束标签

(3)<!DOCTYPE>声明:有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。注：doctype 声明是不区分大小写的

HTML5：
<!DOCTYPE html>

(4)中文编码：大多数情况下直接输出中文会导致乱码，需要在头部将字符声明为UTF-8或GBK

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
</html>

2.HTML元素

(1)HTML元素以开始标签起始，结束标签终止

(2)大多数HTML元素可以拥有属性

(3)如果忘记使用结束标签，大多数浏览器也会正确显示HTML，但请务必不要这样做，否则可能会出现未知错误

(4)空元素是允许存在的

(注：HTML标签请尽量使用小写书写)

3.HTML属性

(1)HTML元素可以设置属性，用于添加附加信息，其描述一般于开始标签

(2)属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。(注：在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号)

(3)列出一些适用于大多数HTML元素的属性：

class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	    定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

(更多属性可查看手册：)

点击此处查看手册

4.HTML标题

(1)标题（Heading）是通过<h1>-<h6>标签进行定义的<h1> 定义最大的标题, <h6> 定义最小的标题(浏览器会自动地在标题的前后添加空行。)

(2)请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为网页的结构和内容编制索引。因为用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推

(3)HTML水平线：<hr>标签在HTML页面中创建水平线

(4)HTML注释：

<!-- 这是一个注释 -->

(5)标题与字体：1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题

5.HTML段落

(1)段落通过<p>标签定义(依旧注意不要忘记结束标签</p>)

(2)在不产生一个新段落的情况下进行换行，可使用<br>标签(<br/>元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签)，eg:

<p>这个<br>段落<br>演示了分行的效果</p>

(4)额外空格及回车：对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格

6.HTML文本格式化

(1)什么加粗、斜体。上下标、删除等等格式化输出，具体参见标签手册：

点击此处查看手册

7.HTML超链接

(1)HTML使用标签<a>来设置超文本链接，在标签<a>中使用了href属性来描述链接的地址，语法如下：

<a href="url">链接文本</a> 
//href属性描述链接的目标

(2)超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

(3)默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线(注：如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定而显示)

(4)target属性：定义被链接的文档在何处显示

<a href="http://baifabaiquan.cn/" target="_blank">访问我的主页!</a>
//target="_blank" 在新窗口打开网页

8.HTML头部

(1)HTML<head>元素：<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

(2)HTML<title>元素：<title>标签定义了不同文档的标题，其在HTML/XHTML文档中是必须的

<title> 元素:
·定义了浏览器工具栏的标题
·当网页添加到收藏夹时，显示在收藏夹中的标题
·显示在搜索引擎结果页面的标题

(3)HTML<base>元素：描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

(4)HTML<link>元素：定义了文档与外部资源之间的关系(标签通常用于链接到样式表)

(5)HTML<style>元素：定义了HTML文档的样式文件引用地址(也可以直接添加样式来渲染HTML文档)

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

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Web HTML 笔记">
定义网页作者:
<meta name="author" content="baifabaiquan">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

(7)HTML<script>元素：用于加载脚本文件，如：JavaScript

9.HTML-CSS

(1)CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式

(2)CSS 可以通过以下方式添加到HTML中(最好的方式是通过外部引用CSS文件)：

·内联样式 - 在HTML元素中使用"style" 属性
·内部样式表 - 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
·外部引用 - 使用外部 CSS 文件

(3)内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性

(4)内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。可以在<head>部分通过<style>标签定义内部样式表

(5)外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观

10.HTML图像

(1)图像由<img> 标签定义，<img> 是空标签，它只包含属性，并且没有闭合标签，定义图像的语法是：

<img src="url" alt="some_text">
//url为图像路径
//alt属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

(2)设置图片宽高(指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局)

11.HTML表格

(1)表格由<table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等,eg：

<table border="1">
    <tr>
         <th>Header 1</th>
         <th>Header 2</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>

(2)边框属性：border=”1” 数值为边框像素值，越大越粗

(3)表头：使用<th>标签进行定义

12.HTML列表

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

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

(2)有序列表：使用<ol>标签。每个列表项始于<li>标签

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>
<ol start="50">        //start属性表示从50标记开始计数
    <li>Coffee</li>
    <li>Tea</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>

(4)注：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

13.HTML区块

(1)HTML区块元素：大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。eg: <h1>, <p>, <ul>, <table>

(2)HTML内联元素：内联元素在显示时通常不会以新行开始。eg：<b>, <td>, <a>, <img>

(3)<div>元素：HTML<div>元素是块级元素，可用于组合其他 HTML 元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法<table>元素的作用是显示表格化的数据

(4)<span>元素：HTML<span>元素是内联元素，可用作文本的容器<span>元素也没有特定的含义。当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性

14.HTML布局

(1)使用<div>元素创建多列布局

(2)使用<table>元素创建多列布局

15.HTML表单和输入

(1)HTML表单：表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置，eg：

<form>
    input 元素
</form>

(2)文本域：通过<input type=”text”>标签来设定(注：在大多数浏览器中，文本域的默认宽度是20个字符)，eg：

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

(3)密码字段：通过标签<input type=”password”>来定义(密码字段字符不会明文显示，而是以星号或圆点替代)，eg：

<form>
    Password: <input type="password" name="password">
</form>

(4)单选按钮：<input type=”radio”>标签定义了表单单选框选项，eg：

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

(5)多选按钮：<input type=”checkbox”>定义了复选框，用户需要从若干给定的选择中选取一个或若干选，eg：

<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>

(6)提交按钮：<input type=”submit”>定义了提交按钮，eg：

<form name="input" action="html_form_action.php" method="get">
    Username:   <input type="text" name="user">
                <input type="submit" value="Submit">
</form>
//输入数据会传送到"html_form_action.php"的页面

16.HTML框架

(1)iframe语法：

<iframe src="URL"></iframe>
//URL指向不同的网页

(2)设置高度与宽度：height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)，eg：

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

(3)移除边框：frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

(4)使用iframe显示目标链接网页：iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性eg：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://baifabaiquan.cn" target="iframe_a">MyBlog</a></p>

17.HTML颜色

(1)HTML颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF

background:rgba(255,0,0,0.5)
//rgba分别代表红绿蓝透明通道，红绿蓝0~255，透明度0~1

(2)不同颜色有不同的颜色名和颜色值，需要时可查表

18.HTML脚本

(1)<script>标签：<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更新，eg(经典Hello World!)：

<script>
    document.write("Hello World!");
</script>

(2)<noscript>标签：<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容，eg：

<script>
    document.write("Hello World!")
    </script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

19.HTML字符实体

(1)如果希望正确地显示预留字符，必须在HTML源代码中使用字符实体,如 < > 大小于号

(2)虽然HTML不区分大小写，但实体字符对大小写敏感

20.HTML-URL编码

21.HTML语言代码

(1)HTML 的 lang 属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的,eg：

<html lang="en">
...
</html>

22.HTML状态消息：

(1)当浏览器从 web 服务器请求服务时，可能会发生错误,具体返回值对应消息可查表：

点击此处查看手册

23.还有一些内容并不常用，需要时可以去找度娘哈

24.完结撒花~

阿求 Pid：59411218

HTML

#HTML

白发败犬のHTML学习笔记

https://baifabaiquan.cn/2020/06/29/白发败犬のHTML学习笔记/

作者

白发败犬

发布于

2020年6月29日

许可协议

白发败犬のMaya学习笔记上一篇

白发败犬のPremiere Pro学习笔记下一篇

白发败犬のHTML学习笔记

HTML学习笔记及要点记录

1.概述

(注：MarkDown中HTML已被兼容，善用替换=、=当然直接TAB也可)

(1)HTML指的是超文本标记语言: HyperText Markup Language,是一种标记语言

(2)HTML标签(HTML tag),是由尖括号包围的关键词，通常是成对出现，第一个标签是开始标签，第二个标签是结束标签

(3)<!DOCTYPE>声明:有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。注：doctype 声明是不区分大小写的

(4)中文编码：大多数情况下直接输出中文会导致乱码，需要在头部将字符声明为UTF-8或GBK

2.HTML元素

(1)HTML元素以开始标签起始，结束标签终止

(2)大多数HTML元素可以拥有属性

(3)如果忘记使用结束标签，大多数浏览器也会正确显示HTML，但请务必不要这样做，否则可能会出现未知错误

(4)空元素是允许存在的

(注：HTML标签请尽量使用小写书写)

3.HTML属性

(1)HTML元素可以设置属性，用于添加附加信息，其描述一般于开始标签

(2)属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。(注：在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号)

(3)列出一些适用于大多数HTML元素的属性：

(更多属性可查看手册：)

4.HTML标题

(1)标题（Heading）是通过<h1>-<h6>标签进行定义的<h1> 定义最大的标题, <h6> 定义最小的标题(浏览器会自动地在标题的前后添加空行。)

(3)HTML水平线：<hr>标签在HTML页面中创建水平线

(4)HTML注释：

(5)标题与字体：1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题

5.HTML段落

(1)段落通过<p>标签定义(依旧注意不要忘记结束标签</p>)

(2)在不产生一个新段落的情况下进行换行，可使用<br>标签(<br/>元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签)，eg:

6.HTML文本格式化

(1)什么加粗、斜体。上下标、删除等等格式化输出，具体参见标签手册：

7.HTML超链接

(1)HTML使用标签<a>来设置超文本链接，在标签<a>中使用了href属性来描述链接的地址，语法如下：

(2)超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

(4)target属性：定义被链接的文档在何处显示

8.HTML头部

(1)HTML<head>元素：<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

(2)HTML<title>元素：<title>标签定义了不同文档的标题，其在HTML/XHTML文档中是必须的

(3)HTML<base>元素：描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

(4)HTML<link>元素：定义了文档与外部资源之间的关系(标签通常用于链接到样式表)

(5)HTML<style>元素：定义了HTML文档的样式文件引用地址(也可以直接添加样式来渲染HTML文档)

(7)HTML<script>元素：用于加载脚本文件，如：JavaScript

9.HTML-CSS

(1)CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式

(2)CSS 可以通过以下方式添加到HTML中(最好的方式是通过外部引用CSS文件)：

(3)内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性

(4)内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。可以在<head>部分通过<style>标签定义内部样式表

(5)外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观

10.HTML图像

(1)图像由<img> 标签定义，<img> 是空标签，它只包含属性，并且没有闭合标签，定义图像的语法是：

(2)设置图片宽高(指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局)

11.HTML表格

(2)边框属性：border=”1” 数值为边框像素值，越大越粗

(3)表头：使用<th>标签进行定义

12.HTML列表

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

(2)有序列表：使用<ol>标签。每个列表项始于<li>标签

(3)自定义列表：自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始

(4)注：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

13.HTML区块

(1)HTML区块元素：大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。eg: <h1>, <p>, <ul>, <table>

(2)HTML内联元素：内联元素在显示时通常不会以新行开始。eg：<b>, <td>, <a>, <img>

(4)<span>元素：HTML<span>元素是内联元素，可用作文本的容器<span>元素也没有特定的含义。当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性

14.HTML布局

(1)使用<div>元素创建多列布局

(2)使用<table>元素创建多列布局

15.HTML表单和输入

(1)HTML表单：表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置，eg：

(2)文本域：通过<input type=”text”>标签来设定(注：在大多数浏览器中，文本域的默认宽度是20个字符)，eg：

(3)密码字段：通过标签<input type=”password”>来定义(密码字段字符不会明文显示，而是以星号或圆点替代)，eg：

(4)单选按钮：<input type=”radio”>标签定义了表单单选框选项，eg：

(5)多选按钮：<input type=”checkbox”>定义了复选框，用户需要从若干给定的选择中选取一个或若干选，eg：

(6)提交按钮：<input type=”submit”>定义了提交按钮，eg：

16.HTML框架

(1)iframe语法：

(2)设置高度与宽度：height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)，eg：

(3)移除边框：frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框

(4)使用iframe显示目标链接网页：iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性eg：

17.HTML颜色

(1)HTML颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF

(2)不同颜色有不同的颜色名和颜色值，需要时可查表

18.HTML脚本

(3)内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性