HTML 学习笔记个人日记

HTML 学习笔记

个人日记

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

HTML 的标题《Heading》通过 <h>-</h> 等标签进行定义
HTML的段落通过 <p>-</p> 标签进行定义
HTML的链接通过 <a> 标签进行定义：例： <a href="http://www.baidu.com"> 这是百度网址链接</a>
HTML的图像通过<img> 标签进行定义：例：<img src="图片名称.jpg" width="104" height="142" / >

HTML 元素
元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码

开始标签	元素内容	结束标签
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />

注释：开始标签常备称为开放标签（opening tag） ,结束标签常被称为闭合标签（closing tag）.

HTML 元素语法
元素是以开始标签起始，以结束标签终止
元素内容是开始标签与结束标签之间的内容
某些元素具有空内容（empty content）,空元素在开始标签中关闭（以开始标签的结束而结束）
大多数的元素可拥有属性

空的元素关闭：虽然所有浏览器支持 <br> 的写法（标签定义换行），但是还是最好写成 <br/>

HTML标签对大小写不敏感，但万维网联盟（W3C）推荐使用小写，而未来的版本中将强制使用小写。

元素的属性：
HTML标签可以拥有属性，属性提供了有关元素的更多的信息。
属性总是以名称/值的形式出现,比如 : name="value"
属性总是在元素的开始标签中赋值

例：链接由<a> 标签定义，链接的地址是将 href 属性赋值
<a href="http://www.baidu.com" > 这是百度链接</a>

更多的常用属性：
<h1> 定义标题的开始
<h1 align="center"> 拥有关于对齐方式的属性赋值： center 将标题居中显示

<body> 定义HTML文档的主体
<body bgcolor="yellow"> 背景颜色的属性赋值，背景设置为黄色

<table> 定义HTML 表格
<table boeder ="1"> 设置表格边框显示的属性

说明：属性值必须包含在引号内，一般单引号也可以，
但是如果属性值内含有双引号，则外面必须使用单引号

下面列出了适用于大多数 HTML 元素的属性：

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

HTML标题
标题（heading）是通过<h1> -<h6>等标签进行定义
<h1> 定义最大的标题，<h6>定义最小的标题。
浏览器会自动的在标题的前后添加空行
默认情况下，HTML会自动的在块级元素前后添加一个额外的空行，比如段落、标题元素前后

标题很重要：
确保 HTML  heading 标签只用于标题，不要仅仅为了产生粗体和较大号的文本而使用标题。
搜索引擎使用标题为网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（）最重要的，其后是 h2，再依次是 h3，以此类推。

HTML水平线
<hr /> 可以在HTML页面中创建水平线
hr元素可以用于分割内容

HTML 注释
可以将注释插入在代码中，提高代码的可读性，浏览器会忽略它们
注释实例：


注释：开始括号之后要跟一个叹号，结束括号之前不需要

HTML 提示- 如何查看源代码
单击右键，选择 “查看源文件” （IE浏览器）或 "查看页面源代码” （火狐浏览器）其他的浏览器类似
这么做会打开一个包含页面 HTML代码的窗口。

HTML 段落
段落是通过 <p> 标签定义（<p> 是块级元素，浏览器会在段落的前后增加空行）
用段落标记<p></p> 去插入一个空行是个坏习惯，
    用<br /> 换行。。。，不要用<br /> 创建列表

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签
<br /> 元素是一个空的HTML元素，由于关闭标签没有意义，所以它没有关闭标签。

HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

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

<pre>..这时代码排版保留的标签。。。</pre>
<pre> 标签将保留代码中的排版：空格、换行等等。。。。

<b> 这里的字体加粗</b>

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

“计算机输出”标签

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

引用、引用和术语定义

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

当浏览器读到样式表，将会按照这个样式表对文档进行格式化，有一下三种方法来插入样式表：
1.外部样式表
      当样式需要被应用到很多页面的时候，外部样式表是理想的选择，使用外部样式表，可以通过一个文件来改变整个站点的外观。
      <head>
      <link rel="stylesheet"   type="text/css" href="mystyle.css">
        </head>

2.内部样式表
      当单个文件需要特别样式时，就可以使用内部样式表，可以在<head>部分通过<style>标签定义内部样式表。
      <head>
      <style type="text / css">
          body {background-color:red }
          p{margin-left:20px}
      </style>
        </head>

3.内联样式
      当特使的样式需要应用到个别元素时，就可以使用内联样式。
      使用内联样式的方法是在相关的标签中使用样式属性
      样式属性可以包含任何CSS属性，以下的实例是改变段落的颜色和左外边距。
<p style="color:red; margin-left:20px">
          这是一个样式例子
      </p>

标签	描述
<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

图像标签 <img> 和源属性 ( src )
在HTML中，图像由 <img> 标签定义。
<img> 是空标签，也就是说，它只包含属性，没有闭合标签。
要在页面上显示图像，需要指定源属性- src , src 指 “source” .源属性的值是图像的URL地址。
定义图像的语法是：
      <img src="url" />
url 指的是存储图像的位置，如果名为“图片1.jpg” 的图像位于 www.baidu.com 的 imges 目录中,那么该图片的URL为：
          http://www.baidu.com/imges/图片1.jpg

      替换文本属性 - alt
      alt 属性用来为图像定义一串预备的可替换的文本，当图片无法显示时，将显示替换文本，对于使用纯文本浏览器的用户来说非常好
      语法：
              <img src="图片.jpg" alt = " 图片无法显示">

      注意：假如某HTML文档包含10个图片，那么为了显示这个页面，将加载11个文件，加载图片是需要时间的，所以慎用图片。

标签	描述
<img>	定义图像。
<map>	定义图像地图。
<area>	定义图像地图中的可点击区域。

表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

      大多数HTML元素被定义为块级元素或内联元素
          块级元素： block level element
      内联元素：inline element

    块级元素：在浏览器中显示时，通常会以新行来开始（和结束）
例：<h1>, <p>,<ul>,<table>

内联元素：在显示时，通常不会以新行开始。
例:<b>,<td>,<a>,<img>

<div> 元素
          div 元素是块级元素，它是可用于组合其他HTML元素的容器
          div 元素没有特定的定义，由于它属于块级元素，所以会在它前后换行
      div 可以和 CSS 一起使用，<div> 可用于对大的内容块设置样式属性
      div的另一常见的用法是文档布局，它取代了使用表格定义布局的老式方法，使用<table>元素定义文档布局不科学，<table>的作用是显示表格化的数据。


<span>元素
span 是内联元素，可用作文本的容器。
span元素没有特定的含义，
当于CSS一起使用，<span>可用于为部分文本设置样式属性

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 span，用来组合文档中的行内元素。

表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮

标签描述<iframe> 定义内联的子窗口（框架）：网页内显示网页--子窗口

<body>标签的属性定义背景色背景图片等。。

吹口哨的林田惠