html特定字段表紅,HTML的基本结构

HTML的基本结构

HTML网页基本结构

==============================================

==============================================

……

==============================================

执行它 先保存它

==============================================

文件名的命名规则 遵循标识符的命名的命名规则就可以了

标签 可以进行一些其他的说明

网页的基本结构

1、常规标签

标签>

2、空标签

说明：

1.在<>中的第一个单词叫做标记标签，元素。

2.标记和属性之间用空格隔开，属性和属性值之间用等号连接，属性值必须放在“”中。

3.一个标签可以没有属性可以有多个属性值。属性和属性之间不分先后顺序。

4.空标签之间没有结束标签。用“/”替代。

网页的基本标签

注释标签

标题标签

一级标签

二级标签

三级标签

……

六级标签

换行标签

段落标签

段落标签 p 标签

水平线标签

---

pandd is a good man

字体样式标签

加粗

倾斜

特殊符号标签

空格

一种写法

你想要几个空格就加几个  

另一种写法(一般不用的)

用圆角的输入法 加空格

大于号

>

小于号

<

引号

"

版权符号

©

图像标签

常见的图像格式

JPG

internet上被广泛使用，采用的是有损压缩，会导致图像的失真，压缩之后体积小，比例清晰，适合在网络中使用。

GIF

在网页中使用最广泛，最普遍，不仅支持透明色还支持动画，因此在网页中使用最为广泛。

PNG

兼有jpg和GIF的优势，同时具备GIF不具备的一些特性，唯一遗憾是的png是一种新兴的图像格式，存在部分旧浏览器不支持的特性。

BMP

BMP(全称Bitmap)是Windows操作系统中的标准图像文件格式，可以分成两类：设备有向量相关位图(DDB)和设备无向量相关位图(DIB)，使用非常广

图像标签属性

alt="tex" 图像的替代文字 当我们的图片加载失败会显示它

title="text" 鼠标悬停提示文字

width="x" 图像的宽度 如果不设置显示图片在页面中的大小

height="y" 图像的高度 如果不设置显示图片在页面中的大小

/>

链接标签

链接标签的属性

target="目标窗口位置" 链接在那个窗口打开 常用值： _self 、_blank>链接文本或图像

链接标签

百度一下

一个人的冒险图片了解一下

bing一下我或者图标就知道

常用的超链接

页面间链接

页面间链接:从一个页面链接到另一个页面

百度一下

锚链接

从A页面的甲位置链接到A页面的乙位置

跳转到锚点1

从A页面的甲位置链接到A页面的乙位置

从A页面的甲位置链接到B页面的乙位置

从目标标签中设置id属性一值 链接处href="[路劲]#值"

设置目标处 ,在链接处链接href="[路径]#值"

功能性链接

-电子邮箱

-QQ

-MSN

列表

列表的分类

无序列表

无序列表格式

无序列表的格式：

(1)无序列表只是前面没编号

• 潘东东 is a good man
• 潘东东 is a nice man
• 潘东东 is a cool man
• 潘东东 is a handsome man
• 潘东东 is a beautiful man

(2)标签是可以嵌套标签的 嵌套了a标签

• 新闻

无序列表的类型 -type取值

取值

说明

disc

项目符号显示为实体圆心默认值

aquare

项目符号显示为实体方心

circle

项目符号显示为空心圆

• 潘东东 is a good man
• 潘东东 is a nice man
• 潘东东 is a cool man

有序列表

有序列表格式

1. 潘东东 is a good man
2. 潘东东 is a nice man
3. 潘东东 is a cool man
4. 潘东东 is a handsome man
5. 潘东东 is a beautiful man

有序列表类型 -type取值

取值

说明

1

使用数字作为项目符号

A/a

使用大写字母/小写字母作为项目符号

I/i

使用大写/小写罗马数字作为项目符号

1. 潘东东 is a good man
2. 潘东东 is a nice man
3. 潘东东 is a cool man
4. 潘东东 is a handsome man
5. 潘东东 is a beautiful man

定义列表

定义列表格式

定义列表

所属学院

计算机技术学院1

计算机技术学院2

所属专业

计算机软件工程

表格

表格的基本结构

1、单元格

2、行

3、列

表格的基本语法

Header1	Header2	Header3	Header4	Header5
第1行第1列	第1行第2列	第1行第3列	第1行第4列	第1行第5列	第1行第6列	第1行第7列
第2行第一列
第3行第一列

table 表格

th 表头

tr 行

td 列

align="center" 表对齐方式

border="10" 表格外面的框厚度

bordercolor="green" 表格外面的框颜色

cellspacing="10" 每行没列之间的空隙

cellpadding="50" 每个单元格内字体距离上下边界的距

表格和单元格对齐方式

表格的对齐方式：默认对齐 居中对齐 左对齐 右对齐

单元格的对齐方式：水平对齐，垂直对齐方式

属性

值

说明

align 水平对齐方式

left

左对齐

align 水平对齐方式

center

居中对齐

align 水平对齐方式

right

右对齐

valign垂直对齐方式

top

顶端对齐

valign垂直对齐方式

middle

居中对齐

valign垂直对齐方式

bottom

底端对齐

valign垂直对齐方式

baseline

基线对齐

代码演示：

表格居中显示

Header
第1行第1列	第1行第2列	第1行第3列	第1行第4列	第1行第5列	第1行第6列	第1行第7列
第2行第一列
第3行第一列

表格的跨行和跨列

代码演示：

Header1	Header2	Header3	Header4	Header5
第1行第1列		第1行第2列	第1行第3列	第1行第4列
第2行第1列	第2行第2列	第2行第3列	第2行第4列	第2行第5列
	第3行第1列	第3行第2列	第3行第3列	第3行第4列
	第4行第1列	第4行第2列	第4行第3列	第4行第4列
第5行第1列	第5行第2列	第5行第3列	第5行第4列	第5行第5列