本文档介绍了HTML的基础知识，包括HTML文档结构、标签、属性及其用途。讲解了网页内容如标题、段落、链接、图像的表示方法，以及文本格式化标签，如粗体、斜体、引用等。此外，还提到了HTML样式、注释和颜色的使用，以及一些已过时的标签。内容涵盖了HTML元素嵌套、属性定义和文本方向控制。
HTML文档=网页
- HTML文档描述网页，也称为网页，包含HTML标签和纯文本
- Web浏览器的作用就是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。
- <html>与</html>之间的文本描述网页
- <body>与</body>之间的文本是可见的页面内容
- <h1>与</h1>是标题，heading，从<h1>~<h6>
- <p>与是段落，paragraph
- <a href=“http://www.baidu.com”>This is a link</a>
- <img src=“hello.jpg” width=“120” height=“150” />
HTML 基础
HTML元素
- 大多数HTML元素可以嵌套
- <br>定义换行
- 大小写不敏感，推荐小写
HTML属性
- 属性为元素的附加信息
- 属性总是以名称=值对的形式出现
- 属性总是在开始标签中规定
- 例子：
- <h1 align=“center”> 对齐
- <body bgcolor=“yellow”>背景颜色
- <table border=“1”>表格边框
- 适用于大多数HTML元素的属性
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名(classname) |
| id | id | 规定元素的唯一id |
| style | style_definition | 规定元素的行内样式(inline style) |
| title | text | 规定元素的额外信息(可在工具提示中显示) |
HTML标题
- 标题很重要
- 浏览器会自动在标题前后添加空行
- 默认HTML会在块儿及元素前后添加空行，比如段落、标题。
- 不要仅为了产生粗体就是用标题
- <hr />标签在HTML创建水平线
- <!-- This is a comment -->注释
HTML段落
- 是用空段落插入一个空行是坏习惯
- <br />换行
- 注意，所有连续空格和空行都算作一个空格
HTML样式
- style属性用于改变HTML元素的样式
- 避免是用下面标签和属性。是用样式来代替
| 标签 | 描述 |
|---|---|
| <center> | 居中 |
| <font>和<basefont> | 字体 |
| <s>和<strike> | 删除线文本 |
| <u> | 下划线文本 |
| 属性 | 描述 |
|---|---|
| align | 文本对齐方式 |
| bgcolor | 背景颜色 |
| color | 文本颜色 |
- 例子
- <p style=“background-color:green”></p>
- <p style=“font-family:arial;color:red;font-size:20px;”>A paragraph.</p>字体系列，颜色，尺寸
- <h1 style=“text-align:center”>This is a heading</h1>
HTML 文本格式化
- 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。bold |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。emphasize |
| <i> | 定义斜体字。italics |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
- 计算机输出标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <tt> | 定义打字机代码 |
| <var> | 定义变量 |
| <pre> | 定义与格式文本 |
- 引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <acronym> | 定义首字母缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目 |
HTML引用
- <q>定义短的已用
- <p>WWF的目标是：<q>构建人与自然和谐共存世界</q></p>
- <blockquote>定义被引用的节，浏览器会对元素进行缩进处理
- <blockquote cite=“http://www.worldwildlife.org/who/index.html”>五十年</blockquote>
- <abbr>定义缩写或首字符缩略词
- <p><abbr title=“World Health Organization”>WHO</abbr>成立于1948年。</p>
- <dfn>定义项目或缩写的定义
- 设置了<dfn>元素的title属性
- <p><dfn title=“World Health Organization”>WHO<dfn>成立于1948年。</p>
- <dfn>包含具有标题的<abbr>
- <p><dfn><abbr title=“World Health Organization”>WHO</abbr></dfn>成立于1948年。</p>
- <dfn>文本内容即是项目且父元素包含定义。
- <p><dfn>WHO</dfn>World Health Organization成立于1948年。</p>
- <address>用于定义联系信息
- <address>Written by Donald Duck.<\address>
- <cite>定义著作的标题
- <p><cite>The Scream</cite>by Edward Munch.Painted in 1893.</p>
- <bdo>定义双流向覆盖
- <bdo dir=“rtl”>This text will be written from right to left</bdo>
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写或首字母缩略语。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <bdo> | 定义文本方向。 |
| <blockquote> | 定义从其他来源引用的节。 |
| <dfn> | 定义项目或缩略词的定义。 |
| <q> | 定义短的行内引用。 |
| <cite> | 定义著作的标题。 |
HTML计算机代码元素
- <kbd>，<samp>，<code>支持固定的字母尺寸和间距。
- <kbd>定义键盘输入
- <p><kdb>File | Open…</kbd></p>
- <samp>定义计算机输出
- <code>var person={firstName:“Bill”,age:50}
- code元素不保留多余的空格和折行
- 如需解决，需要使用<pre></pre>
- <code><pre>var person={}<\pre></code>
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码文本 |
| <kbd> | 定义键盘文本 |
| <samp> | 定义计算机代码示例 |
| <var> | 定义变量 |
| <pre> | 定义预格式化文本 |
- <p><var>E = mc2</var></p>
注释
- <!-- 在此处写注释 -->
- < !-- 这是一段注释 --><p>这是一个段落</p><!-- 记得此处添加信息 -->
- <!-- 此刻不显示图片：<img border=“0” src="/i/tuli
HTML颜色
- 红绿蓝组成，十六进制符号定义，RGB，0~255
- 黑：#000000，红：#FF0000，绿：#00FF00，蓝：#0000FF，黄：#FFFF00，白：#FFFFFF
扫一扫
2510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
