HTML入门知识点

我的第一个HTML网页:








我的网页



我的第一个网页,hello world!

 

网页效果:

HTML入门知识点_第1张图片

一、文档类型

HTML入门知识点_第2张图片

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

除了,目前在用的形式还有:



二、在EditPlus中添加模板

先编写好一个模板

HTML入门知识点_第3张图片

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


三、头标签

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





头标签



第一次
第二次
第三次


表示换行)

网页效果:

HTML入门知识点_第4张图片

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


四、在新窗口打开超链接

后添加一句

,即可


五、段落标签





文本标签



你好!你好!你好!你好!你好!你好!你好!

你好!你好!你好!你好!你好!你好!你好!

网页效果:

HTML入门知识点_第5张图片


七、字体样式

改变字体颜色

(文本)

你好!你好!你好!你好!你好!你好!你好!

网页效果:

HTML入门知识点_第6张图片

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

HTML入门知识点_第7张图片

HTML入门知识点_第8张图片

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

今天天气好!

网页效果:

HTML入门知识点_第9张图片

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

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


八、标题标签

HTML入门知识点_第10张图片


标题1

标题2

标题3

网页效果:

HTML入门知识点_第11张图片

由于

-

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

标题4


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

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

网页效果:


(补:


可显示一段分界线)


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

a2+b2=100;
a2+b2=200;

网页效果:



十一、用实体表示字符

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


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

HTML入门知识点_第12张图片

<  >  &  "

输出显示成: <  >  &  "


十二、超链接 显示的文字

拓展:绝对路径(完整的路径)和相对路径。关于“相对路径”:

(../ 表示上一级目录     ../../表示上两级目录     ./表示同一级目录)

若文件夹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-附件


返回

网页效果(03-chaolianjie.html):

HTML入门知识点_第13张图片

点击“走一波”,打开新窗口显示:

HTML入门知识点_第14张图片

点击“返回”,在当前页面显示:

HTML入门知识点_第15张图片


十三、锚点

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

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

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





锚点


查看具体信息



这是具体内容

网页效果:

HTML入门知识点_第16张图片

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


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

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

这是附件的锚点

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


十四、发送电子邮件(不常用)

文字

比如: 联系管理员

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


十五、图像标签

当图片不能正常显示时,网页显示的文字

img是一个单标签,没有





图像标签


找不到图片


网页效果:

HTML入门知识点_第17张图片

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

给定宽度为150像素: 找不到图片

HTML入门知识点_第18张图片

HTML入门知识点_第19张图片


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

网页效果:

HTML入门知识点_第20张图片

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

HTML入门知识点_第21张图片

标签可选的属性:
HTML入门知识点_第22张图片

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

HTML入门知识点_第23张图片

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

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


十六、图像映射标签

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

HTML入门知识点_第24张图片就拿这个图片来实现映射。当鼠标点击上面橙色的那个圆圈后,跳转到百度页面;点击中间棕色的那个矩形后(不包括左边的圆形),跳转到搜狗页面。





图像映射map


图标

	
	


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

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

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

网页效果:

HTML入门知识点_第25张图片(两个黑色的框是截图时加上去的)

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


图片映射的应用:


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

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


十七、表格

一个两行两列的表格:(  表示行,表示列  )





表格


12
34
网页效果:

HTML入门知识点_第26张图片

加上表格边框,设置宽度:

12
34
HTML入门知识点_第27张图片

如果第一行有三列,第二行第三行只有两列;并且设置一个表格背景色:

123
34
34
HTML入门知识点_第28张图片


中可选属性:

HTML入门知识点_第29张图片


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

123
456
789


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

中用text-align:center

123
456
789

HTML入门知识点_第30张图片

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

123
456
789

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

123
456
789
HTML入门知识点_第31张图片


表头单元格  (表头的标签,会自动加粗字体)

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

HTML入门知识点_第32张图片


表格标题

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

编号

学生信息表

姓名性别
小明001
小贝002
小红003
HTML入门知识点_第33张图片


表格的行/列合并

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

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





表格合并:菜谱


美味菜馆菜谱

菜谱
素菜凉拌青瓜醋溜土豆丝
生菜汤水果沙拉
荤菜豆豉蒸排骨红烧鱼肉
牛肉牛杂水晶凤爪
HTML入门知识点_第34张图片

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

你可能感兴趣的:(html)