HTML入门 学习笔记1
概念
学习html首先了解客户端和服务器端,文件名和扩展名,同时了解打开网页的执行过程、站点、什么是HTML。
客户端和服务器端
客户端:浏览者使用的计算机。
- 注意:管理员其实也是浏览者,所以管理员使用的也是客户端(在服务器上直接操作除外)。
服务器端:存放网页文件的计算机。
打开网页的执行过程:
- 客户端给服务器端发送一个请求,服务器响应将页面代码发送给客户端,这些代码通过浏览器解析执行就生成了我们看到的页面。
文件名、基本名、扩展名
文件名:由基本名和扩展名组成。
- 比如:demo.txt 其中demo是基本名,txt是扩展名。
扩展名:用于区分文件类型。
- 网页的扩展名包括:
- 静态网页的扩展名:html、htm
- (其他知识点:asp、aspx、php、jsp)
资源文件和站点
一个网站中包括HTML页面,css,JS,图片,flash动画或gif动画等,这些都属于资源文件。
为了便于管理,我么将这些这些静态资源放置到一个文件夹下。这个文件夹称为站点。
- 做网站的第一步要先建站点。
什么是HTML
HTML(HyperText Mark-up Language 超文本标记语言)
HTML语言的规则:
- 命令都要放到<>
- 大部分标记都是成对出现
- 标签大部分都是
<tag>
开始</tag>
结束 - HTML语言不区分大小写
网页的基本框架
一个页面必须具备如下框架:
通过记事本写网页
在站点文件夹新建一个txt文件,在文件中输入如下代码
<html>
<head>
<title>
欢迎进入html世界
</title>
</head>
<body>
这是我的第一个网页
</body>
</html>
更改文件扩展名为html或htm,保存并双击网页,通过浏览器打开,打开时可能出现乱码。
字符编码
- 关于查看时的乱码问题:记事本默认编码方式是ANSI,而ANSI编码与操作系统有关,如果出现乱码一般是与中文编码有关。浏览器打开时默认会用UTF-8编码方式打开,遇到中文会出现乱码。
- 在查看时解决中文乱码:设置浏览器查看的字符编码为GB2312。
常用字符编码:gb2312 简体中文、gbk 简体中文、utf-8 通用编码(推荐使用)
- 在head中插入
<meta charset="UTF-8">
charset作用:用来告诉浏览器用什么编码解析页面代码,这个编码要和文件编码一致。
标记(标签)
常用标记
常用标记-1
<p></p>
:段落<br>
:换行
- 注意:换段区别于换行,换段的间距大于换行的间距。
<hr>
:水平线
常用标记-2
<b></b>
:粗体<i></i>
:斜体<u></u>
:下划线
- 注意:成对的标记要注意内外嵌套关系。即使嵌套出现问题也不报错。因为HTML语言具有宽容性。
<strong></strong>
:(通过加粗)强调<em></em>
:(通过倾斜)强调
- 对比: 从外观上来看
<b>
和<strong>
、<i>
和<em>
是一样的,但是对SEO(搜索引擎优化)影响很大。<b>
和<i>
仅仅是字体,没有强调的作用,在实际工作中建议使用强调标记。
<sup></sup>
:top 上标<sub></sub>
:bottom 下标
- 常用标记的应用代码如下:
<html>
<head>
<title>
欢迎进入html世界
</title>
</head>
<body>
<p>
<b>锄禾日当午,</b><br>
<i>汗滴禾下土。</i><br>
<u>谁知盘中餐,</u><br>
<b><u><i>粒粒皆辛苦。</i></u></b>
</p>
<hr>
<strong>床前明月光,疑是地上霜。</strong>
<em>举头望明月,低头思故乡。</em>
<hr>
x<sup>2</sup>+y<sup>2</sup>=z<sup>3<sup> <br>
Fe<sub>3</sub>O<sub>4</sub> <br>
</body>
</html>
- 效果如下:
锄禾日当午,
汗滴禾下土。
谁知盘中餐,
粒粒皆辛苦。
床前明月光,疑是地上霜。 举头望明月,低头思故乡。
x 2+y 2=z 3
Fe3O4
标记的分类
标记分为两类:容器标记 和 空标记。
容器标记:成对出现的标记
- 比如:
<p></p>
空标记:不成对出现的标记
- 比如:
</br>
标记的属性
每个标记就是一个对象,每个对象都有属性。
一个对象有多个属性,属性和属性之间的关系是无序的。
格式:<元素 属性1=“值” 属性2=“值” …>
- 比如:
<hr width="300" color="#FF0000" size="15">
其他标记例子
滚动文字的设置
标记:<marquee></marquee>
属性:
- width 宽度
- direction 滚动方向:left向左(默认)
- scrollamount 滚动数量:用于控制滚动速度
- onmouseover 当鼠标移上时:设置鼠标经过时的动作,当取值为stop() 设置为鼠标经过时停止滚动。
- onmouseout 当鼠标移开时:设置鼠标离开时的动作,当取值为start() 设置为鼠标离开时开始滚动。
- behavior 行为:scroll滚动(默认) alternate交替 slide单次
<!DOCTYPE>
标签
详细资料查询:http://www.w3school.com.cn/tags/tag_doctype.asp
- 声明必须是 HTML 文档的第一行,位于 标签之前。
- 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
关于W3C
W3C world wide web consortium 万维网协会
W3C的规范
W3C的规范有很多,重要的规范如下:
- 一个页面只能有一个根元素
- 标记必须成对出现(不允许空标记)
- 空标记有时带斜杠是为了遵循W3C定义的规范 比如:
<br />
关于路径
在学习链接前,首先了解有关路径的知识点。
路径分为两种,分别是绝对路径和相对路径。
绝对路径:从盘符开始的路径。
- 比如:
F:/web/test.html
相对路径:以自身文件为准的路径。
- 比如:
web/test.html
- 注意:
../
代表上一级目录./
代表当前目录(可忽略不写)
链接
标记:<a></a>
属性:
- href :指定超链接目标的 URL
- target:指定超链接目标使用的浏览器 取值:
_blank
表示在新窗口打开
分类
内部链接:网页内部页面和页面之间的链接,参照路径知识。
外部链接:链接到其他网站。
- 注意:外部链接的地址要写全
空链接
空链接: <a href="#">空链接</a>
下载链接
对于链接的文件,浏览器无法打开则自动出现下载文件。
锚链接
锚链接:用id表示唯一编号,连接到指定锚点处。例如:
<a href="#no1">锚1</a><br>
<a id="no1">锚1</a>
- 跳到其他页面的锚点语法:
<a href="其他页面.html#no2">锚2</a><br>
标题
<h1></h1>
:一级标题
<h2></h2>
:二级标题
<h3></h3>
:三级标题
<h4></h4>
:四级标题
<h5></h5>
:五级标题
<h6></h6>
:六级标题
- h1到h6,标题也是有权重的。
列表
有序列表
- order list
标记:
<ol>
<li>有序列表内容1</li>
<li>有序列表内容2</li>
</ol>
- 有序列表标签是
<ol>
,每一项是<li>
标签
属性:
- type类别 取值:1、a、A、i、I
- start开始 表示该列表从第几个值开始 取值:1、2、3…
无序列表
- unorder list
标记:
<ul>
<li>无序列表内容1</li>
<li>无序列表内容2</li>
</ul>
- 无序列表标签是
<ul>
,每一项是<li>
标签
属性:
- type类别 表示无序列表前的 取值:circle圆圈、disc圆点(默认)、square小 方格
自定义列表
- define list
标记:
<dl>
<dt>自定义列表内容1</dt>
<dd>自定义列表内容2</dd>
<dt>自定义列表内容3</dt>
<dd>自定义列表内容4</dd>
</dl>
- 自定义列表标签是
<dl>
,每项是<dt>
和<dd>
标签