HTML入门知识点笔记

原 作者 贺含悦 | 发表于 | 分类于 2016级

HTML概述

HTML的基本概念

  • HTML是Hyper Text Markup Language（超文本标记）的缩写。
  • HTML不是一种编程语言，而是一种描述性的标记语言。
  • 一个HTML文件名的后缀是.html或.htm。
  • HTML的主要功能：
    （1）格式化文本
    （2）创建列表
    （3）建立表格
    （4）插入图片
    （5）加入多媒体
    （6）添加交互式表单
  • 标记符又称标签，<>，用来控制网页内容显示的效果。
  • 标记符后面加上的属性用来描述标识符对象的特征。例如：
    <FONT color="red" size="3">lalala</FONT>

HTML的基本结构

HTML网页文件包括文件头和文件体两部分内容构成。

  • HTML文件标记符 <HTML></HTML>

  • HTML文件头标记符 <HEAD></HEAD>，<TITLE>...</TITLE> 标识网页文件的标题，<META> 提供文档的媒体信息，几种常用的方法如下：

    <META http-equiv="Content-Type" content="text/html;charset=gb2312">
    标记网页的解码方式，即说明网页使用的文字和语言。
    <META name="Keywords" content="关键字">
    标记搜索引擎在搜索你的页面时所取出的关键字
    <META name="Description" content="站点主要内容">
    标记站点的主要内容
    <META name="Author" content="作者名称">
    标记文档的作者名称

  • BODY文件体标记符 <BODY></BODY>
    主要属性如下：

    bgcolor：标识HTML文档的背景颜色，默认白色。
    background：设置HTML文档的背景图片，GIF、JPG等。
    text：标识HTML文档的正文文字颜色。
    超链接颜色：link、vlink、alink分别控制普通超链接、访问过的超链接、当前活动超链接的颜色。
    topmargin和leftmargin：设置网页主体内容距离网页顶端和左端的距离。

HTML的基本语法规则

  • UNIX系统扩展名必须为HTML
  • HTML不区分大小写
  • 多数HTML标记可以嵌套，但不可以交叉
  • 源文件中的换行、回车、多个连续空格在显示中无效。换行<BR>、分段<P></P>、多个空格应该使用多个&nbsp转义符号。
  • 标点符号应使用英文半角。

文字与段落标记

标题字标记

<Hn align="对齐方式">标题文字</Hn>

n用来指定标题文字字号的大小，n可以取1~6的整数，1最大，6最小。
align用来设置标题的对应方式，有left、center、right、bottom、top。

文字格式标记

<FONT face="字体" size="字号" color="颜色"> 被设置的文字</FONT>

face可以为宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋GB2312、Times New Roman等。
size可以取1~7，1最小，7最大。
color是十六进制的RGB颜色码或者HTML给定的颜色常量名。

字型标记

常用的标记格式如下：

<B>...</B>：粗体
<I>...</I>：斜体
<U>...</U>：下划线
<STRIKE>...<STRIKE> 或者<S>...</S>：删除字效果
<BIG>...</BIG>：使文字大小相对于前面的文字增大一级
<SMALL>...</SMALL>：使文字大小相对于前面的文字缩小一级
<SUP>...</SUP>：下标
<SUB>...</SUB>：上标
<BLANK>...</BLANK>：使文字显示闪烁效果
<TT>...</TT>：以等宽体显示西文字符
<CITE>...</CITE>：输出引用方式的字体，通常是斜体
<EM>...</EM>：强调文字，通常是斜体加黑体
<STRONG>...</STRONG>：强调文字，通常是斜体加黑体

段落标记和强制换行标记

  • 段落标记<P> 段与段之间留一行空白
  • 强制换行标记 <BR> 放在一行的末尾

  • 水平线标记 <HR> 属性如下：

    align设定横线放置的位置，left、right、center
    size设定线条粗细，以像素为单位，默认2
    width设定线段长度，可以是绝对值（像素），也可以是相对值（百分比）
    color设定线条颜色，默认黑色，用英文单词或#引导的十六进制数代码表示
    noshade设定线条为平面显示，无三维效果，缺省则有阴影或立体效果

其他标记

  • 分区显示标记 <DIV>

  • 特殊符号标记

    尖括号< >：&lt; &gt;
    双引号“”：&quot; &quot;
    空格 ：&nbsp;

列表标记

无序列表标记

<UL>...</UL> 列表的开始和结束
<LI> 每个项目列表

  • type表示每个项目前显示符号类型，disc实心圆，circle空心圆，square实心方块

有序列表标记

<OL>...</OL> <LI>

  • type表示每个项目前显示序号类型
  • start设置序号开始值，默认1

自定义列表标记

<DL>...</DL>
<DT> 每项自定义条目名称
<DD> 每条自定义条目说明，自动向右缩进

表格标记

  • <TABLE>...</TABLE> 创建表格，属性如下：

    width，height，align(水平对齐方式)，background(背景图片)，bgcolor(背景颜色)，border(边框宽度，以像素为单位)，bordercolor(边框颜色)，bordercolorlight(边框明亮部分的颜色)，bordercolordark(边框昏暗部分的颜色)，cellspacing(单元格之间的间距)，cellpadding(单元格内容与单元格边界之间的空白距离的大小)

  • <CAPTION>...</CAPTION> 对表格标题的说明，align属性

  • <TR>...</TR> 标记定义行，该标记中间的内显示在一行，只能放在<TABLE>...</TABLE> 标记之间使用，属性如下：

    align(行内容的水平对齐)，valign(行内容的垂直对齐)，bgcolor，bordercolor，bodercolorlight，borderlocordark

  • <TH> 和<TD> 表示单元格标记，嵌套在TR中

  • 要创建跨多行、多列的单元格，只需在TH或TD中加入ROWSPAN或COLSPAN属性的属性值，表明表格中要跨越的行或列个数

    < TH colspan=”列数”> < TD colspan=”列数”>

多媒体标记

图像标记 <IMG>

<IMG src="文件名" alt="说明" width="x" height="y" border="n" hspace="h" vspace="v" align="对齐方式">

音频标记 <BGSOUND>

<BGSOUND src="声音文件的URL地址" loop="播放次数">

视频标记 <EMBED>

<EMBED src="file_URL" height="value" hidden="hidden_value" autostart="auto_value" loop="loop_value"> </EMBED>

超链接标记

<A href="URL地址" target="打开窗口方式">显示的文本或图像</A> 属性：

href：设置要链接到的目标URL地址，在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径，否则应该写绝对路径
target：设置要显示超链接内容的窗口方式，可选值为_blank、_parent、_self、_top和框架名称

  • 创建指向其他页面的超链接

    1. 同一目录 <A href="目标文件名">显示的文本或图像</A>
    2. 下一级目录 <A href="子目录名/目标文件名">显示的文本或图像</A>
    3. 上一级目录 <A href="../目标文件名">显示的文本或图像</A>
    4. 同级目录 <A href="../子目录名/目标文件名">显示的文本或图像</A>
    5. Internet <A href="网址">显示的文本或图像</A>
    6. E-mail <A href="mailto:邮件地址">指向E-mail地址的超链接</A>
//实例：创建指向其他页面的超链接
<HTML>
  <HEAD>
    <TITLE>创建指向其他页面的超链接</TITLE>
  </HEAD>
  <BODY>
    <H4>同一目录下的网页文件</H4>
    <A href="3-19.html">同一目录下的页面</A>
    <H4>链接到Internet上的网页</H4>
    <A href="http://www.baidu.com">百度</A>
    <H4>图像超链接</H4>
    <A href="http://www.sohu.com"><IMG src="sohu.jpg"></A>
    <H4>E-mail超链接</H4>
    <A href="mailto:qucc218@sohu.com.cn">qucc的邮箱</A>
  </BODY>
</HTML>

  • 创建指向本页面中的超链接
    要在当前页面内实现超链接，需要定义两个标记：

    • 超链接标记的格式为：<A href="#记号名">显示的文本或图像</A>
    • 书签标记的格式为：<A name="记号名">目标文本附近的字符串</A>

    功能：单击显示的文本或图像，将跳转到“记号名”开始的文本

实例：创建指向本页面中的超链接
<HTML>
  <HEAD>
    <TITLE>学生之家</TITLE>
  </HEAD>
  <BODY link=red alink=blue vlink=green>
    <A name="0"></A>
    <H2 align=center><B>欢迎来到“学生之家”</B></H2>
    <FONT size=3 color=purple><CENTER>
      <A href="# news">新闻</A>&nbsp;&nbsp;&nbsp;&nbsp;
      <A href="# study">学习园地</A>&nbsp;&nbsp;&nbsp;&nbsp;
      <A href="# health">健康信箱</A>&nbsp;&nbsp;&nbsp;&nbsp; <P>
    </CENTER></FONT>
    <A name="news"></A>新闻<BR>.........</BR>
      <DIV align=right><A href="# 0">返回</A></DIV><P>
    <A name="study"></A>学习园地<BR>.........</BR>
      <DIV align=right><A href="# 0">返回</A></DIV><P>
    <A name="health"></A>健康信箱<BR>.........</BR>
      <DIV align=right><A href="# 0">返回</A></DIV><P>
  </BODY>
</HTML>

表单标记

表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。它的主要功能是收集信息，当单击表单中的提交按钮时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序(如ASP、CGI)进行处理，处理后再将用户所需信息传送到客户端浏览器上，这样网页就有了交互性。

< FORM>< /FORM>标记

功能：创建表单
格式：<FORM name="form_name" method="method" action="url">...</FORM>
属性：

name设置表单名称
method用于指出采用何种HTTP方法来发送表单数据（GET/POST）
action定义表单处理程序的位置及名称。如< FORM? action=”counter.asp”>，当用户提交表单时，服务器将执行名为counter.asp的asp程序

< INPUT type=”“>标记

功能：定义一个输入区，此标记必须放在<FORM></FORM> 标记对之间
格式：<INPUT name="field_name" type="type_name">
属性：

name属性设置输入区域的名称，服务器通过name来获得该区域数据。
type属性设置输入区域的类型，常用type如下：

type属性值及格式 说明
< INPUT type=”Text” maxlength=”” size=”” value=”“> 单行输入文本区域
< INPUT type=”Password”> 输入密码域
< INPUT type=”File”> 文件域，通过表单上传文件
< INPUT type=”Checkbox” checked> 复选框。checked表示此项被默认选中
< INPUT type=”Radio” checked> 单选按钮框
< INPUT type=”Button”> 普通按钮
< INPUT type=”Submit” value=”“> 单击“提交”按钮，可以实现表单内容的提交
< INPUT type=”Reset” value=”“> 单击“重置”按钮，可以清楚表单的内容，恢复默认的表单内容设定
< INPUT type=”IMAGE” src=”“> 使用图像代替按钮的功能。src设置图片的路径
< INPUT type=”Hidden”> 隐藏输入域，用户不能在其中输入，用来预设某些要传送的信息

**隐藏表单，一般用来传递参数，而又不想显示在客户端，如网站购买产品，点击提交后通常会自动生成一个产品的订单编号，用于后台操作或其他，而此编号不必给客户看。隐藏域可用来实现HTTP的记忆功能。

< SELECT>< /SELECT>和< OPTION>标记

功能：下拉列表框/可以复选的列表
格式：

<SELECT name="name" size="value" multiple>
<OPTION value="value" selecteds>选项一
<OPTION value="value">选项二...
</SELECT>

< TEXTAREA>< /TEXTAREA>标记

功能：创建一个可以输入多行的文本框
格式：<TEXTAREA name="name" rows="value" cols="value"></TEXTAREA>

框架标记

框架的作用就是把浏览器分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合在一起完成特殊的效果。
框架通常的使用方法是在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中；或有时一个网页的不同部分由不同的人员制作，可以每人完成一个子窗口，然后利用框架技术将他们合并在一起形成一个完成的页面。
框架主要包括：框架集和框架。

  • 框架集：在一个文档内定义的一组框架结构的HTML网页。定义了在一个窗口中显示的框架数、框架尺寸、载入到框架的网页等。
  • 框架：在网页上定义的一个显示区域。

< FRAME>标记

功能：定义某一个具体的框架
格式：<FRAME src="File_Name" name="Frame_NAME" scrolling="value" noresize>...</FRAME>
属性：

src设置框架显示的文件路径。
name定义此框架的名字，这个名字是供超文本链接标记<A href="" target=""> 中的target用来指定链接的目标HTML文件将显示在哪一个框架中。
scrolling设定滚动条是否显示，yes/no/auto
noresize禁止改变框架的尺寸大小

< NOFRAME>< /NOFRAME>标记

放在< FRAMESET>< /FRAMESET>标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。