Web基础复习

最新推荐文章于 2024-04-03 03:35:40 发布

Avadakur

最新推荐文章于 2024-04-03 03:35:40 发布

阅读量921

点赞数 1

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/Avadakur/article/details/118188328

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、Web网页设计相关概念

Web 万维网的缩写–> www
HTTP 超文本传输协议 Web浏览器和web服务器之间的应用层通信协议
互联网、因特网、万维网
URL 统一资源定位符
超链接从一个网页指向另一个目标的连接关系

2、HTML

2.1 HTML 文档结构

2.1.1 基本结构

<html>
    <head>
     
    </head>
    <body>
       
    </body>
</html>

2.2.1 页面标题

基本语法

<title>标题信息显示在浏览器的标题栏上</title>

<html>
    <head>
     	<title>页面标题</title>
    </head>
    <body>
       content
    </body>
</html>

2.2.2 元信息

标记

基本语法

<meta name = "" content = "">
<meta http-equiv = "" content = "">

2.2.3 样式标记

基本语法

<style type = "text/css">
    P{
        font-size:24px;
    	color:#FFFFFF;
    }
</style>

语法说明

样式style标记必须插入在头部head标记中 style开始/style结束。

2.3 主体body

2.3.1 body标记

完成的html由头部和主体两个部分组成。

头部可定义：标题、样式；

主体可定义：段落，标题字，超链接，脚本，表格，表单等元素。

<html>
    <head>
        <title>网页设计</title>
    </head>
    <body>
        <h3 align = "center">
            Web前端开发技术课程
        </h3>
        <hr color = "red">
        <p>
            这里是一堆文字
        </p>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wxggFVZ-1624517648542)(D:\360MoveData\Users\14326\Desktop\QQ图片20210624103637.png)]

Body标记属性表

属性	值	描述
text	rgb grb #RRGGBB colorname	规定文档中所有文本的颜色
bgcolor	同上	规定文档的背景颜色。
alink	同上	规定文档中活动链接的颜色
link	同上	规定文档中未访问链接的默认颜色
vlink	同上	规定文档中已被访问链接的颜色。
background	url	规定文档的背景图像。
topmargin	pixel	规定文档中上边距的大小
leftmargin	pixel	规定文档中左边距的大小

2.4 HTML基本语法

2.4.1 标记语法

1、单标记

<br> <br/> 表示换行

<hr> <hr/> 表示水平分割线

2、双标记

<h3><i>正确的嵌套不交叉代码</i></h3>

2.4.2 属性语法

<hr size="3" color="red" align="center">

2.4.3 注释

3、格式化文字与段落

3.1 Web页面初步设计

3.1.3 特殊符号

空格: &nbsp

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tL6Qf0tu-1624517648544)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624105038999.png)]

3.3.1 段落标记

<p align = "center">这里是一个段落</p>

3.3.3 分割线标记属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iBN33xLL-1624517648545)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624105317615.png)]

3.3.5 段落缩进

<blockquote> 需要缩进的内容</blockquote>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tTFQbinN-1624517648546)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624105608407.png)]

4、列表

4.1 列表简介

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zj2jFJFf-1624517648547)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624105706211.png)]

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul type="disc">
			<li>苹果</li>
			<li>香蕉</li>
			<li type="circle">柠檬</li>
		</ul>
		<ul type="circle">
			<li>苹果</li>
			<li>香蕉</li>
			<li>柠檬</li>
		</ul>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9SiuJsT-1624517648548)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624110044746.png)]

4.3 菜单列表和目录列表

<dir type=""> 
		<li type="">项目名称</li> 
		<li type="">项目名称</li> 
		<li type="">项目名称</li> 
</dir> 
<menu type="">
		<li type="">项目名称</li> 
		<li type="">项目名称</li> 
		<li type="">项目名称</li> 
</menu>

4.4 有序列表

<ol type=""> <!--type: A a  -->
			<li type="">项目名称</li> 
			<li type="">项目名称</li> 
			<li type="">项目名称</li> 
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-daWHWMYL-1624517648549)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624110515979.png)]

4.5 嵌套列表

<ol>
			<li>报名 第一行</li>
				<ol>
					<li>报名时间</li>
					<li>报名时间</li>
					<li>报名时间</li>
					<li>报名时间</li>
					<li>注意事项：</li>
					<ul>
						<li>是是是</li>
						<li>是是是</li>
						<li>是是是</li>
					</ul>
				</ol>
			<li>培训 第二行</li>
			<li>测试 第三行</li>
		</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTEV1xM1-1624517648550)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624111107838.png)]

5、超链接

5.2.1 语法

<a href=”url” name=”” title=”提示信息” target=”窗口名称”>超链接名称</a>

语法说明

超链接由目的地址、链接标签、打开位置等三部分组成：

href：链接指向的目标文件

name：创建文档内的标签。

title：指向链接的提示信息

target：指定打开的目标窗口

5.3.4 图片链接

< img src=“url” width=“” height=“” hspace=“” vspace=“” align=“” border=“” alt=“”>

语法说明

alt ：添加图片的提示文字；

width/height：设置图片的宽度和高度(px,%)

border：设置图片边框(px)

align ：设置图片对齐方式（水平/垂直两个方向）

hspase/vspase ：设置图片的间距设置(px)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h4>单机图像进入百度</h4>
		<a href="https://www.baidu.com/">
			<img src="baidu.jpg" border="0" width="200px" height="100px">
		</a>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1KIWYS3I-1624517648551)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624113046965.png)]

6、图片与多媒体文件

6.1 图片

6.1.1 插入图片

<img src=”图片地址”>

6.1.2 提示文字

<img src=”图片地址” alt=”提示文字”>

6.1.3 高度和宽度

<img src=”图片地址” width=”value” height=”value”>

6.1.4 设置图片的边框

<img src=”图片地址” border=”value”>

6.1.5 对齐方式

<img src=”图片地址” align=”value”>

6.1.6 间距

<img src=”图片地址” hspace=”水平间距” vspace="垂直间距">

6.1.7 图片链接

<a href=”URL” ><img src=”图片地址” ></a>

6.2 滚动文字

6.2.1 添加滚动文字

<marquee>滚动文字</marquee>

6.2.2 背景颜色

<marquee bgcolor=”#66ff33” >滚动文字</marquee>

6.2.3 设置滚动方向

<marquee direction="up/down/right/left">滚动文字</marquee>

6.2.4设置滚动方式

<marquee behavior=”滚动方式” >滚动文字</marquee>

slide 滚动一次
alternate 来回滚动
scroll 一直向前滚动

6.2.5 滚动速度

<marquee scrollamount=”滚动速度” >滚动文字 </marquee>

6.2.6 滚动延迟

<marquee scrolldelay=”延迟时间” >滚动文字 </marquee>

延迟时间以毫秒为单位，该延迟时间设置得越小滚动速度越快，延迟时间设置得越大即会出现走走停停的效果。

6.2.7 滚动范围

<marquee width=”宽度值” height=”高度值”>滚动文字</marquee>

6.2.8 滚动空白空间

<marquee hspace=”水平范围” vspace=”垂直范围” >滚动文字</marquee>

6.2.9 滚动循环

<marquee loop=”循环次数” >滚动文字</marquee>

6.3 背景音乐与其他多媒体文件

6.3.1 添加背景音乐

<bgsound src=”背景音乐地址” loop=”播放次数”>

loop属性用来指定背景音乐播放的次数，用数字表示。Infinite 和-1 表示播放无限次，直到关闭浏览器为止。

6.3.2 音频和视频

<embed src=”多媒体文件地址” width=”播放界面的宽度” height=”播放界面的高度” autostart=”true|false” loop=”循环次数”></embed>

width和height一定要设置，单位为像素，否则无法正确显示播放多媒体文件的软件；
autostart的取值有两个：一个是true，表示自动播放；另一个是false，表示不自动播放；
loop表示循环的次数，用数字表示。值为true时，循环播放；值为false时，不循环播放。

7、CSS+DIV

7.1 CSS概念

CSS（Cascading Style Sheet）层叠样式表，也称为级联样式表，用来进行网页风格设计。

7.2 使用CSS控制Web页面

7.2.1 CSS基本语法

CSS规则由两个主要的部分构成：选择器（Selector或称选择符）和声明（Declaration）。

p{   font-style:italic;
     font-size:20px;
      ont-family:黑体
}

<style tepe = "text/css"> 
/*
这里是CSS的注释方法
*/
</style>

7.2.2 CSS选择器类型

元素选择器

p {color:gray;} 
h2 {color:silver;}

类选择器

.box .header{
				height:125px;
				border:1px solid #000000;
				line-height:120px;
				background-color: #000000;
			}

id选择器

 #intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

伪类选择器

7.2.3 CSS选择器声明

集体声明

h1, h2, h3, h4, h5, h6 {color:blue;}

全局声明

* {color:blue;}

7.2.4 CSS定义与引用

内联样式表（最好避免使用，应用HTML+CSS）

<标记  style=“属性1：属性值1；属性2：属性值2；…….”>

内部样式表

内部样式表写在HTML的<head></head>中，只对所在的网页有效。使用<style></style>标记对来设置CSS规则。

<style type=“text/css”>
   <! --
          选择器1{属性1：属性值1；属性2：属性值2；…..}
          选择器2{属性1：属性值1；属性2：属性值2；…..}
          选择器3{属性1：属性值1；属性2：属性值2；…..}
    -->
 </style>

链接外部样式表

Link标记是单标记，也是空标记，它仅包含属性。此标记只能存在于head部分，不过它可以出现任何次数。

<link href=“out.css” rel=“stylesheet” type=“text/css”>

导入外部样式表

<style type=“text/css”>
          @import  url(“外部样式表文件名称”)；
           选择器1{属性1：属性值1；属性2：属性值2；….}
           选择器2{属性1：属性值1；属性2：属性值2；….}
           …..
            选择器n{属性1：属性值1；属性2：属性值2；….}
</style>

7.3 CSS继承与层叠

行内样式>id样式>class样式>元素样式

7.4 DIV图层

7.4.1 DIV定义与语法

定义：<div>是一个块级元素，其前后均有换行符，可定义文档中的分区或节。

<div id="layer1" style = "position:absolute; left:29px; top:12px; width:35px; height:104px; background:#99cccc; border:2px dashed #ffff00;">块包含的内容</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LcKiyIsu-1624517648551)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624131252567.png)]

7.4.2 DIV的使用

<div>通常和id或class配合使用，把文档分割为独立的、不同的部分，对文档进行布局。<div>是一个块级元素。这意味着它的内容自动地开始一个新行。

7.5 嵌套图层

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.inline{
				display: inline-block;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
				border: 2px solid black;
			}
			#div3{
				width: 100px;
				height: 100px;
				background-color:aqua;
				border: 2px solid black;
			}
			#div4{
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				border: 2px solid black;
			}
			#div1{
				width: 500px;
				height: 500px;
				border: 2px solid black;
				
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2" class="inline">
					这里是div2
			</div>
			<div id="div3" class="inline">
				这里是div3
			</div>
			<div id="div4">
				这里是div4
			</div>
		</div>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFHfEh64-1624517648552)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624132750221.png)]

8、CSS+DIV高级应用

8.2 CSS文字样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5Q8FSw1-1624517648552)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624133641898.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQvpjNlm-1624517648553)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624133714641.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nOJ3xRw2-1624517648553)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624133728141.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-orHXDAFR-1624517648553)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624133739490.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-64aAKege-1624517648555)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624133751444.png)]

8.3 CSS精细排版样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-owfzPYUQ-1624517648555)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624133958873.png)]

8.3.1 字符间距

letter-spacing:normal|长度单位

8.3.2 首行缩进

text-indent:长度单位|百分比单位

8.3.3 字符装饰

text-decoration:none|underline|blink|overline|line-through

none：表示文字无装饰。
blink：表示文字闪烁。
underline：表示文字加下划线。
line-through：表示文字加贯穿线。
overline : 表示文字加上划线。

8.3.4 英文大小写转换

text-transform:capitalize|uppercase|lowercase|none

capitalize：将每个单词的第一个字母转换成大写，其余无转换发生。
uppercase：转换成大写。
lowercase：转换成小写。
none：无转换发生。

8.3.5 水平对齐

text-align:left|right|center|justify

left：表示左对齐，默认值。
right：表示右对齐。
enter：表示居中。
justify：表示两端对齐。

8.3.6 垂直对齐

vertical-align:baseline|sub|super|super|top|text-top|middle|bottom|text-bottom|length

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ThEqxn7u-1624517648555)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624134730132.png)]

8.3.7 行距

line-height:normal|length

normal：默认行高。
length：百分比数字|由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。

8.4 CSS背景与颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Of5aTrWH-1624517648556)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624134928776.png)]

8.4.2 背景

1、background-color 属性：语法与color类似

2、background-image属性：

background-image:none|url

3、background-repeat属性

background-repeat:repeat|repeat-x|repeat-y|no-repeat

repeat
使用背景图案完全填充元素大小的空间；
repeat-x
使用背景图案在水平方向从左到右填充元素大小的空间；
repeat-y
使用背景图案在竖直方向从上到下填充元素大小的空间；
no-repeat
不使用背景图案重复填充元素。

4、background-attachment

background-attachment属性用于设置背景图案的滚动方式，当某元素占用的空间在浏览器中需要使用滚动条才能完整看到时，可以用该属性指定在文字元素滚动的同时，背景图案是否一起滚动。其参数值有两种：

scroll
表示在文字页面滚动时，背景一起滚动；
fixed
表示在文字页面滚动时，背景固定不滚动。

5、background-position

background-position属性用于设置背景图案的具体起始位置。其参数值有三种形式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYudRGkn-1624517648556)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624135330790.png)]

6、background复合属性

background:background-color|background-image| background-repeat|background-attachment|background-position

8.5 CSS列表样式

list-style-type

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qrx5J4Ao-1624517648557)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624135556302.png)]

list-style-image

list-style-image:url|none

list-style-position

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4wBUgDRU-1624517648557)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624140005164.png)]

8.6 CSS盒子模型

在网页设计中，每个元素都是长方形的盒子，便产生了特定的盒子模型。盒子模型中，重要的概念有

内容（content）
填充（padding）
边框（border）
边界（margin）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ozd5a95b-1624517648558)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624140451566.png)]

8.6.2 边界属性设置

边界属性是margin，也称为外边距，表示盒子边框与页面边界或其他盒子之间的距离，属性值为长度值、百分数或auto，属性效果是围绕元素边框的“空白” 。

margin-top
margin-right
margin-bottom
margin-left

8.6.3 边框属性设置

边框属性是border，用于设置边框：

风格（border-style）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sn0OmDIq-1624517648558)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624140615065.png)]

宽度（border-width）

border-top-width
border-right-width
border-bottom-width
border-left-width

颜色（border-color）

border-top-color
border-right-color
border-bottom-color
border-left-color

8.6.4 填充属性设置

填充属性是padding，也称为内边距，表示元素内容与边框之间的距离，属性值为长度值、百分数，属性效果是包含在元素边框里面并围绕着元素内容的“元素背景”。

padding-top
padding-right
padding-bottom
padding-left

8.7 页面布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LsClD5bM-1624517648559)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624140859500.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QkyWmyK-1624517648560)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624140907021.png)]

9、表格

9.1 表格

简易学生表格

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="" cellpadding="">
			<tr>
				<th>姓名</th>
				<th>单位</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>管理学院</td>
				<td>1903133s</td>
			</tr>
			<tr>
				<td>李白</td>
				<td>随便学院</td>
				<td>120285552</td>
			</tr>
		</table>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16ruEerJ-1624517648560)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624141215381.png)]

9.2 表格标记

表格标记：<table></table>

表格标题标记：<caption></caption>

表格表头标记：<th></th>

表格行标记：<tr></tr>

表格列标记：<td></td>

定义表格的表头：<thead></thead>

定义表格的主体：<tbody></tbody>

定义表格的页脚：<tfoot></tfoot>

9.2.1 表格标记语法

<table></table>: 插入表格

<tr></tr>: 插入一行

<td></td>: 插入一列

9.2.2 表格标题

<caption>表格标题</caption>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="" cellpadding="">
            <caption>学生表</caption>
			<tr>
				<th>姓名</th>
				<th>单位</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>管理学院</td>
				<td>1903133s</td>
			</tr>
			<tr>
				<td>李白</td>
				<td>随便学院</td>
				<td>120285552</td>
			</tr>
		</table>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H7tUujzt-1624517648561)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624141548483.png)]

9.2.3 设置表格表头

<th>这里就是表头</th>

9.3 表格属性

9.3.1 表格边框

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="2" bordercolor="red" cellspacing="" cellpadding="">
			<caption>学生表</caption>
			<tr>
				<th>姓名</th>
				<th>单位</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>管理学院</td>
				<td>1903133s</td>
			</tr>
		</table>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGQeVLdr-1624517648562)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624141900361.png)]

9.3.2 宽度和高度

 <table width=”” height=””>
      <tr>
          <td></td>
      </tr>
   </table>

9.3.3 表格背景颜色与背景图片

<table bgcolor=”” background=”图片路径”>
      <tr>
          <td></td>
      </tr>
  </table>

9.3.4 表格边框样式

<table border="2" bordercolor="red" frame="hsides" rules="all">
			<caption>学生表</caption>
			<tr>
				<th>姓名</th>
				<th>单位</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>管理学院</td>
				<td>1903133s</td>
			</tr>
		</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8DqEcNkX-1624517648562)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624142114723.png)]

9.3.5 表格单元格间距

  <table cellspacing=””  cellpadding=”0”>
      <tr>
          <td>&nbsp</td>
          <td>&nbsp</td>
          <td>&nbsp</td>
      </tr>
  </table>

<table border="1" cellspacing="30px" cellpadding="50px">
			<caption>学生表</caption>
			<tr>
				<th>姓名</th>
				<th>单位</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>管理学院</td>
				<td>1903133s</td>
			</tr>
			<tr>
				<td>李白</td>
				<td>随便学院</td>
				<td>120285552</td>
			</tr>
		</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d9h9aH8v-1624517648563)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624142259943.png)]

9.3.6 表格水平对齐

  <table align=”left|center|right”>
  </table>

9.4 设置表格行的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-On0hXMDf-1624517648563)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624142423988.png)]

align:

Left
Right
Center

valign:

middle:居中对齐
bottom:内容低端对齐；
baseline:内容基线对齐。
top:内容顶端对齐；

9.5 单元格属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OvAmGn4w-1624517648564)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624142634105.png)]

跨行属性

<table border="" cellspacing="" cellpadding="">
			<tr>
				<td rowspan="2">第一列</td>
				<td>第二列</td>
			</tr>
			<tr>
				<!-- 这里有一列 第一行的第一列占据 -->
				<td >第二列</td>
			</tr>
			<tr>
				<td >第一列</td>
				<td>第二列</td>
			</tr>
		</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sRJK4CfU-1624517648565)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624143035119.png)]

跨列属性

<table border="" cellspacing="" cellpadding="">
			<tr>
				<td colspan="2" align="center">第一列</td>
				<!--这里有一列被占据  -->
			</tr>
			<tr>
				<td>第一列</td>
				<td >第二列</td>
			</tr>
			<tr>
				<td >第一列</td>
				<td>第二列</td>
			</tr>
		</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEl7ZRur-1624517648565)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624143243593.png)]

9.6 表格嵌套

<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>&nbsp;</td>
				<td rowspan="3">正文</td>
				<td>新闻链接</td>
			</tr>
			<tr>
				<td>
					<table border="" cellspacing="" cellpadding="">
						<tr>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td>导航列表</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
					</table>
				</td>
				<td rowspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P1zvjUh1-1624517648565)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624143642854.png)]

10、框架

10.1 框架概述

<html>
   <head>
       <title> 框架的基本结构 </title>
   </head>
   <frameset>
       <frame>
       </frame>
   </frameset>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JXfPKV9u-1624517648565)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624143926412.png)]

10.2.1 框架集窗口水平分割

<frameset  rows=”value1,value2”>
       <frame src=”URL”>
       <frame src=”URL”>
       …
</frameset>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<frameset rows="50%,50%">
			<frame src="http://www.taobao.com" />
			<frame src="http://www.baidu.com" />
		</frameset>
	</head>
	<body>
		
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wNidLp5Y-1624517648566)(C:\Users\14326\AppData\Roaming\Typora\typora-user-images\image-20210624144206210.png)]

10.2.3 垂直分割

<frameset cols=”value1,value2”>
       <frame src=”URL”>
       <frame src=”URL”>
       …
</frameset>

10.2.4 框架集的边框

<!--border 为整数 框架边框的宽度 -->
<!--frameborder 取值为"0"或"1"，"0"表示不显示边框，"1"表示显示边框，默认值为1。 -->
<frameset border="border" frameborder = "frameborder">   
</frameset>

10.3 框架的设置

10.3.1 框架名称

<frameset>
       <frame name="">
       <frame name="">
       …
</frameset>

10.3.2 框架网页

 <frameset>
       <frame src=”URL”>
       <frame src=”URL”>
 
 </frameset

10.3.3 滚动条

<frameset>
       <frame src=”URL” scrolling=”value”>
       <frame src=”URL” scrolling=”value”>
       …
</frameset>
<!--
Scrolling属性有三种取值：
   yes-显示滚动条；
   no-无滚动条；
   auto-自动。
-->

10.3.4 框架的边距

<!--
利用框架frame标记的marginwidth和marginheight属性分别定义框架的左侧和右侧的边距、框架的上方和下方的边距。
marginwidth和marginheight属性值单位为像素px。
-->
<frameset>
    <frame src="URL" marginwidth="value" marginheight="value">
    <frame src="URL" marginwidth="value" marginheight="value">
    …
</frameset>

10.4 浮动框架

<iframe 属性名称="value">
   </ iframe>

Avadakur

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Web基础复习

1、Web网页设计相关概念Web 万维网的缩写–> wwwHTTP 超文本传输协议 Web浏览器和web服务器之间的应用层通信协议互联网、因特网、万维网URL 统一资源定位符超链接从一个网页指向另一个目标的连接关系2、HTML2.1 HTML 文档结构2.1.1 基本结构<html> <head> </head> <body> </body></htm
复制链接

扫一扫

专栏目录