学习HTML第一天

作者: 官方发布人 分类: HTML 发布时间: 2017-09-04 02:33 ė 6 学习HTML第一天已关闭评论

1.1  两个概念undefined

1.1.1  客户端和服务器端undefined

浏览者使用的计算机客户端,用来给服务器发送请求,注意:管理员使用的计算机也是客户端(在服务器上直接操作除外)

存放网页文件的计算机是服务器端。

1.1.2 文件名、基本名、扩展名undefined

文件名由基本名和扩展名组成,比如demo.txt

其中demo是叫基本名,txt是扩展名

扩展名是用来区分文件的类型。

思考:网页的扩展名是什么?

.html

.htm

Htmlhtm是一样的。表示这个文件是静态网页文件。

后面我们还会介绍

.asp

.aspx

.php

.jsp

Doc   Word文档

Jpg    图片

Gif     图片

PNG  图片格式,是一种无损压缩格式,用的越来越多。

1.2打开一个网页的执行过程undefined

客户端给服务器端发送一个请求,服务器会把页面的代码(HTMLCSSjs)发送到客户端来,这些代码通过浏览器解析执行就生成了我们看到的页面。

1.3站点介绍undefined

一个网站中包括HTML页面,CSSjs,图片,flash动画或gif动画,都属于网页的资源文件。为了便于管理,我们将这些静态资源放置到一个文件夹下。这个文件夹我们叫站点。

做网站的第一步要先建站点。

1.4什么是HTMLundefined

HyperText
Mark-up Language
,超文本标记语言。

1.5HTML语言的规则undefined

l命令都要放到<>

l大部分标记都是成对出现

l标签大部分都是<tag>开始</tag>结束

lHTML语言不区分大小写,但是XHTML按照规范全部是小写

练习

<a></a>

<b></b>

1.6网页的基本框架undefined

例题:

在站点文件夹中新建一个txt文件,在文件中输入如下代码

将文件的扩展名改为.html.htm

双击网页文件,通过浏览器打开,这时候可能会出现乱码,设置一下浏览器的字符编码

浏览器打开效果如下

1.7几种常见的标记undefined

1<p></p>       段落

2<br>             换行

注意:换段和换行的区别

3<hr>             水平线

4<b></b>       粗体

5<i></i>         斜体

6<u></u>       下划线

7<strong></strong>  强调标记,通过加粗的方式来强调

8<em></em>             强调标记,通过倾斜的方式来强调

多学一招:从外观上看<b>和<strong>、<i>和<em>是一样的,但是对SEO(搜索引擎优化)影响很大。<b><i>仅仅表示是字体,没有强调的作用,在实际工作中,建议使用强调标记。

9<sup>     top            上标

10<sub>  bottom           下标

1.8标记的分类undefined

标记分为两类,一类是成对出现,还有一类是不成对出现。

1、容器标记: 成对出现的标记   (围堵标记)

2、空标记: 不成对出现的标记           (单标记)

1.9属性undefined

每个标记就是一个对象,每个对象都有属性。一个对象有多个属性,属性和属性之间是没有顺序的。属性和属性之间是用空格隔开的。属性的值要用引号引起来(单引号和双引号都行)

语法

<标记 属性=’属性=’…/>

例题

1.10  设置页面解析时候的字符编码undefined

常用的字符编码

gb2312    简体中文

gbk         简体中文

utf-8        通用编码  (推荐使用)

<meta http-equiv=”Content-Type”
content=”text/html;
charset=utf-8″
/>

Charset作用:用来告诉浏览器用什么编码解析页面代码。这个编码要和文件的编码一致。

1.11  简述W3C(万维网协会)的(XHTML 1.0)规范undefined

W3c定义的规范很多,重要的规范如下:

1、一个页面只能有一个根元素

2、标记必须成对出现(不允许空标记的存在)

3、标签区分大小写

1.12  Dreamweaver介绍undefined

DW是一个前段开发非常强大的工具,有很多提示,参数设置的快捷键是

Ctrl+U

编辑——首选参数

我们可以更改自动补全的执行时间

Dw除了有很强大的提示功能以外,还可以管理站点文件夹。

 

站点——新建站点

在弹出的对话框中输入如下参数

新建完毕后,就可以在dw中直接操作站点中文件

脚下留心:dw中新建站点是新建的站点文件夹和dw软件之间的一个关联,目的是为了更方便的管理站点目录,如果dw中不建站点,网站一样开发。

思考:如果删除dw中的站点,站点文件夹是否被删除?

答:不会被删除,删除的是dw软件和站点文件夹的关联。

新建站点以后,预览网页文件按快捷键  F12

可以更改默认浏览器

 

设置完毕后,再按F12就会用默认浏览器打开网页文件。

1.13  滚动文字的设置undefined

1.14  路径undefined

路径分为两种

1、绝对地址:从盘符开始

2、相对地址:以自身文件为准

注意:../代表上一级目录   ./代表当前目录

<a href=”./2-滚动文字.html”>点击</a>        ./代表当前目录

1.15  链接undefined

连接的标记是<a></a>

1.15.1内部链接undefined

网站内部页面和页面之间的连接,参照前面路径那一节

1.15.2外部链接undefined

外部连接就是连接到其他网站上去

1.15.3空连接undefined

有超链接的样子,但是点击不会跳转。这种就是空连接,空连接用#表示。

1.15.4下载链接undefined

链接的文件,浏览器无法打开,就自动出现下载。

1.15.5锚链接undefined

新建一个锚点

Id表示唯一的编号。

点击超链接,连接到指定的锚点处

#表示id的意思,

1.16  六种标题级别undefined

h1h6,标题也是有权重的。H1权重最高

1.17  列表undefined

1.17.1有序列表(<ol>undefined

每一项是一个li

1.17.2无序列表(<ul>)undefined

1.17.3自定义列表(<dl>)undefined

1.18  <!DOCTYPE> 标签undefined

Document     文档

Type             类型

l  详细资料:http://www.w3school.com.cn/tags/tag_doctype.asp

l<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于
<html>
标签之前。

l<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

1.19  作业undefined

1、跳转到其他页面指定的锚点出

2、完成如下页面。

本文出自Anpingblog,转载时请注明出处及相应链接。

本文永久链接: http://hezhaoyu.com/archives/306

0
Ɣ回顶部