欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML学习笔记

程序员文章站 2022-03-13 07:55:36
1.当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。 2.
换行
水平线 3.拥有动画效果的下拉菜单 ......

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

基础

一.简介

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

二.编译器

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

三.组成

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 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

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

属性参考手册

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

六.标题

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

七.段落

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

八.样式

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

<body style="background-color:yellow">

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.预格式文本，可以很好的保存空格和换行

<pre>+</pre>

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.删除和下划线

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<!--del删除，ins下划线-->

9.文本格式化标签表

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。

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

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。

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

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

本文地址：https://blog.csdn.net/qq_50216270/article/details/112475346

相关标签： HTML

上一篇： 通用媒体播放器（5.5更新）

下一篇： 5G学习笔记之NGAP

推荐阅读