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>
本文作者:kingwzun
本文链接:https://www.cnblogs.com/kingwz/p/15735669.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步