HTML基础学习笔记(一)

简介

基本形式

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>文档title</title>

</head>

<body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

</body>

</html>

解释:

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

中文编码

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

<meta charset="utf-8">

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

基本的4个标签

标题

<h1>This is a heading</h1>

<h2>This is a heading</h2>

段落

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

链接

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

图像

<img src="w3school.jpg" width="104" height="142" />

元素

HTML 元素通常有两种方式：

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

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

<img src="w3school.jpg" width="104" height="142" />

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

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

<p>This is a paragraph.</p>

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

<br />

属性

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

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

标题

HTML 标题

标题（Heading）是通过<h1> - <h6>等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>

注释：浏览器会自动地在标题的前后添加空行。

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

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

HTML 注释

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

<!-- This is a comment -->

段落

块

定义文档中的节或区域（块级）。

<div style="color:#00FF00">

  <h3>This is a header</h3>

  <p>This is a paragraph.</p>

</div>

小块

定义文档中的行内的小块或区域。

<p>

我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。

</p>

段落

段落是通过 <p> 标签定义的。

<p>This is a paragraph</p>

<p>This is another paragraph</p>

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

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

文本格式化

常用文本格式化

<b>加粗字体</b>

<strong>强调字体（视觉效果同加粗）</strong>

<i>斜体</i>

<em>强调字体（视觉效果同斜体）</em>

<big>比周围大一号字体(已淘汰)</big>

<small>比周围小一号字体</small>

<sub>下标</sub>

<sup>上标</sup>

<del>删除线</del>

<ins>下划线</ins>

预保留格式文本

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

<pre>

for i = 1 to 10

     print i

next i

</pre>

“计算机输出”标签

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

<code>Computer code 代码</code>

<kbd>Keyboard input 键盘输入</kbd>

<tt>Teletype text 打字机字体</tt>

<samp>Sample text 代码样本</samp>

<var>Computer variable 变量</var>

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

其它内置格式

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

<address>

Written by TOM.

</address>

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

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

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

<blockquote>

这是长的引用。

</blockquote>

<q>

这是短的引用。

</q>

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

<!-- 缩写 -->

<abbr title="etcetera">etc.</abbr>

<!-- 首字母缩写 -->

<acronym title="World Wide Web">WWW</acronym>

<!--- dfn -->

<dfn title="World Health Organization">WHO</dfn>

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

定义著作标题

<cite>The Scream</cite>

样式

style 属性用于改变 HTML 元素的样式。

HTML 样式实例 - 背景颜色

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

<html>

<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>

</body>

</html>

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

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

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

<html>

<body>

  <h1 style="font-family:verdana">A heading</h1>

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

</html>

style 属性淘汰了旧的标签。

HTML 样式实例 - 文本对齐

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

<html>

<body>

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

  <p>The heading above is aligned to the center of this page.</p>

</body>

</html>

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

CSS简述

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

内联样式：设置特定的元素样式

这种方法通过设置某些元素的style属性来完成。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

内部样式表：设置整个页面文件的样式

可以在 head 部分通过 body { background-color: rgba(255, 0, 0, 1) }
p { margin-left: 20px }
body { background-color: rgba(255, 255, 0, 1) }
p { color: rgba(0, 0, 255, 1) }