Fork me on GitHub

HTML学习笔记

HTML概述

　　HTML(HyperText Markup language,超文本标记语言) 是用来描述网页的一种语言，包括“头”部分（外语：Head）、和“主体”部分（外语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML标签
　　HTML文档是由HTML元素组成的文本文件，HTML元素是预定义的正在使用的HTML标签。HTML标签通常成对出现，比如<b>和</b>。一对标签的前面一个是开始标签，第二个是结束标签，在开始和结束标签之间的文本是元素内容。HTML标签是大小写无关的，<b>跟<B>表示的意思是一样的。

  • <!-- This is a comment --> 注释标签
  • <html>和</html>标签标志HTML文档的开始和终止
  • <head>和</head>标签之间文本的是头信息，在浏览器窗口中头信息是不被显示的
  • <title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏
  • <body>和</body>标签之间的文本是正文，会被显示在浏览器中
  • <h1>到<h6>标签标示标题元素，<h1>定义了最大的标题元素，<h6>定义了最小的。HTML自动在一个标题元素前后各添加一个空行。
  • <p>和</p>定义段落，HTML自动在一个段落前后各添加一个空行。
  • <br>标签不管放在什么位置，都能够强制换行。<br>标签是一个空标签，它没有结束标记。
  • <hr>标签标示水平线
  • <b>和</b>标签之间的文本会以加粗字体显示

标签属性
　　标签属性能为页面上的HTML元素提供附加信息，通常是附加给HTML元素的开始标签的，由属性名和值成对出现，就像这样：name="value"。属性值应该被包含在引号中，双引号是最常用的，但是单引号也可以使用。在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了，比如：name='John "ShotGun" Nelson'。例如，标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：<body bgcolor="red">。

字符实体
　　在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）；想要在HTML文档中显示一个小于号，我们必须这样写：&lt;或者&#60;注意：实体名是大小写敏感的。在HTML中，最常见的字符实体就是不可拆分空格。通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：&nbsp;。

HTML链接
　　标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。使用target属性，你可以定义从什么地方打开链接地址，下面这段代码打开一个新的浏览器窗口来打开链接：<a href="http://www.baidu.com" target="_blank">baidu</a></p>。name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。想要直接链接到“tips”章节的话，在URL地址的后面加一个“#”和这个锚的名字，就像这样：<a name="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>；一个链接到本页面中某章节的命名锚是这样写的：<a name="#tips">Jump to the Useful Tips Section</a>。

HTML框架
　　使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。使用框架的不利因素有：网站开发者需要关心更多HTML文档的情况；打印整个页面变得困难。
　　frameset标签：<frameset>标签定义了如何将窗口拆分成框架；每个frameset标签定义了一组行和列；行/列的值指明了每个行/列在屏幕上所占的大小。
　　frame标签：<frame>标签定义了每个框架中放入什么文件。如果不想让用户改变大小，可以在<frame>标签中加入：noresize="noresize"。

HTML表格
　　<table> 标签定义 HTML 表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成，tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（TableData），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。如果不指定border属性，表格将不显示边框。有时候这很有用，但是多数时候我们希望显示边框。可以在空单元格里加入不可分空格来占位，这样边框能正常显示。使用“&nbsp;”来支撑没有内容的单元格。

HTML表单
　　表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。表单是用<form>元素定义的。

HTML图像
　　在HTML里面，图像是由<img>标签定义的。<img>是空标签，即只拥有属性，而没有结束标签。想要在页面上显示一个图像，需要使用src属性。“src”表示“源”的意思。src属性的值是所要显示图像的URL。alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。alt属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且，对纯文本浏览器很有用。

HTML背景
　　<body>标签有两个属性可以指定背景。背景可以是颜色，也可以是图像。

　　bgcolor属性将背景设置为颜色，它的值可以是一个十六进制数、RGB值或者一种颜色名称。上面三条语句都可以把页面背景设置成黑色。

  • <body bgcolor="#000000">
  • <body bgcolor="rgb(0,0,0)">
  • <body bgcolor="black">

　　background属性将背景设置为图像，它的值是你所要使用图像的URL地址（相对地址或绝对地址）。如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。

  • <body background="clouds.gif">
  • <body background="http://www.w3schools.com/clouds.gif">

　　<body>标签的bgcolor、background和text属性在最新的HTML标准（HTML4和XHTML）中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中，层叠样式表（CSS）将被用来定义HTML元素的布局和显示属性。一般的网站很少使用背景图像。最常用的背景颜色是黑色、白色和灰色。

HTML编辑器

  • 记事本：用记事本编辑HTML，编辑完后保存为.html或.htm格式即可，再用浏览器查看显示效果
  • 在线HTML编辑器
  • Eclipse

　　在线HTML编辑器KindEditor：KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

posted @ 2014-10-07 17:49  晨光iABC  阅读(221)  评论(0)  编辑  收藏  举报