Web基础复习

最新推荐文章于 2024-04-03 03:35:40 发布
最新推荐文章于 2024-04-03 03:35:40 发布
阅读量904 收藏 8
点赞数 1
分类专栏： 前端 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Avadakur/article/details/118188328
版权

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标记属性表

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

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
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web基础（二）使用于小白或者需要web基础复习的人
02-15
资源对应web开发----->web基础（二）---------列表、表格、表单
web基础（一）使用于小白或者需要web基础复习的人
02-15
资源对应web开发----->web基础（一）------标签
Web基础知识的复习
JY_He的博客
07-18 1313
1.     Servlet是什么?能干什么?           Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP客户端的请求和 HTTP服务器上的数据库或应用程序之间的中间层，通过Servlet可以收集来自网页表单的用户输入，呈现来自数据库或者其他源的记录。          Servlet的一些优点： 1.Servle
8.（初级）web字体之：装饰列表
MJ的博客
02-06 308
一、无装饰列表符号 list-style:none; 二、装饰列表、 list-style-type:disc（实心圆）/circle（空心圆）/square（实心方形）; 三、装饰列表 list-style-type: decimal（1. 2. ...） decimal-leading-zero（01. 02. ...） upper-alpha（A. B.
学习基础的html代码知识（入门级），史上最通俗计算机网络分层详解
最新发布
dsaczxca的博客
04-03 575
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
【Java】JavaWeb快速复习
qq_30130205的博客
04-26 435
1、JDBCUtils工具类1.2、数据库库信息维护​ 在src目录下创建一个jdbc**.properties**​ 1.3、操作类。
Web前端——CSS常用样式及常用选择器
qq_25592087的博客
09-22 477
1、水平居中 给块元素自己设置 margin:0 auto 第一个值代表上下，第二个值代表左右 2、垂直居中 没有快捷方式（目前） 计算公式：父元素高度-子元素高度/2。多个标签可以有相同的class名 一个标签可以有多个class名（多个class名用空格隔开）类似于身份证号：多个标签不可以有相同的id名 一个标签不可以有多个id名。父选择器 空格 子选择器｛css样式｝选择器1,选择器2...{css样式}：.+class名｛css样式｝父选择器>子选择器{css样式}
Web复习笔记
一个平平无奇的博客
12-28 181
复习HTML知识
web编程基础复习提纲
08-06
HTML+CSS+JavaScript期末复习资料、幕布笔记，考点梳理，适合期末复习应对考试用。
《Web开发基础》复习大纲（2020）.pdf
06-12
《Web开发基础》复习大纲（2020）.pdf
web 编程 基础 复习题
12-30
web编程基础复习 web编程基础复习 web编程基础复习 web编程基础复习
CSS学习
FM11101001的博客
10-18 1471
css基础入门、常用标签
html单双标记
热门推荐
天王盖帝湖的专栏
01-25 1万+
HTML标记的类型：单标记与双标记 一.单标记 (1). 单一型，无属性值。 如： 在xhtml中，规定，所有HTML标记，都要小写，所有的标记都要有关闭。 (2). 单一型，有属性值。 如： 二.双标记 （3）.... 没有属性值。 如：... (4）.... 有属性。 如：... 说明： 标记与属性，属性之间以空格分隔。 属性不区分先后顺序；且属性不是必要的
html 单标记，双标记,在HTML页面中，带有“”符号的元素被称为单标记与双标记。...
weixin_35411439的博客
07-16 811
页有符元素双务的对医的包描述括院任正确。包括血浆细胞和血容量容量，面中血容循环血的总量人体量即。胞总循环血中显上红细数明升，被称标记标记动时性运耐力在长时间。为单的理的是下面-心模式医学正确解不关于理-生物社会。页有符元素双"不病治未病"的下列提出哪部著作治已观点。面中末胎孕2育特儿发0周征为。被称标记标记不正与邻内生哪项殖器近器确官的关系。为单的主膜癌要转移途径是绒毛。页有符元素双为孕足月时羊水...
html、css学习总结
webmasterJ的博客
09-13 697
html：        1.html主要包括   文档类型声明、头部标记、主体标记。带有        2.标记就是放在“        3.标记中可以插入描述文档标题的标记,提供有关页面的元信息,定义文档与外部资源的关系,用于为HTML文档定义样式信息,等。        4.中放入所要显示在网页里的所有内容，包含文本、图像、音频、视频。注：一个HTML文档中只能有一对
Web知识点复习
天玑的博客
01-17 1082
服务器启动时(web.xml中配置load-on-startup=1，默认为0)或者第一次请求该servlet时，就会初始化一个Servlet对象，也就是会执行初始化方法init(ServletConfig conf),该servlet对象去处理所有客户端请求，service(ServletRequest req,ServletResponse res)方法中执行，最后服务器关闭时，才会销毁这个servlet对象，执行destroy()方法。1.连接数据库：在JSP中，可以使用JDBC连接数据库。
Web前端知识点复习总结
qq_50843126的博客
08-05 1550
Web前端知识点复习总结
Web复习提纲
m0_62821046的博客
06-26 606
Web安全复习自用提纲
关于web的简单复习
心有—林夕的博客
03-07 400
1.web概述 * 静态web 不可以动态更新 数据没有持久化即没有和数据库进行交互，所以每个人看到的页面都是同一个 * 静态Web的组成 轮播图，JavaScript，VBScript 以及一些特效 * 假如web服务器发生错误 即需要停服维修 * 动态web 可以动态更新 数据持久化即和数据库进行交互，所以每个人看到的页面都是不同的 * 动态Web的组成 ASP(微软的，C#)在html中加入VB代码 代码乱不易维护 *
java web 复习
06-09
1. Java Web 开发基础知识 - Servlet、JSP 和 JSTL 等技术的基本概念和使用方法； - MVC 设计模式的理解和运用； - 数据库连接池、JDBC、ORM 框架等数据持久化技术的使用； - Tomcat、Jetty 等 Web 服务器的使用方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值