本文详细介绍HTML、CSS和JS基础知识，涵盖颜色设定、布局标签、字体属性、列表创建、图像处理及超链接设置等内容，适合前端开发新手入门。
HTML前端学习，通过思维导图整理培训一周的内容
培训已经不知不觉的过去了两个星期；没想到大学里糊里糊涂的学了些七七八八的内容还是有点作用的。至少更了解这个行业，知道自己要学什么。
培训的方向是软件测试；虽然很想专向开发，但考虑本科是师范学校的软件工程学生，实在没有太多的实践基础和动手能力。只好以测试为敲门砖，毕竟这条路还是很长很长，只要自己心中有方向，都是有机会的。
这两周主要进行了第一个模块的培训，前端的培训。主要包括了三个部分：HTML，CSS和JS。第一次接触前端内容，跟着老师的步骤一步一步的学习，一点点的敲。没想到自己也能很快的做一个网页。
马上又要进入下一个阶段的内容，所以，周末把知识点总结了一份。
前端的主要内容框架：
其中主要内容集中在HTML和CSS两个模块。HTML部分核心是各类的标签属性及其使用。
主体标签
在和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。 标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方式
。
颜色的设定
颜色值是一个关键字或一个 RGB 格式的数字。 颜色是由 “red” “green” "blue " 三原色组合而成的，在 HTML 中对颜色 的定义是用十六进位的，对于三原色 HTML 分别给予两个十六进位去定义，也 就是每个原色可有 256 种彩度，故此三原色可混合成 16777216 种颜色。
*例如：*白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为 ffffff
红色的组成是 red=ff, green= 00, blue= 00, RGB 值即为 ff0000
绿色的组成是 red=00, green=ff, blue= 00, RGB 值即为 00ff00
蓝色的组成是 red=00, green= 00, blue= ff, RGB 值即为 0000ff
黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000
应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor="#336699" 用英文名字表示颜色时直 接写名字。如
bgcolor=green
RGB 颜色可以有四种表达形式:： • #rrggbb ( 如 ，#00cc00) • #rgb ( 如 ，#0c0) • rgb(x,x,x) x 是一个介乎 0 到 255 之间的整数 ( 如 ，rgb(0,204,0)) •
rgb(y%,y%,y%) y 是一个介乎 0.0 到 100.0 之间的整数 ( 如 ， rgb(0%,80%,0%)
Windows VGA(视频图像阵列)形成了 16 各关键字: aqua，black， blue，fuchsia, gray，green，
lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow
布局标签
对于布局标签这一块，我将它分为了两类，一类是常规的布局标签，这类标签不带属性（或者说不常用）；一类上带有属性的布局标签。
字体属性
字体属性，常用的是标题使用和常规字体属性；还有一种是特殊文字样式标签
例：
<body><pre><b>这些文字是粗体的</b><i>这些文字是斜体的</i>
<u>这些文字带有下划线</u>
em 标签：<em>用于强调的文本，一般显示为斜体字</em>
strong标签：<strong>用于特别强调的文本，显示为粗体字</strong>
cite标签：<cite>用于引证和举例，通常是斜体字</cite>
small标签：<small>规定文本以小号字显示</small>
big 标签：<big>规定文本以大号字显示</big>
samp 标签：<samp>显示一段计算机常用的字体，即宽度相等的字体</samp>
kbd标签：<kbd>由用户输入文本，通常显示为较粗的宽体字</kbd>
var标签：<var>用来表示变量，通常显示为斜体字</var>
dfn标签：<dfn>表示一个定义或说明，通常显示为斜体字</dfn>
sup 标签：12<sup>2</sup>=144
sub 标签：硫酸亚铁的分子式是 Fe<sub>2</sub>SO<sub>4</sub>
code标签：<code>用来指出这是一组代码</code>
</pre> </body>
建立列表
列表分为两类，一是无序列表，一是有序列表，无序列表就是项目各条列间 并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前 面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的。
图像处理
在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。
设置背景图像的格式：
<body background= "image-url">
其中 “image-url” 指图像的位置。
对于img的使用，属性有：
对于字画设定的对齐方式：
- 单独占一行时，放在
<p>…</p>中，用的对齐属性进行设置。
2) 与文本在同一行时，用其自身的 align 属性（top,middle,bottom）设置图像与文本的 垂直对齐。其中：bottom 为默认值。
3)图文混排时，可实现图像的左、右环绕文本，用 align 属性（left 图像在左、文本 在右,right）。
建立超链接
格式为：<A HREF="资源地址" TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称 </A>
说明：标签<A>表示一个链接的开始，</A>表示链接的结束；
属性“HREF”定义了这个链接所指的目标地址；目标地址是重要的，一旦路径上出现差错，该资源就 无法访问
TARGET:该属性用于指定打开链接的目标窗口，其默认方式是原窗口。
书签链接
格式：
在同一页面要使用链接的地址：
<a href="#书签名称" target="窗口名称">超连链标题名称</a>
在不同页面要使用链接的地址：
<a href="URL 地址#书签名称" target="窗口名称">超链接标题名称</a>
链接到的目的地址：
<a name="书签名称">目标超链接名称</a>
name 的属性值为该目标定位点的定位标记点名称，是给特定位置点(这个位置点也叫锚点)起个名称。
发送E-mail
基本语法：<a href="mailto:E-mali 地址: subject=邮件主题">描述文字</a>
在实际应用中，用户还可以加入另外的两个参数"?cc=“E-mali 地址"和”&body=?",这分别表示在发送邮件 的同时把邮件抄送给第三者和设定邮件主题内容。
链接 FTP
lnternet 上资源丰富，通过 ftp 文件传输协议，就可以获得各种免费软件和其他文件，ftp 协议是使计算 机与计算机之间能够相互通信的语言，ftp 使文件和文件夹能够在 lnternet 上公开传输，通过 ftp 可以访问 某个网络或服务器，而不需要该计算机的账户和授权的密码就可通过 ftp 公开获得数据
语法格式： <a href="ftp://ftp 主机地址">文字链接</a>
影像地图（Image Map）
标签的使用格式： <img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL 资源地址"> …
可根据需要定义多少个热点区域 <area shape=形状 coords=区域座标列表 href="URL 资源地址">
【1】shape – 定义热点形状
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
【2】coords – 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：
<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
在制作本文介绍的效果时应注意的几点：
1、在<img>标记不要忘记设置 usemap、ismap 参数，且 usemap 的参数值必须与<map>标记 中的 name 参数值相同，也就是说，“图像地图名称”要一致；
2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有<area>标记均要在之间；
3、在标记中的 cords 参数设定的坐标格式要与 shape 参数设定的作用区域形状配套，避 免出现在 shape 参数设置的矩形作用区域，而在 cords 中设置的却是多边形区域顶点坐标的现象出现。
扫一扫
1475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
