HTML基础部分

最新推荐文章于 2022-12-30 20:08:03 发布

夏虫语冰彡

最新推荐文章于 2022-12-30 20:08:03 发布

阅读量415

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34283987/article/details/77839505

一、HTML

1.学习目标：制作界面美观、符合W3C规范的静态网页。

2.简介：HTML全称HyperText Markup Language.即超文本标记语言，是用来制作网页的一种标记语言。

它是由一系列的基本标签组成的，用它编写的文档称为HTML文档(网页)。HTML从1991年底推出(1993年制定HTML工作草案)以来至今，就一直被当做万维网(World Wide Web)上的信息表示语言，用来设计基本的静态网页，它是我们学习动态网页技术(JSP)的基础，目前版本为HTML5，我们这里学习的是HTML4.01。

3.为什么学HTML4.01？

为了程序的兼容性，现在很多企业用的还是XP系统，XP最高支持IE8,IE8不支持HTML5(虽然微软也在努力让IE8支持HTML5，但是还不完美，不完全支持),所以为了程序的兼容性,我们使用HTML4.01

4.HTML的基本组成

HTML是由描述功能的基本标签(标记)组成的，例如html、head、body、form等，标记的前后都要用”< >”包裹，如<html>。标签的种类大概分为两类：

4.1单标记

标签不成对出现，也就是一个标签就能表示具体的一个含义，如<br/>表示换行，<hr/>表示“------”分割线，注意为了符合W3C规范（World Wide Web Consortium ，万维网联盟，制定Web规范的权威组织），我们的单标记必须在标签后面加一个斜杠，即<br/>、<hr/>，所以我们的单标记通用格式为<标签名/>.。

4.2双标记

标签成对出现，也就是有一个开始标签一个结束标签，开始标签以<标签名>开始，结束标签以</标签名>结束，这一对标签才能表示具体的含义，

例：<html></html>表示一个html文档，标准格式<标签名></标签名>。

5.永远的HelloWorld

新建一个后缀名为html的文件，例：index.html，编写如下代码，右键-在浏览器中打开

<html>

<head>

</head>

<body>

Hello World!!!

</body>

</html>

6.可能出现乱码问题：

在head中添加：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

告诉系统文本类型是html类型，编码方式是utf-8，然后解码时在浏览器中选择utf-8解码打开。

二、常见的编辑工具

1.EditPlus

这种软件提供了比记事本更加强大的功能，比如对关键字的加亮显示等等，用这种工具编写可以提高我们程序的可读性。它也是我们编写高级语言(例如java源程序)的主要工具之一.

2.DreamWeaver

这种软件除了对源代码的关键字加亮显示以外，还可以同时显示代码及其效果（如下图1.3），这种所见即所得的工具，当页面十分复杂的时候大大降低了代码的编写和维护的难度，从而提高了程序员或美工人员开发和维护的效率，降低了工程所用成本，是编写html不可多得的优秀工具之一。

3.其它

UltraEdit 、Sublime Text、MyEclipse、Aptana、WebStorm、HBuilder

三、常用的HTML标签：

1.文章标题

其中h1可替换成h1~h6,从1-6依次增大（一级标题到六级标题），

注意：只能用作文章标题，不要用来控制文字大小（用CSS控制）

语义化：每个标签都是有含义的

2.换行

<br/>表示换行

也可以在pre中原样输出

<pre>

此部分内容原样输出，包含空格和回车

</pre>

3.设置段落

打开后发现两个标签之间有一空行，即分段功能

首行空两格，可以用空格实现。也可以：

段落缩进可以使用空格,也可以使用CSS样式(推荐)

p {

text-indent: 2em;/*首行缩进两个字符 em为相对单位 1em代表1个字符的大小

浏览器默认1字符为16px*/

}

</style>

4.水平分割线

<hr/>

一条符合屏幕大小的分割线

就像这样一条华丽的分割线

----------------------------------------------------------------------------------------------------------------------------------------------------------

5.添加图片

属性src是图片路径，此处的是相对路径，是与该html文件同级（在同一个文件夹）目录下，

绝对路径和相对路径：

同级目录：直接写文件或图片名。

子级目录：文件夹名/文件或图片名。

上级目录：需要先退出本级，用../退出，../文件名或图片名.后缀名

属性alt是在图片加载失败时显示的内容，跟在一个表示错误的X图片后

属性title是鼠标悬停在该图片上时现实的内容。

6.HTML注释

<!- - 注释内容 - ->

注释内容不会显示到网页中，但是可以在网页中查看源码，看到注释，

注释一般添加在必要的地方，程序员都知道的代码不必要添加注释。

7.超链接

例：<a href ="www.baidu.com">百度一下，你就知道</a>

分类：

①页面连接，如上

②锚链接，跳到指定位置

步骤：

1).定义锚点，在需要的位置定义

2).点击链接

③功能性链接，给这个邮箱地址的用户写邮件

8.特殊符号

转义字符：

使用 &特殊表示字符的首字母拼写; 表示一个特殊字符，

例： 空格

<小于符号 < less than

>大于符号 > great than

©版权 copyright

"括号

9.列表

1)有序列表 ol:order list 有序列表 ,li:list item列表项,ol中有属性：type = "1"或"a"或"A"或"i"(罗马字符)，start="2"以2开始，默认以1开始

<ol>

</ol>

2)无序列表 ul:unorder list

<ul>

</ul>

3)定义列表 dl:definition list定义列表，dt:definition title定义标题，dd:definition description定义描述

一个列表可以有多个标题；一个标题可以有多个内容

<dl>

<dt>

<dd>

</dt>

</dl>

<dl>
<dt>JSP</dt>
<dd>后端</dd>
<dd>Java Server Page</dd>

<dt>JavaScript</dt>
<dd>前端</dd>
<dd>写网页</dd>

</dl>

4)用无序列表视线菜单雏形

①li与ul同级

②li写在ul中

10.公告

<marquee behavior="" direction="right" scrollAmount = "3">一条有个性的公告</marquee>
<pre>
a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
</pre>
<marquee behavior="alternate" direction="up" height = 100px scrollAmout = 3>有个性的公告</marquee>
<marquee behavior="alternate" direction="" width=300px onmouseover=stop() onmouseout=start()>悬停时可停止</marquee>
<marquee behavior="" direction=""onmouseover=stop() onmouseout=start()>hello!<br/>
world<br/>
你好<br/>
<a href="www.baidu.com">链接</a>

</marquee>

附：