HTML学习笔记

骑猪看日落 2021-09-07 06:02 693阅读 0赞

> 学习网站https://www.w3school.com.cn/h.asp  
> 持续学习，持续更新

### 文章目录 ###

*  基础
 *   *  一.简介
     *  二.编译器
     *  三.骨架
     *  四.元素
     *  五.属性
     *  六.标题
     *  七.段落
     *  八.样式
     *  九.格式化
     *  十.链接
     *  十一.图像
     *  十二.表格
     *  十三.列表

# 基础 #

## 一.简介 ##

1.HTML是一种超文本标记语言，标记标签来描述网页，不是编程语音。  
2.HTML标签：尖括号关键词，成对出现，分为开始标签和结束标签（开发标签和闭合标签）。  
3.HTML文档=网页： Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

## 二.编译器 ##

1.使用 Notepad 或 TextEdit 来编写 HTML。  
2.记事本更改后缀txt->html。  
3.Hbuild

## 三.骨架 ##

1.标题：<h1>+</h1>  
2.段落：<p>+</p>  
3.链接：<a>+</a>  
4.图像：<img>  
eg:

<html>
    <body>
    <h1>标题</h1>
    <p>段落</p>
    <img src="w3school.jpg" width="104" height="142" />
    图像的名称和尺寸是以属性的形式提供的。
    </body>
    </heml>

## 四.元素 ##

1.HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。  
2.大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。  
3.<p> 元素定义了 HTML 文档中的一个段落。  
4.<body> 元素定义了 HTML 文档的主体。  
5.<html> 元素定义了整个 HTML 文档。  
6.在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。  
7.即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

<html>
    <body>
    <p>This is my first paragraph.</p>
    </body>
    </html>

## 五.属性 ##

1.HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。  
2.属性总是以名称/值对的形式出现，比如：name=“value”。  
3.属性总是在 HTML 元素的开始标签中规定。  
4. 属性例子 1:  
<h1> 定义标题的开始。  
<h1 align=“center”> 拥有关于对齐方式的附加信息。  
5.属性例子 2:  
<body> 定义 HTML 文档的主体。  
<body bgcolor=“yellow”> 拥有关于背景颜色的附加信息。  
<table> 定义 HTML 表格。

拥有关于表格边框的附加信息。

**属性参考手册**

> https://www.w3school.com.cn/tags/index.asp

## 六.标题 ##

1.标题是网站的索引，h1–h6分别表示一级标题到六级标题  
2.水平线<hr/>可以用于分割内容  
3.注释方式  
``

## 七.段落 ##

1.<p>是块级元素，浏览器会自动在后面添加空行  
2.不要使用 <p></p> 去插入一个空行，用<br/>代替  
3.不要忘记结束标签  
4.未来的HTML版本中不允许使用时没有结束标签，<br/>比<br>更有保障  
5.浏览器会移除源代码中多余的空格和换行，连续的空格和换行只会视作一个空格

## 八.样式 ##

1.style 属性用于改变 HTML 元素的样式。  
2.background-color 属性为元素定义了背景颜色。

3.font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体。

<h1 style="font-family:verdana">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

4.text-align 属性规定了元素中文本的水平对齐方式。

<h1 style="text-align:center">This is a heading</h1>

## 九.格式化 ##

1.文本格式化标签包括：

<b>This text is bold</b>
    <br />
    <strong>This text is strong</strong>
    <br />
    <big>This text is big</big>
    <br />
    <em>This text is emphasized</em>
    <br />
    <i>This text is italic</i>
    <br />
    <small>This text is small</small>
    <br />
    This text contains
    <sub>subscript</sub>
    <br />
    This text contains
    <sup>superscript</sup>

2.预格式文本，可以很好的保存空格和换行

3.计算机输出标签

<code>Computer code</code>
    <br />
    <kbd>Keyboard input</kbd>
    <br />
    <tt>Teletype text</tt>
    <br />
    <samp>Sample text</samp>
    <br />
    <var>Computer variable</var>
    <br />

4.地址标签：

<address>
    Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
    </address>

5.缩进标签：

<abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="World Wide Web">WWW</acronym>
    <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

6.文字方向：

<p>
    如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
    </p>
    <bdo dir="rtl">
    Here is some Hebrew text
    </bdo>

7.块引用：

这是长的引用：
    <blockquote>
    这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
    </blockquote>
    这是短的引用：
    <q>
    这是短的引用。
    </q>

8.删除和下划线

9.文本格式化标签表

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;b&gt;</td> 
   <td>定义粗体文本。</td> 
  </tr> 
  <tr> 
   <td>&lt;big&gt;</td> 
   <td>定义大号字。</td> 
  </tr> 
  <tr> 
   <td>&lt;em&gt;</td> 
   <td>定义着重文字。</td> 
  </tr> 
  <tr> 
   <td>&lt;i&gt;</td> 
   <td>定义斜体字。</td> 
  </tr> 
  <tr> 
   <td>&lt;small&gt;</td> 
   <td>定义小号字。</td> 
  </tr> 
  <tr> 
   <td>&lt;strong&gt;</td> 
   <td>定义加重语气。</td> 
  </tr> 
  <tr> 
   <td>&lt;sub&gt;</td> 
   <td>定义下标字。</td> 
  </tr> 
  <tr> 
   <td>&lt;sup&gt;</td> 
   <td>定义上标字。</td> 
  </tr> 
  <tr> 
   <td>&lt;ins&gt;</td> 
   <td>定义插入字。</td> 
  </tr> 
  <tr> 
   <td>&lt;del&gt;</td> 
   <td>定义删除字。</td> 
  </tr> 
 </tbody> 
</table>

10.“计算机输出”标签表

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;code&gt;</td> 
   <td>定义计算机代码。</td> 
  </tr> 
  <tr> 
   <td>&lt;kbd&gt;</td> 
   <td>定义键盘码。</td> 
  </tr> 
  <tr> 
   <td>&lt;samp&gt;</td> 
   <td>定义计算机代码样本。</td> 
  </tr> 
  <tr> 
   <td>&lt;tt&gt;</td> 
   <td>定义打字机代码。</td> 
  </tr> 
  <tr> 
   <td>&lt;var&gt;</td> 
   <td>定义变量。</td> 
  </tr> 
  <tr> 
   <td>&lt;pre&gt;</td> 
   <td>定义预格式文本。</td> 
  </tr> 
 </tbody> 
</table>

11.引用、引用和术语定义表

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;abbr&gt;</td> 
   <td>定义缩写。</td> 
  </tr> 
  <tr> 
   <td>&lt;acronym&gt;</td> 
   <td>定义首字母缩写。</td> 
  </tr> 
  <tr> 
   <td>&lt;address&gt;</td> 
   <td>定义地址。</td> 
  </tr> 
  <tr> 
   <td>&lt;bdo&gt;</td> 
   <td>定义文字方向。</td> 
  </tr> 
  <tr> 
   <td>&lt;blockquote&gt;</td> 
   <td>定义长的引用。</td> 
  </tr> 
  <tr> 
   <td>&lt;q&gt;</td> 
   <td>定义短的引用语。</td> 
  </tr> 
  <tr> 
   <td>&lt;cite&gt;</td> 
   <td>定义引用、引证。</td> 
  </tr> 
  <tr> 
   <td>&lt;dfn&gt;</td> 
   <td>定义一个定义项目。</td> 
  </tr> 
 </tbody> 
</table>

## 十.链接 ##

1.链接语法：Link text  
2.Target 属性可以定义被链接的文档在何处显示

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
    <--新窗口显示-->

1.  锚，name 属性创建 HTML 页面中的书签，然后链接过去。

<a name="label">锚（显示在页面上的文本）</a>

## 十一.图像 ##

1.格式![Image 1][]  
2.alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

## 十二.表格 ##

1.表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

<table> 
 <tbody> 
  <tr> 
   <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</td> 
  </tr> 
 </tbody> 
</table>

2.border属性定义边框

1.  标签进行定义。定义表头

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

**表格标签**

<table> 
 <thead> 
  <tr> 
   <th>表格</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;table&gt;</td> 
   <td>定义表格</td> 
  </tr> 
  <tr> 
   <td>&lt;caption&gt;</td> 
   <td>定义表格标题。</td> 
  </tr> 
  <tr> 
   <td>&lt;th&gt;</td> 
   <td>定义表格的表头。</td> 
  </tr> 
  <tr> 
   <td>&lt;tr&gt;</td> 
   <td>定义表格的行。</td> 
  </tr> 
  <tr> 
   <td>&lt;td&gt;</td> 
   <td>定义表格单元。</td> 
  </tr> 
  <tr> 
   <td>&lt;thead&gt;</td> 
   <td>定义表格的页眉。</td> 
  </tr> 
  <tr> 
   <td>&lt;tbody&gt;</td> 
   <td>定义表格的主体。</td> 
  </tr> 
  <tr> 
   <td>&lt;tfoot&gt;</td> 
   <td>定义表格的页脚。</td> 
  </tr> 
  <tr> 
   <td>&lt;col&gt;</td> 
   <td>定义用于表格列的属性。</td> 
  </tr> 
  <tr> 
   <td>&lt;colgroup&gt;</td> 
   <td>定义表格列的组。</td> 
  </tr> 
 </tbody> 
</table>

## 十三.列表 ##

[Image 1]: