HTML
一般不区分大小写 建议小写(比较规范容易看)
基本语法
基本语句
结束符为’ / ’ 。
部分语句不需要结束符。
最基本的HTML文档:
<HTML></HTML> HTML标记符
<HEAD></HEAD> 位于开头,不包括WEB页的任何实际内容,而是提供与WEB有关的特定信息。
- <TITLE></TITLE> 定义标题
- <bgsound src="soundfilrURL">添加声音
<BODY></BODY>正文标记符 空格回车等在显示时不起作用,如要使其起作用,应使用与格式化标签<PRE></PRE>
或者使用特定标签(参考数字历史实验)。 如空格  ;
BGCOLOR设置背景颜色
TEXT设置正文颜色
或通过格式#RRGGBB设置颜色
- <body background="xxxxx.jpg">添加背景图片
<!--这是一个注释,注释在浏览器中不会显示--> 里面内容不会被执行。
显示特殊字符<和>等等不能直接输入:以“&”开始,“;”结束,需要输入其编号。如小于号 为 < ;
大于号为 > ;
设置字符格式
- FONT标记符
<font xxxx=" "> </font>
常用属性size color face
size一般从1-7取值 3是默认值 也可以用+和——号作为相对值指定。
color指定颜色
face指定字体样式(若系统未安装 则指定无法启用)
-物理特殊样式字符表达
<B></B>黑体标记
<I></I>斜体标记
<U></U>下划线标记
-逻辑字符表达 标记符本身说明了所修饰效果的逻辑含义。
-分段标记符<p></p> 结束标记符可以省略
-<br>强制换行(某些情景更加便捷) 多个<p></p>无法产生空行(需要加空格)。
基本演示
- 标题添加
通过Hn来标识标题和副标题,n是1至6的数字;1到6依次减小,使用时必须用结束标记符。
- 水平线添加
<HR> 默认水平线
<HR SIZE="5">粗为5像素
width="90" 长度为90像素
width="50%" 长度为 屏幕长度百分之50
NOSHADE 属性使水平线以实线显示
color控制其颜色
- ALIGH 属性:右对齐right 左对齐left 居中对齐center 两端对齐justify
应用于P Hn(标题标记符) HR等
example:左对齐的水平线 <HR aligh="left">
-div 标记符 用于文档分节 以便为文档的不同部分分为不同的段落。位于其中的多段文本被认为是一个节,可为它们设置一致的格式。( 注意使用方式 )
-center标记符 居中 <></>
格式嵌套
(1)相容 取叠加效果
(2)冲突 取最近样式符的效果
无序列表
<UL type="square"> </UL>
默认为圆点
UL 标记符最常用的属性type,用来设置项目符号样式。取值为:disc、circle、square。
注意:在 IE 中,type 属性的取值是区分大小写的。
<LI><LI>选项
有序列表
type设置数字序列样式 取值为1 A a I i
<OL type="1" START="3">列表名
<LI><LI><LI>选项
有序无序列表可嵌套
LI置于Ol或UL与其结束符之间
超链接基础
绝对URL 指资源的完整地址。
相对URL资源相对于当前页面的地址。(便于维护)
可分类型为:文本 图像 对象 (超链接) 也可按其它方式分类。
一个 URL 包括 3 部分:协议、计算机地址、文件路径。
使用相对URL时,经常使用两个与DOS类似的符号:
句点(.)表示当前目录
双重句点(..)表示当前目录的上一级目录
-如何引入超链接:<A href=" ">XXXXXX</A> 则此文字附带超链接。
A 标记符用于创建超链接(结束标记符不能省略),href 属性用于指定超链接的目标文件。
如:
内部网页超链接:<a href=test.htm>link</a>
外部网页超链接:
<a href=http://www.microsoft.com>link</a>
-锚点超链接<A href="#AMAZON">XXXXX</A>
需要创建锚点<A name="AMAZON">xxxxx</A>
-文件下载
<a href=xxx.zip(文件地址)>下载</a>
-Email链接
a href=mailto:i@email.com>Email</a>
控制命令:
?subject= 设置信件主题
?cc= 设置抄送人
?bcc= 设置密件抄送人
& 组合多个控制命令
-超链接显示效果
超链接颜色
在BODY标记符中使用LINK 属性设置未被访问的链接的颜色;VLINK 设置已被访问过的链接的颜色;ALINK 设置活动链接(即当前选定的链接)的颜色。
下划线效果
动态效果(悬停效果、鼠标指针形状、鼠标指针跟随效果)
- 插入图片
<img src=" ">
alt 表示图像的简单文本说明
width和height 指定图像的大小
使用 <img> 标签插入图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML插入图片</title>
</head>
<body>
<!-- 使用绝对路径插入网络图片 -->
<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" alt="C语言中文网Logo"> <br>
<!-- 在当前 HTML 文档的上层目录中有一个 images 文件夹,该文件夹下有一张图片 html5.png -->
<img src="../images/html5.png" alt="HTML5 Logo">
如果在同一文件夹,可以直接写成 <img src="xxx.jpg">
</body>
</html>
tips:
在 <img> 标签中可以使用 width 和 height 属性来指定图片的宽度和高度。默认情况下,这些属性的值都是以像素为单位的。
<img src="./logo.gif" alt="C语言中文网Logo" width="150" height="150">
<img src="./html5.png" alt="HTML5 Logo" width="100" height="100">
除此之外,您也可以使用 style 属性指定图片的宽度和高度,如下所示:
<img src="./logo.gif" alt="C语言中文网Logo" style="width: 100px; height: 100px;">
<img src="./html5.png" alt="HTML5 Logo" style="width: 150px; height: 150px;">
注意,width 和 height 属性只是临时修改图片的尺寸,并不会改变图片原始文件的大小。
关于 width 和 height 属性的两点建议:
一般建议为图片设置 width 和 height 属性,以便浏览器可以在加载图片之前为其分配足够的空间,否则图片加载过程中可能会导致您的网站布局失真或闪烁。
如果您的页面使用响应式布局(自适应布局),建议在上传图片之前裁剪好尺寸,而不要设置 width 和 height 属性,这样图片能够跟随屏幕宽度自动改变尺寸,从而不会变形,或者超出屏幕宽度。
图片映射
<a href=""><img src=""></a>
区域链接
eg:
<AREA href="file1.htm" shape="rect" coord="30,123,366,218">
假如定义一个矩形的可点击区域,示例代码如下:
<area shape="rect" coords="x1, y1, x2, y2" href="http://c.biancheng.net/" alt="">
其中 x1、y1 代表矩形的左上角坐标,x2、y2 代表矩形的右下角坐标。
假如定义一个圆形的可点击区域,示例代码如下:
<area shape="circle" coords="x, y, radius" href="" alt="">
其中 x、y 代表圆心的坐标,而 radius 则是圆的半径。
假如定义一个多边形的可点击区域,示例代码如下:
<area shape="poly" coords="x1, y1, x2, y2, x3, y3, ..., xn, yn" href="http://c.biancheng.net/" alt="">
其中每对 x 和 y 的值都代表一个多边形的顶点坐标。
注意:所有坐标都是相对于图片的左上角来计算的。
-滚动字幕
<marquee>滚动字幕内容</marquee>
① 默认情况下,在标签中输入的文字是从右向左滚动的。但是可以通过marquee标签的属性direction来控制滚动的方向。
direction="right" :从左向右滚动
direction="up" :从下向上滚动
direction="left" :从右向左滚动(默认情况)
direction= "down" :从上向下滚动
② marquee标签中的属性scrollamount可以控制文字滚动的速度。
例如:scrollamount="100" 。其中值越大,滚动的速度就越快。
③marquee标签中的属性loop可以控制文字滚动的次数,但是默认的值是-1.也就是无限次滚动
loop="1",就可以让文字仅仅滚动一次。
④marquee标签中的属性behavior可以设置滚动的类型。
behavior="slide",文字滚动到边界后就会停止,不会再继续滚动。
behavior="alternate" 文字滚动到边界后会反方向弹回来,并且来回滚动。
marquee 参数总结:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。
CSS
类似于格式刷
样式定义的语法
Selector{property1:value1;property2:value2…}
eg:h1{text-align:center;color:red}
用户定义类.classname{property:value…}
表示任何class属性为classname的标记符都采用新定义的样式。
用户定义ID
#IDname{property:value}
表示id属性为Idname的标记符采用所定义的样式。
//id与class区别为:id在单个页面中应唯一(不同页面中应该唯一)它定义的是单个元素:class在页面中定义的是一组元素。
虚类SELECTOR
a:link 未访问过的超链接
a:visitied 访问过的超链接
a:active 活动超链接
a:hover 悬停状态的超链接
body {background-color:#ffffff;}
a {
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;}
a:link {
color:#0000ff;
text-decoration:none;}
a:visited {
color:#333399;
text-decoration:none;}
a:active {
color:#0033ff;
text-decoration:underline;}
a:link:hover {
background-color:#e9e9e9;
text-decoration:underline;}
CSS属性单位(长度)
相对值
em: 相关字体的’font-size’值
ex: 相关字体的’x-height’值
px: 像素值, 与设备相关
绝对值
in: 英寸 — 1 英寸= 2.54 厘米
cm: 厘米
mm: 毫米
pt: 点 —CSS 2.1 用的1点= 1/72英寸
pc: 皮卡 — 1 皮卡= 12 点
属性单位(颜色) 使用的时候自己查
颜色名
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow
#RRGGBB
#RGB
rgb(rrr, ggg, bbb)
rgb(rrr%, ggg%, bbb%)
具有上下文关系选择器
- 如果选择器之间用空格分开,就表示具有上下文关系的选择器。
例如,p b {color:red} 表示位于p标记符中的b标记符采用相应格式。
又例如,.nav a{text-decoration:none}表示在class属性为nav的标记符中的a标记符采用相应格式。
CSS属性单位(其他)
百分比单位
p { font-size: 10px }
p { line-height: 120% } /* 120% of ’font-size’ */
URL
url(URL)
body { background: url(“http://www.example.com/pinkish.png”) }
CSS网页中的使用
直接在标记符中嵌套
-HTML标记符的style属性
HTML 标记符的 style 属性
例如:<P style=“text-align:center” >
其中,style属性的取值形式为:
“CSS属性:CSS属性值;...”
-在style标记符定义样式
<STYLE>样式定义</STYLE>
样式定义的方式为Selector{property1:value1;property2:value2;property3:value3;……}
eg:
<HTML>
<HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE>
<STYLE>
<!--
P{ font-size:24px; text-align:center }
H1{ font-family:楷体_gb2312; text-align:center }
-->
</STYLE>
</HEAD>
<BODY>
<H1>一代人</H1>
<P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P>
</BODY>
</HTML>
-链接外部样式表文件
LINK 标记符
<LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
样式表文件可以用文本编辑器编辑,也可以用FP或DW编辑,内容为样式定义。
-样式的优先级(基本)
样式的优先级遵循“就近优先”的原则,也就是说,距离所修饰对象越近的样式,其优先级越高。
样式如果冲突,则采用高优先级样式;如果不冲突,则采用叠加的样式效果。
常用CSS样式属性
-CSS属性:字体属性
font-family,取值为字体名称
font-style (normal/italic/oblique)
font-weight (normal/bold/bolder/lighter/100/…)
font-size (绝对大小/相对大小/长度值/百分比)
font (顺序:weight>variant>style>size/line-height>family)
-css属性:文本属性
line-height
text-align(left/right/center/justify)
text-decoration(none/underline/overline)
text-indent
-CSS属性:颜色与背景属性
color
background-color
background-image
background-attachment(scroll/fixed)
background-repeat(no-repeat/repeat/repeat_x…)
-CSS属性:定位属性
position
(static/relative/absolute)
top和left
width和height
z-index
-CSS过滤器
过滤器是CSS的扩充,它能将特定效果应用于文本容器、图片或其他对象。
只作用于HTML控件元素:body,button,div,img,input,marquee,span,table,td,textarea,th…
filter属性用于定义过滤器效果,格式如下:
filter:过滤器名称(参数)
例如,要为img标记符定义透明度,应使用img{filter:alpha(Opacity=80)}
CSS 应用1 ——页面的整体样式定义
body { font:small Verdana, Geneva, Arial, helvetica, sans-serif; color:black; background-color:white; margin: 0px 0px 30px 0px; border:none;
}
h1, h2, h3, p, li { line-height:150%; }
h2 {font-weight:bold; text-transform:capitalize; color:#666; font-size:medium;}
h2.red { color:#933; }
strong.heading {font-weight:bold; display:block;}
其他例子…
CSS 应用2——导航条
方便易用的导航是网站成功的关键。
导航条一般位于页面顶部或左部。
除了导航条以外,在网页底部和/或右部常常还包含辅助导航。
符合逻辑的、风格一致的鼠标悬停效果能使访问者对网站有合理的控制感。
例如…(有时间尝试实现)
表格的制作
- 表格标记符table
- 表格标题 caption
- 表格行 tr (table row)
- 表格数据 td (table data)
- 表格表头 th (table heading)
表格的构造(合并)
在 TH 或 TD 标记符中使用 rowspan 属性进行行合并。
在 TH 或 TD 标记符中使用 colspan 属性进行列合并。
边界与分隔线
Frame属性
Rules属性
Border属性 可用于是否显示边框
表格对齐
表格的页面对齐
表格内容的对齐
水平对齐(align)
垂直对齐(valign)
控制单元格空白
Cellspacing属性 (框)
Cellpadding属性 (内容)
使用表格设置布局
作用:划分页面区域
背景颜色的设置
Bgcolor设置背景色
Background设置背景图像
复杂的网页布局可能需要借助嵌套表格。
但是,嵌套表格一般不推荐使用,因为它会导致页面的混乱,尤其会导致可用性问题。
要点:
只使用最基本的表格标记符(table, tr, td)。
保持简单和轻量级(尽量不使用嵌套表格)。
使用样式表进行格式设置。
保持布局表格简单明了的要点是只使用表格建立基本的框架,而用样式表进行所有的格式设置。
使用CSS设计布局
div 和 span元素
div 元素用于创建自定义的块元素(block element)
span 元素用于创建自定义的行内元素(inline element)
关键属性:id和class
CSS浮动布局
<div class=“masthead”>
Masthead and headline
</div>
<div class=“main”> Main article </div>
<div class=“sidebar”> List of links </div>
<div class=“footer”>
copyright information
</div>
.masthead {
background: #CCC; padding: 15px; }
.main {
float: left; width: 70%; margin-right:3%; margin-left:3%;}
.footer {
clear: left; /*starts the footer below the floated content */
padding: 15px; background:#666}
css的几种布局方式
固定(使用像素,例如)
弹性(基于文本大小,例如)
液态(基于浏览器窗口,例如)
混合(例如)
定位布局
四种定位方式
static
relative
absolute
fixed
还有更多布局方式 可自己查找
定位和布局属性概括
Box model (margin, padding, border)
定位属性( display、 position、top/right/bottom/right、float、clear、z-index、visibility)
使用框架设计版式
框架集
定义框架的结构
<frameset></frameset>
框架
具体定义每个页面
<frame>
框架集的定义
Rows 定义行结构框架
Cols 定义列结构框架
Rows 和 cols 的取值:
像素数
%
N*
框架的初始化
在 frame 标记符中使用 src 属性可以指定框架中最初显示的页面。
超链接的目标框架
所谓目标框架,是指单击框架网页中的超链接时,对应的目标文件显示在哪个框架中。
设置目标框架
使用<FRAME name=“”>指定框架名称
特殊的框架名称
_blank 表示打开新的窗口
_top 表示返回顶层窗口
在超链接标记符 A 中指定 target 属性,取值为具体的框架名称。
控制框架的显示效果
<FRAME frameborder=“”>设置框架边框。
<FRAME scrolling=“”>设置框架滚动条。
<FRAME marginwidth=“” marginheight=“”>设置框架内容与框架边框之间的空白。
使用页内框架
用 iframe 标记符可以设置页内框架
<iframe src=“”>不支持框架时显示的内容</iframe>
也可以指定页内框架为目标框架
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。