Html介绍:
1.计算机,高手----黑客
2.最好的学习html的方法就是参考别人的网页,源代码
3.查看网页源代码---打开网页,右击鼠标,查看源文件 html非常重要
4.制作一个html网页 html文件是通过浏览器查看
5.html标记语法,书写规则
6.如何制作一个html网页文件
**** 裸奔(只有内容没有样式)
1) 新建一个记事本的文件,将他重命名 *.html
2) 在里面输入网页的信息内容。
3) 再要修饰的内容两侧加上html标记
7.html标记的语法,标记分为两种:单标记、双标记
<标记符>没有结束的标记-----单标记
<开始标记符></结束标记符>
**** 源代码中的效果并不是网页最后的效果
<br />换行
Html所写的全都是给浏览器看的不是给用户看的。用户看的只是内容。
一、基础:
在xhtml中,规定所有html标记都要小写,所有的标记都要有关闭。
html-----------xhtml
<br>-----------<br />
二、html标记的类型
(一)单标记语法
1.<标记名称> ---------单一型,无属性值 eg:<br />
2.<标记名称 属性=”属性值“> ---------单一型,有属性值 eg:<hr width="80%" />
(二)双标记语法
1.<标记名称>...</标记名称> ---------没有属性值 eg:<title></title>
2.<标记名称 属性=“属性值”>...</标记名称> --------有属性值 eg:<body bgcolor="red">...</body>
(三)html标记语法总结
1.单标记:<标记>
2.双标记:<开始标记>内容</结束标记>
3.标记的属性:<标记 属性1=“参数1” 属性2=“属性2”.。。>内容</标记>
说明:
a、标记与属性、属性之间以空格分隔。
b、属性不区分先后顺序:且属性是不必要的
重点强调:虽然在html中标记不区分大小写,但是在xhtml中只能用小写,所以建议从现在开始所有标记都使用小写。
三、html文档结构
1.做网页的------html文件------用浏览器打开
2.所有html文件都有一个基本结构------框架
<html>
<head>
<title>
</title>
</head>
<body>
正文
</body>
</html>
<html>.......</html>标识网页文件的开始与结束,所有的html元素都要放在这对标记中。
<head>......</head>标识网页文件的头部信息,如:标题,搜索引擎,关键字等。
<title>......</title>标识网页文件的标题。
<body>......</body>标识网页文件的主体部分。
文件都有文件名,我们网页的文件名 html文件,可不可以使用中文呢?
如果是在本地电脑,没什么问题将来网页文件都是保存服务器上的,建议都是用中文。
Html有什么作用?
控制网页内容(让浏览者看到的信息)
****如何调出文件的扩展名
工具菜单------文件夹选项-----查看------去掉 隐藏已知文件类型的扩展名(找不到文件夹选项)
meta:
1. meta标记用于定义文件信息,对网页文件进行说明便于搜索引擎查找。放置于<head></head>之间。
2.设置关键字:<meta name="keywords" content="value">多个关键字内容之间可以用“,”分隔。
3.设置描述:<meta name="description" content="value">
4.设置作者:<meta name="author" content="作者名">
5.设置字符集:<meta http-equiv="content-type" content="text/html;charset=gb2312">
6.设置页面定时跳转:<meta http-equiv="refresh" content="2;URL=http://ww.baidu.com" />
四、标记元素的特点 *某些html标记是有默认值的。可以直接输入标记,查看标记的默认状态
(一)网页主体标记body
1.注释:<!--注释内容-->
2.body属性:
<body bgcolor="背景颜色" background=“背景图像” text=“文本颜色” link=“链接文本颜色” vlink=“访问过的文本颜色” alink=“激活的链接文本颜色” leftmargin="左边界" rightmargin=“右边界” topmargin=“上边界” bottommargin=“下边界”>
(二)editplus
****在editplus中复制一行的快捷键 Ctrl+j
在编辑器中,html代码是有颜色区别的:
html标记==蓝色的
标记属性==红色
标记属性的值==紫色
Html注释==绿色
Html标签 html元素 html标记 都是一个东西。
(三)Html语义说明
1.字体修饰:
(1)<font>标记
语法: <font color="文本颜色" size=“字号” face=“字体“>文本</font>
注:网页中的文本字体、字号一般通过css来修饰
(2)字符格式
功能 标记
加粗 <b>文本</b>
倾斜 <i>文本</i>
加强语气(加粗) <strong>文本</strong>
加强语气(倾斜) <em>文本</em>
下划线 <u>文本</u>
删除线 <s>文本</s>
上标 <sup>文本</sup>
下标 <sub>文本</sub>
我们再写代码的时候,流程是这样的, 先写我们的控制内容的标记,例如这内容比较重要可以在语义上加权
<strong>关键字</strong>
一个文章网页的主题-----推荐使用 <h1>文章标题</h1>
网页段落文字内容---<p>段落内容</p>段落内容</p>
(3)段落控制标记
a、段落标记;
格式: <p align="对齐方式">····</p>
属性名称 属性值 说明
align left 左对齐
right 右对齐
center 居中
b、段落控制标记;
段落标题:<hx align="对齐方式">····</hx> 段落标题 说明
x取值[1-6]hx内的文本会自动显示加粗 H1—h6标记默认文字加粗显示
hx针对的对象是段落,而font针对的对象是任意文本
(4)换行:<br /> 换行不换段
(5)修饰标记:
水平直线:<hr />
属性名称 属性值 说明
size 像素,绝对设置 以数字表示,属性值越大,线越粗
百分比,相对设置 以%表示,属性值越大,线越粗
width 像素,绝对设置 长度不会应视窗的改变而改变
百分比,相对设置 长度会随着视窗的改变而改变
nohsade=”noshade“ 实体线
绝对值大于屏幕时不会折行,会形成滚动条 不加%表示像素
在xhtml中,所有的标签都必须要用属性值,如果没有,使用属性名。
例如 <hr noshade=”noshade” />------xhtml
<hr noshade>-------html
(6)特殊标记
a、定义一个块引用:使文本缩进
格式:
属性名称 属性值
<blockquote>....</blopckquote>
b、居中标记
<center>内容</center> (被废弃的标签)
c、予格式化:
<pre></pre>
显示已经格式化好的文字,不加此标记的话,HTML浏览器会忽略所有空格和制表符。
(7)特殊字符的使用:
特殊字符 转义码
空格
版权号© ©
注册商标® ®
" "
& &
< <
> >
*在第一个文字前桥空格是不起作用的,在两个文字中间不管敲多少空格都显示一个空格
转义码后面的;要记得加上,想要空格明显就多几个 效果就会明显好多
(8)列表的标记:
A、列表标记用途:
列表标记可以创建一般的无序列表,编号列表以及定义列表3种方式。还可以在一种列表中镶嵌另一种列表。便于概括显示一系列相关的内容。
a、无序列表<ul>...</ul>
b、有序列表<ol>...</ol>
c、定义列表<dl>...</dl>
B、列表的标记:
无序列表:
语法:<ul type="项目符号类型">
<li type="项目符号类型">内容1</li>
<li>内容2</li>
·····
</ul>
<li></li>表示一个项目
有序列表:
语法:<ol start="列表起点"type=”项目符号类型“>
<li>内容1</li>
<li>内容2</li>
....
</ol>
定义列表:
语法:<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
*<dl></dl>定义列表
*<dt></dt>表示一个项目
*<dd></dd>表示一个项目下的更详细的内容解释
(9)图片
web上支持的格式:
*GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。
*JPEG(联合图像专家组):该格式不支持透明色及动画,颜色可达1670万种
*PNG(网络可移植格式):该格式支持透明色,不支持动画效果,颜色从几种至1670万种。
* 图片标记
路径:
a、绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称
b、相对路径:从当前文档开始的路径
*如果当前文档和目标文档位置平行,则直接书写当前目标文档全称
*如果当前文档和目标文档所在文件夹位置平行,则书写为文件夹名称/目标文档全称
*如果当前文档文件夹和目标文档所在文件夹位置平行,则书写为../目标文档全称
c、根相对路径:从站点根目录开始的路径,以”/“开头
*<img src="图片的路径" />
五、表格
传统的网页布局方式-------使用table表格
Table表格原来是用于保存数据的,保存这种有个事清晰的数据
排版的时候要按照人眼的视觉习惯排版
(一)
1.因为表格中可以包含任何内容,所以在使用DIV+CSS之前网页设计师是使用表格对网页内容进行排版与布局的
2.表格基本结构:
<table>...</table> 定义表格
<tr>...</tr> 定义表行
<td>...</td> 定义表列(单元格)
<th>...</th> 定义标题栏(文字加粗)
3.行的属性:
属性 用途
<tr width=""> 设置行的宽度
<tr height=""> 设置行的高度
<tr bgcolor=""> 设置行的背景颜色
<tr align=""> 设置水平对齐方式
<tr valign=""> 设置垂直对齐方式[top middle bottom]
4.列(单元格)的属性
属性 用途
<td width=""> 设置单元格的宽度
<td height=""> 设置单元格的高度
<td bgcolor=""> 设置单元格的背景颜色
<td background=""> 设置单元格的背景图片
<td align=""> 设置单元格的水平对其方式
<td valign=""> 设置单元格的垂直对其方式
<td rowspan=""> 设置行合并的数目
<td colspan=""> 设置列合并的数目
<td nowarp="nowarp"> 设置在单元格中不换行
(1)合并的思想:当合并多个内容的时候合并时就会有多余的东西。
例如: 有3列 3个td,当合并时就需要删除。合并两个单元格时就是要删除多余的td。
(2)推出一个合并删除td的公式:删除的个数=合并的个数-1.
(3)立体表格效果,其实就是将表格的亮边框与暗边框颜色进行对比。
*表格自身有边框。单元格自身也有边框。
(4)细线表格效果公式
a、将表格自身的border=0
b、给表哥设置背景颜色==细线颜色
c、单元格之间的距离==细线的粗细
当<td></td>之间没有内容时默认是不显示边框的,如果想看到边框就加 。
5.表格的标题:
<table>
<caption>...</caption>
</table>
*<caption>下的属性值有:
属性名称 属性值 说明
align top 标题在表格上方
bottom 标题在表格下方
6.表格的结构化