HTML学习笔记1

概览与综述

基本形式

 
 
 
     
     
 
 
    
我的第一个标题
 
    
我的第一个段落。
 
 

解释:

• DOCTYPE 声明了文档类型
• 位于标签 描述了文档附加信息
• 位于标签 为可视化网页内容
• 位于标签
  作为一个标题使用
• 位于标签
  作为一个段落显示

中文编码

常用的方法为设置编码方式为utf-8以显示中文，但注意在编辑Html文件的时候，需要把编码格式保存为UTF-8(默认会保存ANSI)，才可以正常显示。

第二个方法可以指定编码格式为gb2312以支持汉字，但通用性较差。

常用的4个标签

• 标题

This is a heading
This is a heading

• 段落

This is a paragraph.
This is another paragraph.

• 链接

This is a link

• 图像

元素

HTML 元素通常有两种方式：

• 写入一个<>内:此类元素无法包含内容和其他元素。

<标签 [属性...] />

• 以开始标签和结束标签限定，可以包含内容和其他元素。

<标签 [属性...]>[内容...]
This is a paragraph.

其中，属性或内容可以为空。例如换行：

属性

属性通常为某属性=“值”的形式，可以使用单引号或双引号。但要注意在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如name='Bill "HelloWorld" Gates'

元素和属性可以有重名的时候，例如title作为元素是页面名称，作为属性是注释信息；style作为元素指定该页面所有元素的样式，作为属性指定个别元素的样式。

简单的层次与布局

标题

标题（Heading）是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

This is a heading

注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

水平线

---

标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

This is a paragraph

This is a paragraph

This is a paragraph

注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

段落

段落是通过

标签定义的。

This is a paragraph
This is another paragraph

注释：浏览器会自动地在段落的前后添加空行。（

是块级元素）
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

文本格式化

常用文本格式化

加粗字体
强调字体（视觉效果同加粗）
斜体
强调字体（视觉效果同斜体）
比周围大一号字体(已淘汰)
比周围小一号字体
下标
上标
删除线
下划线

预保留格式文本

与保留格式文本可以忠实地表现缩进，空格，换行等格式上的内容。

for i = 1 to 10
     print i
next i

“计算机输出”标签

该部分用于指定字体样式来表现不同的计算机代码或输出。

Computer code 代码
Keyboard input 键盘输入
Teletype text 打字机字体
Sample text 代码样本
Computer variable 变量

注意，不会保留多余的空格和空行,必要时配合预保留格式文本使用。

其它内置格式

• 定义地址。指定文字的字体表示地址(通常为斜体)：

Written by TOM. 

• 定义书写方向。以下可以改变文字的书写方向为从右向左(需浏览器支持)：

Here is some Hebrew text

• 定义引用。引用分为长引用和短引用。使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现，仅添加双引号。

这是长的引用。


这是短的引用。

• 定义缩写（需浏览器支持）

etc.

WWW

WHO

这样，当指针移至元素上面时，会显示出title的内容。

• 定义著作标题

The Scream

样式

CSS简述

我们使用style来完成对CSS的设定。常见的用法如下：

1. 内联样式：设置特定的元素样式
   这种方法通过设置某些元素的style属性来完成。

This is a paragraph

2. 内部样式表：设置整个页面文件的样式
可以在 head 部分通过

   3.外部样式表:引用一个固定的样式表
   通过引用可以统一多个页面的样式,链接的主体是一个css文件。

   常用的内联样式

   HTML 样式实例 - 背景颜色

   background-color 属性为元素定义了背景颜色：

   
   
     
   This is a heading
     
   This is a paragraph.
   
   
   

   style 属性淘汰了“旧的” bgcolor 属性。

   HTML 样式实例 - 字体、颜色和尺寸

   font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸（多个描述之间用分号隔开）：

   
   
     
   A heading
     
   A paragraph.
   
   

   style 属性淘汰了旧的 标签。

   HTML 样式实例 - 文本对齐

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

   
   
     
   This is a heading
     
   The heading above is aligned to the center of this page.
   
   
   

   style 属性淘汰了旧的 "align" 属性。

   头部

   头部指的是包围的部分，往往不会直接显示在网页内容里，但包含了网页的重要信息。

   title

base

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

link

标签定义了文档与外部资源之间的关系。通常用于链接到样式表:

style

在

meta

meta标签描述了一些基本的元数据。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

• 为搜索引擎定义关键词:
  
• 为网页定义描述内容:
  
• 定义网页作者:
  
• 每30秒中刷新当前页面:
  
  一个网页可以出现多个meta标签。

script

script标签用于加载脚本文件，如： JavaScript。具体详见稍后章节。