Web实训

网页基础

网页的组成

什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

html标签/元素

基本结构

html
<html> 元素是 HTML 页面的根元素
head
<head> 元素包含了文档的元（meta）数据 (设置网页信息，引用)
Meta 标签

搜索引擎关键字
<meta name="Keywords" content="网站关键词"/>
网站描述
<meta name="Description" content="网站的描述，涉及到SEO"/>
编码格式
<meta charset="UTF-8"/>
viewport浏览视图
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

Title网页标题
<title>主页</title>
body
<body> 元素包含了可见的页面内容

常用标签/元素

标签语法

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签

常用标签属性

(name="value")
属性是 HTML 元素提供的附加信息
全局属性
class： 规定元素的一个或多个类名（引用样式表中的类）。
id： 规定元素的唯一性 id。
style： 规定元素的行内 CSS 样式。
title： 规定有关元素的额外信息。

常用属性
href a链接跳转地址或者ID。
target a链接跳转方式—— _blank | _parent | _self | _top。
src img源文件路径。
height img高度。
width img 宽度
type 表单元素类型
name 表单元素的名称
value 表单元素的值

常用标签

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

<p>这是一个段落。</p>

<br/> <!-- 换行 -->
<hr/> <!-- 水平线 -->
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>

<abbr> （缩写）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

链接（Links）

普通的链接:
<a href="http://www.example.com/">链接文本</a>

图像链接：
<a href="http://www.example.com/">
  <img src="URL" alt="替换文本">
</a>

邮件链接：
<a href="mailto:webmaster@example.com">发送e-mail</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
  h1 {color:red;}
  p {color:blue;}
</style>

<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
  <li>项目</li>
  <li>项目</li>
</ul>

有序列表

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

实体（Entities）

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体（character entities）。实体名称对大小写敏感！字符实体类似这样：

&lt; 等同于 <
&gt; 等同于 >
&nbsp; 等同于 不间断空格
&#169; 等同于 ©

显示属性(Display)

块级元素

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
块级元素即使设置了宽度，仍然是独占一行的

常见块级标签

div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
h1 - 大标题
...
h6 - 6级标题
ol - 排序列表
p - 段落
ul - 非排序列表

操作

强制竖向排列

内联元素

内联元素(inline)特性：

和相邻的内联元素在同一行;
内联容器不能对齐
宽度(width)、高度(height)无法改变，就是里面文字或图片的大小;
内链元素的padding和水平方向margin-left,margin-right 都产生边距效果，但是竖直方向的margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

常见内联元素

img - 图片
input - 输入框
**a **- 锚点
span - 常用内联容器，定义文本内区块

容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">//编码方式
		<title></title>
	</head>
	<body>//浏览器窗口
	<div style="background-color: red;width: 200px;height: 200px;">这是一个div容器</div>
	//块容器会自动占满一行，可以自定义宽高
	<div style="background-color: yellow;width: 200px;height: 200px;">这是一个div容器</div>
	<div style="background-color: blue;width: 200px;height: 200px;">这是一个div容器</div>
    <span style="background-color: red;width: 200px;height: 200px;">这是一个span标签</span>
     <!-- 行容器不占满一行，不能定义高度 -->//
	 <button style="background-color: red;">这是一个按钮</button>
	 <button style="background-color: red;">这是一个按钮</button>
	 <button style="background-color: red;">这是一个按钮</button>
	 <button style="background-color: red;">这是一个按钮</button>
	  <!-- 内敛块性容器，不会占满一行，可以自定义宽高 -->//
	</body>
</html>

div

用class起名字： <div class="father">

注意申明时候需要在名字前加.

实现布局控制分离

对div起名
利用<style type="text/css">设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{border:2px #f00 solid;}
			#box{}
			.con1{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
			}
			.con2{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
			}
			.uncle{
				width: 400px;
				height: 400px;
				background-color: #445500;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="con1">son1</div>
			<div class="con2">son2</div>
		</div>
		<div class="uncle">uncle</div>
	</body>
</html>

使横向排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{border:2px #f00 solid;}
			#box{}
			.con1{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				float: left;
				/*  */
			}
			.con2{
					float: left;
				width: 200px;
				height: 200px;
				background-color: #0000FF;
			}
			.uncle{
				width: 400px;
				height: 400px;
				background-color: #445500;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="con1">son1</div>
			<div class="con2">son2</div>
		</div>
		<div class="uncle">uncle</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				border: #0000FF 4px solid ;
			}
			.container-center{
				border: #FF0000 solid 5px;
				width: 100px;
				margin: auto;
			}
			.father{
				border: 2px solid #f0f;
				margin: auto;
			}
			.son{
				border: 5px solid #F00;
				margin: auto;
				
			}
		</style>
	</head>
	<body>
		<div class="container">
			这是一个通知容器
		</div>
		<div class="container-center">
			这是一个居中容器
		</div>
		<div class="father">
			这是一个父容器
			<div class="son">
				这是一个子容器
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				border: 4px solid #FF0000; 
				width: 200px;
				height: 200px;
				/* margin: 20px; */
				background-color: #0000FF;
			}

			.box2 {
				width: 100px;
				height: 100px;
				background-color: #0FF;
				/* margin: 30px; */
				/* margin 塌陷，两个元素的边界距离，
				不是求和，而是会自动选取最大的值 */
			}

			.box3 {
				width: 80px;
				height: 80px;
				margin: 20px;
				/* margin 塌陷，
				父子元素的边界距离，不自动选取父类顶部作为原点值 
				解决：父类增加框框border: 2px #FF0000 solid;
				*/
				background-color: #FF0000;
				
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box3">

			</div>
		</div>
		<div class="box2">

		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father {
				border: 2px #FF0000 solid;
				/* 定义个框框 */
				overflow: hidden;
				/* 溢出隐藏:将溢出的部分自动隐藏。 */
				float: left;
				height: 200px;
			}
			#box {}

			.con1 {
				float: right;
				/* 子级浮动 */
				width: 200px;
				height: 200px;
				margin-top: 20px;
				/* 上下空出20个空间 */
				margin-right: 10px;
				background-color: #FF0000;
				
				
			}

			.con2 {
				float: left;
				width: 200px;
				height: 200px;
				margin: 20px;
				/* 
				上下左右空出20个空间 
				margin: 10px,20px,30px,40px;
				可以自定义四边的不同边界长度：上，右，下，左的顺序
				margin: 10px,20px,;
				可以自定义四边的不同边界长度：上下，右左的顺序
				*/
			   padding: 100px;
			   /* 定义字体的四周边距 */
				background-color: #0000FF;
			}

			.uncle {
				width: 400px;
				height: 400px;
				background-color: #445500;
			}

			.othercon {
				border: 2px #0000FF solid;
				/* 定义个框框 */
				float: left;
				width: 200px;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="con1">son1</div>
			<div class="con2">son2</div>
			<div class="othercon">son2</div>
			<!-- 类命名的优点，可以同时命名多个块，统一管理 -->
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>
			<div class="othercon">son2</div>

		</div>
		<div class="uncle">uncle</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{border:2px #f00 solid;}
			#box{}
			.con1{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
			}
			.con2{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
			}
			.uncle{
				width: 400px;
				height: 400px;
				background-color: #445500;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="con1">son1</div>
			<div class="con2">son2</div>
		</div>
		<div class="uncle">uncle</div>
	</body>
</html>

作业1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
				}
				.header{
					height: 200px;
					width: 1200px;
					margin: auto;
					
				}
				.headerTop{
					height: 130px;
					background-color: #333333;
				}
				.logo{
					background-color: #999999;
					height: 60px;
					width: 200px;
					float:  left;
					margin: 30px 70px;
                  }
				.search{
				
					height: 50px;
					width: 310px;
					float:  right;
					margin: 40px 110px;
				}
				.search>input {
					height: 50px;
					width: 210px;
					border: none;
					background-color: #999999;
					float: left;
				}
				
				.search>button {
					background-color: #999999;
					height: 50px;
					width: 60px;
					float: left;
					border: none;
					margin: 0 15px;
					
				}
				
				.headerBottom{
					height: 80px;
					background-color: #000;
				}
				.content1{
					height: 620px;
					width: 1200px;
					margin: auto;
					background-color: #999999;
				}
				.content2{
					height: 720px;
					width: 1200px;
					margin: 80px auto 0 auto;
					
				}
				.content2Left{
					height: 520px;
					width: 400px;
					float: left;
					margin: 0 20px auto auto;
					background-color: #999999;
				}
				.content2Left>div{
					height: 65px;
					width: 300px;
					float: left;
					border: 1px solid #000;
					margin: 15px 40px auto 40px;	
				}
				
				.content2Right{
					height:720px;
					width: 780px;
					float: right;
					margin: 0 auto auto 0;

				}
				.content2RTop{
					width: 780px;
					height: 280px;
					float: left;
					background-color: #999999;
					margin: 0 auto 0 auto;	
				}
				.content2RTop>div{
					height: 180px;
					width: 180px;
					float: left;
					border: 1px solid #000;
					margin: 40px 40px auto 30px;	
					
				}
				.content2RBottom{
					width: 780px;
					 height: 420px; 
					float: left;
					background-color: #999999;
					margin: 20px auto auto auto;	
				}
				.end{
					height: 100px;
					margin: 50px auto auto auto;
					background-color: #000;
				}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="headerTop">
				<div class="logo">logo</div>	
				<div class="search">
					<input/>
					<button type="button">
						搜索
					</button>
				</div>	
			</div>
			<div class="headerBottom">
				导航条
			</div>
		</div>
		
		<div class="content1"></div>
		
		<div class="content2">
			<div class="content2Left">
				<div ></div>
				<div ></div>
				<div ></div>
				<div ></div>
				<div ></div>
				<div ></div>
			</div>
			<div class="content2Right">
				<div class="content2RTop">
					<div ></div>
					<div ></div>
					<div ></div>
				</div>
				<div class="content2RBottom">
				</div>
			</div>
		</div>
		
		<div class="end"></div>
	</body>
</html>

posted @ 2021-12-27 11:36 kingwzun 阅读(76) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

kingwzun