HTML 入门第一课

HTML 简单认识

HTML（HyperText Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页的最基本的语言，它可以直接由浏览器执行。

1.HTML 是用来描述网页的一种语言。

2.HTML 指的是超文本标记语言: HyperText Markup Language

3.HTML 不是一种编程语言，而是一种标记语言

4.标记语言是一套标记标签 (markup tag)

5.HTML 使用标记标签来描述网页

6.HTML 文档包含了HTML 标签及文本内容

7.HTML文档也叫做 web 页面

由 HTML 组成的网页的基本结构

文档类型声明 <!DOCTYPE html> --这是html5的声明方法

头部标记（<head>….</head>）

包含文档的标题信息，头部标记都不可或缺！

主体标记（<body>…..</body>）

包含了文档的内容

中文编码声明（<meta charset = “utf-8”>）

HTML常用标签

<p>…</p> 定义一个段的块级标记 | <br /> 换行标记 | <h1> …<h6> 标题标记

<ul> </ ul> 无序列表标记，表示列表所包含的项是没有先后顺序的！列表项使用<li>表示。

<ol> </ ol> 有序列表标记，表示列表所包含的项是有先后顺序的！列表项使用<li>表示。

<dl> </ dl> 定义列表，定义列表至少包含一条术语（dt）或一条说明（dd）

<dt> </ dt> 标明一个术语要说明的对象

<dd> </dd> 列表项说明

<b> </b> 或 <strong> </strong> 文本加粗

<i> </i> 或 <em> </em> 文本倾斜

<div> </div> 块级元素 | <span> </ span> 行内元素 | <hr /> 分隔线 | <del> <del /> 删除线

< img > 图像的行内标记

<img src = “lianhua.jpg ” alt = “莲花之美”>

src 是图片的路径参数；

网页设计中的所有文件，原则上都必须放置在一起，即在同一个文件夹下（这个文件夹是网页的“根”文件夹）

相对路径：参照自身的位置，而定义的路径，叫做相对路径

相对路径有三种表示方法：

       1.Html文档和图片在同一个目录下，直接写图片名称

        2.Html文档和图片所在的文件夹在同一个目录下，先写文件夹名称，再写图片名称

        3.Html文档所在文件夹和图片所在文件夹在同一个目录下，则需要先用”../ ”找到根目录，

再写图片所在文件夹的名称，最后写图片名称

-> 图片大小              <img width = “ ” height = “ “ />

           网页中长度单位多使用 px ，即像素。

-> 图标替代文体      <img alt = “图片替代的文本内容” />

           在网络较慢的环境中，如果没有出现图片，将以文本替代图片显示

-> 图片提示              <img title = “提示文本” />

          在鼠标放置图片上时提示的文本。多数标签都有此属性，但浏览器的支持不全面！

HTML 文字排版标记

1.<big></big> 定义大字体的文字不符合标准网页设计的理念,不赞成使用.

2.<small></small> 定义小字体的文字

3.<sup></sup> 上标

4.<sub></sub> 下标

HTML 特殊符号

“<” 和 >” “<” 和 “>” | « » << >>

&lsaquo; &rsaquo; < > | © 版权 &amp &

超链接

<a> </a> 通过使用属性href来指定要链接的url，标签的内容可以为文本也可为其他标签

①<a href="2.html">点击进入2网页</a>，点击文字进入2.html

②<a href="2.html"><img src="two.jpg" /></a>，点击图片进入2.html

① a:link：未访问链接 ,如 a:link {color:blue}
② a:visited：已访问链接 ,如 a:visited{color:blue}
③ a:active：激活时（链接获得焦点时）链接的颜色 ,如a:active{color:blue}
④ a:hover：鼠标移到链接上时 ,如 a:hover {color:blue}

锚点的使用

1.定义锚点<a id=“zj”>第三章</a>

2.定义指向该锚地的链接<a href=“#zj”>点击查看第三章</a>

下载链接的使用

如果url指向的不是一个html文件，那么点击时将下载该文件

表格的基本结构

1）<table> </ table> 定义表格的基本框架

2）<tr> </tr> 定义表格的行

3）<td> </td> 定义表格行内单元格

4）<th> </th> 定义表格行内单元格（标题），自动将文本加粗，居中对齐

表单

表单的组成：一个表单有三个基本组成部分：

1）表单标签：这里面包含了处理表单数据所用程序的url，以及数据提交到数据服务器的方法。

2）表单域：包含了文本框，密码框，隐藏域，多行文本框，复选框，下拉框和文件上传框等。

秒客网