html网页编辑代码简单介绍
? html语法
一、html最基本的语法就是<标记符>内容标记符>,标记符通常都是成对使用
的,有一个开头标记和一个结束标记,结束标记只是在开头标记的前面加一个斜
杠“/”。例如:文字内容
二、html语法的最好学习方法就是查看网页的源代码。
三、html标记分为两种:单标记、双标记。
<标记符>没有结束标记符----单标记
<开始标记符>结束标记符>----双标记
1、单标记
(1)<标记名称>
单一型,无属性值
例如:
(2)<标记名称 属性=“属性值”>
单一型,有属性值
例如:
2、双标记
(3)<标记名称>...标记名称>
没有属性值
例如:
(4)<标记名称 属性=“属性值”>...标记名称>
有属性值
例如:...
...
四、标记的属性:<标记 属性1=参数1 属性2=参数2...>内容标记>
说明:
A、标记与属性、属性之间以空格分隔
B、属性不区分先后顺序;且属性不是必需的
五、文档的结构:
标题
正文
①......标示网页文件的开始与结束,所有的html元素都要放在这对标记中。
②......标示网页文件的头部信息,如标题、搜索引擎关键字等。
③
④......标示网页文件的主体部分。
六、meta标记用于定义文件信息:
1、meta标记用于定义文件信息,对网页文件进行说明,使用于搜索引擎查找。放置于之间。
2、设置关键字:多个关键字内容之间可以用“,”分隔。(value标示的是你所要用的关键字,name或content指属性,keywords指属性值。它的意思是关键字)
3、设置描述: (description的意思是描述,value指的是对上文的内容进一步的描述或修饰)
4、设置作者: (author的意思是作者,作者名前面加上所述的公司单位
5、设置字符集: (charset意思是字符集,gb2312指的是中国国内大陆上通用的中文编码,建议用国际编码)
6、设置页面定时跳转:
八、字符格式
功能 标记
加粗 文本
倾斜 文本
加强语气(加粗) 文本
加强语气(倾斜) 文本
下划线 文本
删除线
上标 文本
下标 文本
九、字体修饰
1、标记
(1)语法:
文本
注:网页中的文本文字、字号一般通过css修饰。
(2)width--宽度 color--颜色 size--大小
颜色:red(红色)、blue(蓝色)、green(绿色)、yellow(黄色)、black(黑色)、white(白色)、gray(灰色)、
(3)标记后面跟属性,标记与属性之间用一个空格隔开,属性后面加属性,它们之间也用一个空格隔开。
(4)标记就是描述网页内容的一些特定符号。
①和指html文档的开始与结束。
②和放在文档的开始,表示文档的标题。
③
④和表示文档的主体,即网页的内容。
⑤
表示换行(换行不换段),
表示横线 内容表示内容加粗
⑥表示字型
(5)我们在写html代码的流程是:先写要控制的内容的标记,若控制的内容比较重要可以在语义上加权限关键字,若这部分内容是这个文章网页的主题,推荐使用
文章标题
。十、网页段落控制标记
1、网页段落文字内容-----
段落内容
2、格式:
...
3、属性名称 属性值 说明
left 左对齐
align center 居中
right 右对齐
4、段落标题
说明:x取值【1~6】hx内的文本会自动加粗显示。
hx针对的对象是段落,而font针对的对象是任意文本。
十一、修饰标记
1、水平直线
2、属性名称 属性值 说明
像素绝对设置,以数字表示,属性值越大,线越粗
size 百分比相对设置,以%表示,属性值越大,线越粗
像素绝对设置,长度不会应视窗的改变而改变
width 百分比相对设置,长度会随着视窗宽度而改变
noshade="noshade" 实体线
十二、特殊标记
1、定义一个块引用:使用文本缩进
2、格式:
属性名称 属性值 说明
---
cite url 被引用的地址
3、居中标记
4、预格式化
...常见应用就是用来表示计算机的源代码
十三、在html文档中使用特殊字符
特殊字符 转义码
空格
版权号 ? ©;
注册商标 ? ®;
“ ";
& &;
< <
> >
十四、列表的标记
1、列表标记用途:
列表标记可以创建一般的无序列表、编号列表,以及定义列表三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。
(1)、无序列表
- ...
①语法:
- 1
...
注:
参数值 描述
(必须小写字母)
disc ●
circle ○
square ■
(2)、有序列表
- ...
①语法:
- 内容1
- 内容2
...
属性名称 属性值 说明
1 表示以1、2、3、4来表示
a 表示以a、b、c、d来表示
type A 表示以A、B、C、D来表示
i 表示以i、ii、iii来表示
l 表示以l、ll、lll来表示
(3)、定义列表
- ...
①语法:
- 标题1
- 内容1
- 内容2
- 标题1
- 内容1<
/dd>
- 内容2
②
表示一个项目(标题)
表示一个项目(标题)下得更详细的内容的解释
十五、图片
1、web上支持的图片格式
①GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。
②JPEG(jpg)(联合图像专家组):该格式不支持透明色及动画,颜色可达1670万种。
③PNG(网络可移植格式):该格式支持透明色,不支持动画,颜色从几种至1670万种。
2、图片标记
3、图片路径:
● ?绝对路径:提供目标为文档的完整主机名称、路径信息、及文档全称。
● ?相对路径:从当前文档开始的路径;
?如果当前文档和目标文档位置平行,则直接书写目标文 档全称。
?如果当前文档和目标文档所在文件夹位置平行,则书写为文件夹名称/目标文档全称。
?如果当前文档所在文件夹和目标文档位置平行,则书写为../目标文档全称。
● ?根相对路径:从站点根目录开始的路径,以“/"开头。
4、属性名称 属性值 说明
src URL 图片的路径
alt 文本 规定图片的替代文本(图片无法显示时)
title 文本 鼠标悬停时显示的内容
width 像素/百分比 设置图片宽
height 像素/百分比 设置图片高
border 数字 设置图片边框
left 图片靠左,文字靠右
right 图片靠右,文字靠左
align top 文字垂直居上靠
middle 文字垂直居中
botton 文字垂直居下(默认)
vspace 像素 定义图像顶部和底部的空白(垂直边距)
hspace 像素 定义图像左侧和右侧的空白(水平边距)
十六、表格
1、因为表格中可以包含任何内容,所以在使用DIV+CSS之前,网页设计师是使用表格对网页内容进行排版与布局的。
2、表格基本结构:
<table>...</table>---定义表格
<tr>...</tr>---定义表行
<td>...</td>---定义表列(单元格)
3、表格的属性:<table>
属性
用途
属性 用途 | 设置单元格的宽度 | 设置单元格的高度 | 设置单元格的背景颜色 | 设置单元格的背景图片 | 设置单元格的水平对齐方式 | 设置单元格的垂直对齐方式 | 设置行合并的数目 | 设置列合并的数目 | 设置在单元格中不换行 ●注:①合并删除单元格td的公式:删除的个数=合并的个数-1 ②立体表格效果,其实就是将表格的亮边框颜色与暗边框颜色进行对比。 ③表格自身有边框,单元格自身也有边框。 ④细线表格效果公式: 【1】、将表格自身的border=0 【2】、给表格设置背景颜色=细线的颜色 【3】、给表格设置单元格之间的距离=细线的粗细 5、行的属性: |