【HTML 往日冒险 01】标签元素属性注释文本格式化颜色 CSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了【HTML 往日冒险 01】标签元素属性注释文本格式化颜色 CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

说在前面

HTML 对于现在的我来说，熟悉又陌生，熟悉的是其标签的结构清晰，陌生的是其丰富的使用细节，长期不使用难免会失去许多相关的记忆，但是不妨让我们与W3school教程一同补全往日的冒险日志…(主要是从中提炼关键的信息，具体的知识点还是参考相关手册)

重新开始

HTML 描述网页的超文本标记语言

网页就是HTML文档，包含HTML tag 和纯文本

Web浏览器使用标签解释读取的HTML文档并以网页形式展示

基础标签 basic

标题 Heading
段落 Paragraph
链接 anchor
图像 Image

<h1> - <h6>
<p>
<a>
<img>

元素 elements

HTML元素是从opening tag到closing tag的所有代码
start tag与end tag之间的内容是元素内容，部分HTML元素具有empty content
空元素在start tag中关闭
标签定义换行

属性 attributes

tag可以拥有属性，从而表达更多信息
属性always通过名/值对的形式出现 name=“value”
并且always在元素的start tag中定义

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

<h1 align="center"> 对齐方式 </h1>

<body bgcolor="yellow"> HTML文档主体背景颜色 </body>

<table border="1"> 表格边框 </table>

我们始终为属性值增加双引号，若属性值本身含有双引号则必须改用单引号 name=‘Zane “hello” Zhao’

HTML元素合法属性完整手册

HTML全局属性是所有元素共同使用的

属性	值	描述
class	classname	规定元素一或多个classname
id	id	规定元素唯一id
style	style_definition	规定元素inline css style
title	text	规定元素额外信息

更多全局属性手册

标题，水平线以及注释 headings

Heading
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后
我们需要确保heading tag值用于标题，搜索引擎使用标题为网页的结构和内容编制索引

<hr /> 标签 在HTML页面中创建水平线，用于分隔内容

提高HTML代码可读性 <!-- This is a comment -->

单击右键，然后选择查看源文件或查看页面源代码等，这么做会打开一个包含页面 HTML 代码的窗口
比如说Mooc的主页(Firefox) 【HTML 往日冒险 01】标签元素属性注释文本格式化颜色 CSS

段落与折行 paragraphs

通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法
清楚地标记某个元素在何处开始，并在何处结束，不论对我们还是对浏览器来说，都会使代码更容易理解

不使用空的段落标记 <p></p> 去插入一个空行用，而是 <br /> 标签代替它，同时若要在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签

<p> This is <br /> a para <br /> graph with line breaks </p>

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果
因此无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行。紧靠标签的空格或连续的空格或空行或连续的回车换行都会被算作一个空格

样式 html_styles

HTML的 style 属性提供了一种改变所有 HTML 元素样式的通用方法
在 HTML 4 中，有若干的标签和属性是被废弃的 (Deprecated)，需要避免使用

标签	描述
< center >	定义居中内容
< font > and < basefont >	定义html字体
< s > and < strike >	定义删除线文本删除字< del >< /del >
< u >	定义下划线文本插入字< ins >< /ins >

属性	描述
align	定义文本对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

对于以上这些标签和属性，现在使用 style 属性代替

背景颜色 background-color
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph</p>

字体颜色与尺寸 font-family  color  font-size
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px">A para.</p>

文本对齐 text-align
<h1 style="text-align:center">This is a  heading</h1>
<p> The heading above is aligned to the center of this page.</p>

文本格式化 formatting

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字等
1. 文本格式化 <b> <strong> <big> <em> <i> <small> <sub> <sup>
2. 预格式文本 pre标签控制空格与空行 <pre> 适合显示代码
3. 计算机输出 <code> <kbd> <tt> <samp> <var>
4. 地址 <address>
5. 缩写 <abbr> <acronym> 自定义缩写
6. 文字方向 <bdo dir="rtl"> bi-directional override 双流向覆盖
7. 块引用quotation <blockquote> <q>
8. 删除字与插入字 <del> <ins>
9. 定义项目 <dfn>
10.著作标题 <cite> 浏览器通常以斜体显示

具体W3school文本格式化实例

注释 comments

注释对于 HTML 纠错也大有帮助，因为可以注释 HTML 代码，以搜索错误

条件注释定义只有 Internet Explorer 执行的 HTML 标签
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

各种 HTML 软件程序也能够生成 HTML 注释
例如 <!--webbot bot--> 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中

颜色 colors

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）
每种颜色的最小值是 0（十六进制：#00）最大值是 255（十六进制：#FF）
【HTML 往日冒险 01】标签元素属性注释文本格式化颜色 CSS 仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
如果需要使用其它的颜色，需要使用十六进制的颜色值

CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化

外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
并且我们可以通过更改一个文件来改变整个站点的外观
在 head 部分通过标签定义内部样式表
link 定义资源引用
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表
在 head 部分通过文章来源地址https://www.toymoban.com/news/detail-464662.html

外部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>