WEB认识
一:基本理论
- 万维网WWW(worid wide web):也称为WEB,3W等
- www是基于客户机/服务器方式的信息发现技术和超文本技术的综合.
- www服务器通过HTML(超文本标记语言)将信息组织成超文本,利用链接从一个站点跳到另一个站点
二:WEB概念
1. www是存储在internet计算机中,数量庞大的文档的集合.这些文档称为页面,它是一种超文本信息.WEB上的信息是由彼此关联的文档组成的,而使其链接在一起的是超链接
三:相关概念
- 网页:网页是网站的基本信息单元,是www基本文档,使用HTML编写的,通过链接实现和其他网页或网站进行跳转关联
- 网站:由众多不同内容的网页构成,通常把进入网站首先看到的网页称为首页或者主页
HTML基本认识
一.HTML概述
HTML(Hyper Text Markup Language):超级文本标记语言,是为网页创建和其他可在网页浏览器中看到的信息设置的一种标记语言
二.HTML定义
- 超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准
- 它通过标记符号标记要显示在网页中的各个部分.
- 浏览器根据标记符号对内容进行解释执行
- 在书写出错时,浏览器不会提示,只能根据显示效果判断出错原因
- 不同浏览器在对同一标记解释得到的效果可能不同
三:HTML基本结构
由包起来,其内部有头文件和主体块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 1.标题在头文件中 -->
<title>这是我的标题</title>
</head>
<body>
<!-- 2.这是主体内容 -->
这是一个html基本机构
</body>
</html>
四:常用排版标签
1.段落标签用法及属性
<p></p>
是一个块状标签,独自占一行
基本属性:
align:文本相对于浏览器水平对齐方式
"left"左对齐
"center":居中
"right":右对齐
2.font字体标签的用法及属性
<font></font>
不会自动换行
基本属性:
face:代表字体名称,需要在电脑上安装有此字体
size:字体大小值为:1-7,默认3
color:颜色
1.可以直接英语书写"blue"
2.可以16进制1-f控制三原色:ggbbkk写"#ffffff"
3.标题标签的用法及属性
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
不需要换行
4.水平线标签用法及属性
<hr>:默认布满一行
width:长度
size:设置高度
color:颜色
align:对齐方式,默认居中对齐
"left"左对齐
"center"居中
"right"右对齐
5.有序列表
<ol>
<li></li>
</ol>
type属性:它的值代表不同的序号
"1":代表数字排序列表,是默认是
"a":小写字母列表
"A":大写字母列表
"i":以小写罗马字母顺序
"I":以大写罗马字母顺序
6.无需列表
<ul>
<li></li>
</ul>
type属性:
"desc":实心小圆圈
"circle":空心圆圈
"square":实心正方形
7.超链接用法
<a href="">xxxx</a>
需要手动换行,href:代表要跳转到的页面\
<!-- 1.1跳转到指定网站 -->
<a href="http://www.baidu.com">百度一下</a><br>
<!-- 1.2跳转到指定页面 -->
<a href="lesson1_02.html">本地网站</a><br>
<!-- 1.3跳转到某个图片,具体路径,在当前文件夹下不需要 -->
<a href="img/1.jpg">本地图片</a><br>
<!-- 1.4 连接到网络上的图片地址 -->
<a href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1994232222,2382318108&fm=26&gp=0.jpg">网络图片</a><br>
<!-- 1.5 图片超链接,在当前页面显示图片 -->
<a href="img/2.jpg">
<img src="img/2.jpg" width="400" hight="400">
</a><br>
<!-- 1.6 链接到指定邮箱 -->
<a href="mailto:hxf@sina.com.cn">联系我们</a><br>
<!-- 1.7 链接到某个锚点(在同一页面跳转)
用到标签:#指向 和 id名
-->
<a href="#first">跳到相同标签的位置(同一位置)</a><br>
<a href="lesson1_02.html#second">跳到其他页面,不再同一个页面中</a><br>
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg" id="first">
8.图片标签
<img src=""> <br>
src:指定图片地址
width:宽度 值:100% 或者"500px"
hight:高度 值:100% 或者"500px"
border:边框厚度 值:1
9.其他排版标签
br:换行标签
<b>字体加粗 b</b><br>
<i>倾斜效果 i</i><br>
<u>下划线 u</u><br>
<s>删除线 s</s><br>
<!-- 下标 -->
<h1>H<sub>2</sub>O</h1>
<!-- 上标 -->
<h1>X<sup>2</sup>Y<sup>3</sup></h1>
五:table表格标签用法
<table>
<tr>
<td>
单元格
</td>
<tr>
</table>
table表格的常用属性:
broder:表格边框厚度
brodercolor:边框颜色
cellspacing:表格的边框线间距
background:表格的背景图片
bgcolor:表格背景颜色
align:表格相对于整个浏览器的水平对齐方式
width/hight:设置整个表格的宽度和高度
cellpadding:表格文字距离四周的距离
tr是表格的列,每一列都有单元格td
1.合并单元格
1.1) 横向合并列(单元格td):colspan:被合并的单元格需要删除
1,2) 合并行(纵向tr):rowspan:被合并的行需要删除
2.表格文字垂直对齐的方法
valign:
top:顶部对齐
middle:中间对齐
bottom:底部对齐
六:form表单标签的用法
表单标签一般结合表格操作实现排版对齐方式等美观问题
1.form基本属性设置
<form action="后台.jsp" id="form1" method="post">
action:提交到的后台服务器位置
method:提交方式
"get":浏览器地址栏直接输入的都是get提交方式,其提交信息都显示在地址栏中
"post":提交信息不显示在地址栏中
2.表单常用得12个控件
2.1) 基本控件(6个)
1.text:<input type="text" name="username">
2.possword:<input type="password" name="password">密码输入框
3.radio:单选空心圆 checked:默认
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
4.checkbox:复选空心正方形框 checked默认
<input type="checkbox" name="habby" value="唱" checked>唱
<input type="checkbox" name="habby" value="跳">跳
<input type="checkbox" name="habby" value="rop">rop
<input type="checkbox" name="habby" value="打篮球">打篮球
<input type="checkbox" name="habby" value="泡妞" checked>泡妞
5.file:上传文件
<input type="file" name="picture">
6.hidden:隐藏域字段
<input type="hidden" name="sid" value="1000">
2.2) 高级控件
1.textArea:文本框 col列数,row行数
<textarea name="intro" id="1" cols="30" rows="10">我的简历</textarea>
2.select:下拉复选框 checked:默认,multiple:对选,默认单选
<select name="city" size=2 multiple >
<option value="重庆">重庆</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="北京">北京</option>
<option value="武汉">武汉</option>
<option value="深圳">深圳</option>
</select>
2.3) 按钮控件
1.buttom:普通按钮
<input type="button" value="按钮" οnclick="alert(new Date().toLocaleDateString())">
2.image:图片按钮-----提交功能
<input type="image" src="img/3.jpg" width="100" height="100">
3.sumbit:提交按钮----提交功能
<input type="submit" value="submit">
4.reset:重置
<input type="reset" value="reset">
七:iframe框架的用法
1.什么是框架(Framework)
是整个或者部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法,框架是一个骨架
框架的出现解决了最重要的技术整合问题,因为软件发展至今,只是内容越来越庞大,越来越复杂,此时我们使用别人的成熟的框架,相当于别人帮完成了一些基本的工作,我们只需要在这个基础上进行业务逻辑的设计即可
2.网页设计中的框架概念
框架是网页中经常使用的页面设计方式,框架的作用是把网页在一个浏览器窗口中分割成几个不同区域,实现浏览器在一个页面中显示多个HTML页面,使用框架可以非常方便的完成导航工作
一个框架结构由两个部分网页文件构成
1. 框架Frame:框架是窗口中的一个区域,它可以显示与其他内容无关的网页文件
2. 框架集Frameset:它将窗口通过行和列分割成多个框架,每个框架都可以显示不同的网页文件
3.iframe框架实现同一个页面显示不同的HTML网页内容
- 通过超链接后附加target属性 值为框架的name
- 框架的写法:
- src代表此处框架需要显示的内容的URL信息,如果不需要显示可以不赋值
- name代表此框架的名字,方便其他链接访问此框架内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe框架用法</title>
</head>
<body>
<!-- 1.ifeame框架可以实现点击链接在同一个页面指定位置显示内容 -->
<table align="center" width="80%" height=1000 border="1" cellspacing=0 >
<tr align="center">
<td>链接</td>
<td colspan="4" align="center">图片详情</td>
</tr>
<tr align="center">
<td>
<a href="img/1.jpg" target="right">图片一</a>
</td>
<td rowspan="3">
<iframe src="" frameborder=0 name="right" width=100% height="1000"></iframe>
</td>
</tr>
<tr align="center">
<td>
<a href="img/2.jpg" target="right">图片二</a>
</td>
</tr>
<tr align="center">
<td>
<a href="img/3.jpg" target="right">图片三</a>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
