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)。 实体名称对大小写敏感!字符实体类似这样:
< 等同于 <
> 等同于 >
等同于 不间断空格
© 等同于 ©
显示属性(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>