资源描述

零基础HTML教程.docx

《零基础HTML教程.docx》由会员分享，可在线阅读，更多相关《零基础HTML教程.docx（14页珍藏版）》请在冰点文库上搜索。

零基础HTML教程.docx

零基础HTML教程

1.html主要由一对对的tag组成。

没有内容的html元素被称为空元素，可以在开始标签中添加斜杠来关闭它。

如

2.html属性：

html属性添加在开始标签中，总是以名称/值对的形式出现，如：

name=”value”。

这里，要注意，一般使用小写，属性值要添加双引号（英文的）

3.仅有几个标签在HTML的头部分是合法的，它们包括：

,,,,<style>和<script>。</p><p>4.最基本的组成是</p><p><html></p><p><head></p><p><title>这里面写文件标题，出现在浏览器最顶端的标题栏上

--用来标记关键词，方便浏览器找到该页面-->

--用来标记文档的作者-->

--用来标记页面的解码方式-->

--10秒后自动刷新，跳转到url指向的页面-->

这是一个居中的段落

这是没有标注align元素的段落

假如我想要在p中换行，可以使用br元素
换行了吗？

br没有closingtag哟

上一行我打了一个空行，可惜页面里看不到呢然后刚刚打了20个空格，网页里会出现几个呢？

--添加一行注释，写注释是好习惯哟-->

来试试标题君，这里是h1

标题君h2

居中的h3大小的标题

在这一段的下面加了一个hr元素，添加一条横线

hr和br类似，都是没有closingtag的

5.html常见格式

常用文本格式tag

body元素bgcolor设置页面的背景色

b表示粗体比较下吧

i表示斜体

~~del中的字体被划线删除~~外面的字体正常

ins表示下划线插入对照组

X₂2被sub包围，表示下标

X²2被sup包围，表示上标

blockquote表示缩进引用

pre中的内容保留空格

保留换行

Let'sseethecode

code中显示的是计算机代码，为等宽字符

6.html特殊字体显示

7.html超链接

（1）Html中用来表示超链接

--文字链接，跳转到网页-->

--图片链接-->

/Users/xph/Desktop/baidu.jpg">

--将target属性设置成_blank，在新窗口中打开链接文件-->

在新窗口中打开链接

--设置title属性，可以在鼠标悬停在链接上是显示注释-->

--如果希望注释多行显示，可以使用字符实体进行换行-->

（2）可以使用name属性跳转到文件的指定位置。

Name也是成对出现的，一个设置name的名称，一个设置href指向这个name。

点击链接后，对应部分内容将出现在页面的最上方。

如果浏览器找不到该name指向的内容，也不会报错，只是会仍然停留在原位置

这里设置herf跳转到对应name的位置

这里设置name的名称

8.html绝对路径和相对路径

（1）相对路径

如果源文件和引用的文件位于同一个文件目录里，那么，就可以直接使用文件名来引用

../表示源文件所在的上级目录，../../表示上上级，以此类推

举例说明，要在A.html中插入B.html的超链接

（a）如果二者的绝对路径分别为：

A.htmlaa/bb/cc/A.html

B.htmlaa/bb/cc/B.html

那么，在A.html中写：

链接到B.html

（b）如果二者的绝对路径分别为：

A.htmlaa/bb/cc/A.html

B.htmlaa/bb/B.html

那么，就写成

链接到B.html

（c）如果二者的绝对路径分别为：

A.htmlaa/bb/cc/A.html

B.htmlaa/B.html

那么，就写成

链接到B.html

（d）如果二者的绝对路径分别为：

A.htmlaa/bb/cc/A.html

B.htmlaa/ee/ff/B.html

那么，就写成

链接到B.html

（e）如果二者的绝对路径分别为：

A.htmlaa/bb/cc/A.html

B.htmlaa/bb/cc/dd/ee/B.html

那么，就写成

链接到B.html

9.在html中创建表格

HTML表格用

表示。

一个表格可以分成很多行（row），用

表示；每行又可以分成很多单元格（cell），用间写表格的标题

（4）rowspan=”2”td的属性，合并两行

（5）colspan=”2”类似于rowspan，合并两列

（6）cellpadding=”10”table的属性，设置表格中单元格内容和边界的距离

（7）cellspacing=”10”table的属性，设置表格中单元格之间的距离。

缺省时默认为1

（8）bgcolor=”#00ff00”设置表格或单元格的背景色

（9）background="baidu.jpg"设置表格或单元格的背景图片，图片大小与表格无关

（10）align=”center”设置对齐方式，作为table属性时，设置表格在页面中的位置，作为td的属性时，设置单元格中内容在单元格中的位置

10.html框架（Frame）

使用框架Frame，可以在浏览器窗口同时显示多个网页，每个Frame里设定一个网页，且相互独立。

（1）//标注某一个frame中网页的源文件

（2）//表示接下来的两个frame框架按列分布，每列占窗口大小的百分之五十

（3）//表示按行分布网页，各占50%

（4）//nosize属性：

禁止调整框架窗口尺寸

（5）使用Frame制作html导航框架

以下为一个简单的例子：

//*为通配符，表示按列分布是，第一列占120（像素等单位），剩下的空间全为第二列所有

//第一列（左侧为导航栏，含有多个跳转链接）

//第二列（名称为“content”，内容默认为f1.html中展示的内容，但会随着导航栏点击不同地址而变化）

//以下为导航栏index.html中的内容

f1//target部分将导航部分指向的内容展现在content部分

（6）//在html中，使用iframe嵌入另一个网页

11.html列表（Lists）

（1）排序列表（各个列表项由一系列数字进行标记）：

由

开始
（2）不排序列表（各个列表项使用小黑点进行标记）：
由
- 开始
  （3）定义列表由
  （definitionlist）开始，定义术语由
  （definitionterm）开始，术语的解释说明由
  开始，
  中的内容缩进显示
  （4）可以使用type来设置排序列表项/不排序列表项前面的标号类型
  如图所示：
  （5）列表可以进行嵌套
  12.Html表单
  Html表单（form）是html终止重要的一部分，主要用于采集和提交用户数据。
  学习表单主要要注意的要素有三个，一是表单控件，如input=”text”，通过表单的各种控件，用户可以进行输入、选择、提交等各种操作。
  二是action，指示处理表单信息的文件。
  三是method，表示发送表单信息的方式。
  Method有两个值，get和post。
  get将表单name/value信息经过编码之后，通过url发送（在地址栏中可以看到），而post则是将信息通过http发送。
  二者的选择方式通常为：
  如果只是为了取得和显示数据，一般用get。
  如果涉及到对数据的保存和更新，建议用post
  （1）html表单常用控件
  注意，select既可以做单选，也可以做多选。
  做单选时，
  选1
  选2
  做多选时，属性加上multiple即可，用户使用ctrl进行多选操作
  选1
  选2
  textarea多行文本输入框
  高度为2，宽度为3的多行文本输入框
  密码输入框
  用户输入时，显示的是黑点，而不是输入的内容
  提交
  通过提交（submit）将表单（form）里的信息提交给表单action指向的文件
  （这里显示的是一个名为提交的按钮，效果类似于button）
  图片提交
  这里以图片代替按钮，点击图片进行提交。
  Src中是图片源文件的路径。
  Alt表示，如果浏览器没有加载图片的属性，则显示alt中的值
  13.HTML图片
  （1）
  在html中，可以使用img来插入图片。
  src表示图片的路径，使用绝对或是相对路径均可。
  alt中的内容，与图片提交中alt的作用类似，当浏览器没有载入图片功能时，就转而显示alt中的值；更重要的是，目前的搜索引擎抓取工具还没有抓取图片中文字的功能，使用alt标注图片的内容，有助于搜索引擎抓取网页的内容。
  aign用于标注图片的对其方式，有top、middle、bottom（垂直对其方式）以及left、center、right（水平对齐方式）几种取值。
  （本机上测试时，align属性不起作用？
  ）
  （2）图片默认显示原有的大小，但是，也可以通过width和height属性来改变图片的大小。
  如：
  （3）复习：
  将图片作为页面背景：
  //将图片作为背景，如果图片比页面小，会自动重复，如果图片比页面大，只截取页面大小的部分
  将图片作为一个超链接
  //点击图片a，跳转到页面f2
  14.HTML字体（fonts）
  在html中，可以使用font元素以及它的属性来设置文字的大小、颜色和字体类型。
  （1）size属性设置字体大小
  （2）face属性设置字体风格
  （3）Color属性设置字体颜色
  
  展开阅读全文
  相关资源
  猜你喜欢
  相关搜索
  - 基础
  - HTML
  - 教程
  资源标签
  当前位置：首页 > IT计算机 > 电脑基础知识
  
  copyright@ 2008-2023 冰点文库网站版权所有
  经营许可证编号:鄂ICP备19020893号-2
  登录
  
  首页
  
  资源分类
  
  升级会员
  
  通知公告
  
  帮助中心

在
表示（1）border=”1”;table的属性，设置表格边界，缺省或等于0时，不显示边界（即整个表格的外边框，数字越大，边框越粗）（2）	表示表格表头，字体为粗体。简单来说，它在表格中的用法和td完全一致，不同点仅在于，其中的内容字体被加粗了（3）