HTML入门知识点

我的第一个HTML网页：

我的第一个网页，hello world!

 

网页效果：

一、文档类型

浏览器有自己的默认处理机制，不完全依赖声明。

除了，目前在用的形式还有：

二、在EditPlus中添加模板

先编写好一个模板

命名为myHtml.html，放在EditPlus的安装目录下。选择，工具→配置用户工具→模板→添加→（选择新放入文件夹的myHtml.html）→菜单文本改名为myHtml→应用，以后在新建处就可以新建自己添加的模板。

三、头标签

头标签定义页面上所有链接的默认地址或默认目标。

第一次

第二次

第三次


 

（
表示换行）

网页效果：

点击超链接能在当前页面（不打开新的页面）转到百度搜索

四、在新窗口打开超链接

在后添加一句

，即可

五、段落标签

你好！你好！你好！你好！你好！你好！你好！
你好！你好！你好！你好！你好！你好！你好！

网页效果：

七、字体样式

改变字体颜色

（文本）

你好！你好！你好！你好！你好！你好！你好！
  

网页效果：

CSS使用的文本属性和字体属性（在w3c手册可查）

想要将字体显示成 字体：微软雅黑；大小：20像素；颜色：红色；粗细：粗体；样式：斜体

今天天气好！

网页效果：

font标签现在不用，而使用CSS来控制其样式。

使用CSS的基本语法是 style="属性:属性值;属性:属性值;属性:属性值;属性:属性值;"

八、标题标签

标题1
标题2
标题3
  

网页效果：

由于

-

标题大小固定，如果需要不一样大小的标题也可以自己用段落标签来写标题

标题4

九、格式化标签，按格式显示一段代码

function sayHello(){
	window.alert("hello");
}
 

网页效果：

（补：

---

可显示一段分界线）

十、显示右上角/右下角角标和

a2+b2=100;

a2+b2=200; 

网页效果：

十一、用实体表示字符

在很多网站最后都会有一个版权声明

虽然字符©可以直接显示，但不排除一些浏览器会将其显示为乱码。应该习惯用实体表示字符

<  >  &  "

输出显示成： <  >  &  "

十二、超链接 显示的文字

拓展：绝对路径（完整的路径）和相对路径。关于“相对路径”：

（../ 表示上一级目录     ../../表示上两级目录     ./表示同一级目录）

若文件夹x中有文件a.html，b.html，以及文件夹y，文件夹y中有文件c.html

如果要从当前文件c.html找到b.html：  【相对路径】href="../b.html"

                                                                  【绝对路径】href="/x/b.html"

如果要从当前文件a.html找到c.html：  【相对路径】href="./y/c.html"

实现从一个网页点击超链接打开第二个网页（打开新窗口），点击第二个网页的“返回”打开前一个网页（在当前页面返回）。

文件03-chaolianjie.html

走一波

文件03-chaolianjiefujian.html

返回

网页效果（03-chaolianjie.html）：

点击“走一波”，打开新窗口显示：

点击“返回”，在当前页面显示：

十三、锚点

类似百度百科，点击“目录”能定位到目录的位置。

例如，在一个页面中前面设置一个超链接“查看详细信息”，在页面的后面是具体内容（中间添加很多回车，目的是使链接和内容不同时在屏幕上显示）。点击超链接后成功跳转定位到后面的内容。

同样在超链接处使用 句式，然后用‘#’号定义一个锚点的名字，例如flag；然后在具体内容处写上name="flag" id="flag"，以使超链接能跳转到对应锚点。

查看具体信息






这是具体内容

网页效果：

点击“查看具体信息”，就会跳转到显示“这是具体内容”。（用截图好难讲清楚哦，大概就这意思呗）

上面是同一个页面中用锚点进行跳转，其实不同页面之间也可以用锚点跳转哦。
在主文件中写查看附件的锚点

其中04-maodianfujian.html是附件的文件名，附件中添加很多很多回车，最后写

这是附件的锚点

那么，点击主页面的“查看附件的锚点”，就能成功跳转到附件页面的“这是附件的锚点”。

十四、发送电子邮件（不常用）

文字

比如： 联系管理员

但需要安装一个右键客户端软件才能生效，如foxmail ， express

十五、图像标签

img是一个单标签，没有

网页效果：

此时图片按默认大小进行显示。可以给定宽和高对图片进行缩放（通常不会同时给定宽和高，只需要给出宽即可，能按照比例进行缩放）

给定宽度为150像素：

比如我故意把图片路径写错，写成funny1.jpg，则浏览器不能正常找到该图片，网页就不能正常显示该图片，此时就会显示写在alt=" "中的文字

网页效果：

正常显示图片时，当把鼠标移动到图片之上，就会显示title=" "中的文字

标签可选的属性：

如果想给图片加上边框，不再使用border属性，而是用CSS来解决：

边框样式的选取可查看w3c手册的CCS→CSS边框。

图片宽度也可以不用像素值来固定大小，可以用百分比进行显示，写成 width="20%" ，这样图片会根据网页窗口大小而变化。通常情况下最好使图片按像素大小显示。

十六、图像映射标签

除了文字，图片也是可以作为超链接的。而且还可以将图片进行划分，用图片中不同的物体的区域分别进行不同的超链接。比如一个图片中既有圆形又有矩形，可以点击圆形链接到一个页面，点击矩形链接到另一个页面。

就拿这个图片来实现映射。当鼠标点击上面橙色的那个圆圈后，跳转到百度页面；点击中间棕色的那个矩形后（不包括左边的圆形），跳转到搜狗页面。

在圆形的映射中，coords有三个参数，分别是： 圆心横坐标、圆心纵坐标、半径；

在矩形的映射中，coords有四个参数，分别是： 左上角横坐标、左上角纵坐标、右下角横坐标、右下角纵坐标。

由于坐标的单位是像素，我选择用截图工具来选图读取坐标。

网页效果：

（两个黑色的框是截图时加上去的）

当把鼠标分别放在如图圆形和矩形上时，鼠标的指针会变成点击链接的手指（这个截不了图）。点击圆形能在新窗口打开百度页面，点击矩形能在新窗口打开搜狗页面。

图片映射的应用：

比如这样的导航条，鼠标移动到不同文字板块就可以点击跳转到不同页面，其实这导航条可以直接当作图片来处理。

只需要用矩形给每一个板块设计一个映射，点击对应的图片区域链接到不同的网页即可。

十七、表格

一个两行两列的表格：（  表示行，表示列  ）

	
1
2
	
3
4

网页效果：

加上表格边框，设置宽度：

	
1
2
	
3
4

如果第一行有三列，第二行第三行只有两列；并且设置一个表格背景色：

	
1
2
3
	
3
4
	
3
4

中可选属性：

使整个表格在正中间显示：style="margin:0 auto;" 【margin控制表格上下边距为0】

1	2	3
4	5	6
7	8	9

使表格中元素在每一小格内居中显示：在

中用text-align:center

1	2	3
4	5	6
7	8	9

将表格边框变成单线的：【cellspacing 属性规定单元格之间的空间】

	
1
2
3
	
4
5
6
	
7
8
9

改变表格单元边界与单元内容之间的间距：cellpadding

	
1
2
3
	
4
5
6
	
7
8
9

表头单元格  （表头的标签，会自动加粗字体）

	
姓名
编号
性别
	
小明
001
男
	
小贝
002
女
	
小红
003
女

表格标题

如果想控制某一列表格的宽度，可以在表头标签中添加width

编号

	
学生信息表
	
姓名
性别
	
小明
001
男
	
小贝
002
女
	
小红
003
女

表格的行/列合并

colspan="x" 表示x列合并成一个单元格，rowspan="y"表示y行合并成一个单元格

注意其后的行/列需要去掉对应个数的单元格

	
美味菜馆菜谱
	
菜谱
	

	
素菜
凉拌青瓜
醋溜土豆丝
	
生菜汤
水果沙拉  
	
荤菜
豆豉蒸排骨
红烧鱼肉
	
牛肉牛杂
水晶凤爪
	

表格里也可以插入图片哦~