Web第一天
一、html和CSS
1.B/S 软件的结构
JavaSE: C/S Client Server
B/S Browser Server
2.前段开发流程
3.网页的组成部分
页面由三部分组成!
分别是内容(结构)、表现、行为。
内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html技术来展示。
表现,指的是这些内容在页面上的展示形式。比如说,布局、颜色、大小等等。一般使用CSS技术实现。
行为,指的是页面中元素与输入设备交互的响应,一般使用JavaScript技术实现。
4.HTML简介
Hyper Text Markup Language(超文本标记语言) 简写:HTML
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)
5.创建HTML文件
创建一个web工程(静态的web工程)
在工程下创建html页面
选择执行的浏览器
1 | <!-- 约束,声明 --> |
6.HTML文件的书写规范
1 | <html> 表示整个html页面的开始 |
html中的代码注释:
7.HTML标签介绍
标签的格式:
<标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性
- 分为基本属性:bgcolor=”red” 可以修改简单的样式效果
- 事件属性:onclick=”alert(‘你好’);” 可以直接设置时间响应后的代码
标签又分为:单标签和双标签
- 单标签格式:<标签名 /> br 换行,hr水平线
- 双标签格式:<标签名> …封装的数据…</标签名>
1 | <!-- 约束,声明 --> |
标签的语法:
1 |
|
8.常用标签介绍
参考:
文档:w3cschool.CHM
8.1、font字体标签
需求1:在网页上显示我是字体标签,并修改字体为宋体,颜色为红色。
1 |
|
1 | font标签是字体标签,它可以来修改文本的字体、字号、字形、颜色等。 |
8.2、特殊字符
需求1:把< br/ >换行符标签变成文本转换成字符显示在页面上。
1 |
|
8.3、标题标签
标题标签是 h1 到 h6
需求1:演示标题1到标题6
1 |
|
8.4、超链接(重点)
在网页中所有点击之后可以跳转的内容都是超链接
需求1:普通的超链接。
1 |
|
8.5、列表标签
无序列表、有序列表、定义列表
需求1:使用无序列表方式,把四大天王:刘德华、郭富城、黎明、张学友展示出来。
1 |
|
8.6、img标签
img标签可以在html页面上显示图片。
需求1:使用img标签显示一张美女的照片,并修改宽高,和边框属性。
1 |
|
8.7、表格标签(重点)
需求1:做一个带表头的,三行,三列的表格,并显示边框
需求2:修改表格的宽高,表格的对齐方式,单元格间距。
1 |
|
8.8、跨行跨列表格(次重点)
需求1:新建一个五行五列的表格,第一行,第一列的单元格要跨两列,第二行第一列的单元格要跨两行,第四行第四列的单元格要跨两行两列。
1 |
|
8.9、了解iframe框架标签(内嵌窗口)
iframe标签它可以在一个html页面上,打开一个小窗口去加载一个单独的页面
1 |
|
8.10、表单标签(重点)
什么是表单?**
表单就是html页面中,用来收集用户信息的所有元素集合,然后把这些信息发送给服务器。
需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉下表)。
隐藏域,自我评价(多行文本域)。重置,提交。
1 |
|
1 |
|
8.11其他标签
需求1:div、span、p标签的演示
练习:创建登录的表单,包含用户名,密码框输入。并结合标签排版。让它看上去整齐一点。
1 |
|
9.CSS技术
参考文档:CSS2.0.chm
9.1、CSS技术介绍
css是【层叠样式表单】。是用于(增强)控制网页样式并允许将样式信息与内容分离的一种标记性语言。
9.2、CSS语法规则:
选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。
属性:是你要改变的样式名,并且每个属性都有一个值,属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明,例如:p{color:blue}
**多个声明:**如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明组最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如:
p{
color:red;
font-size:30px;
}
注意:一般每行只描述一个属性
CSS注释:/ * 注释内容 */
9.3、CSS和HTML的结合方式
9.3.1、第一种
在标签的style属性上设置”key:value value”,修改标签样式。
需求1:分别定义两个div、span标签,分别修改每个div标签的样式为:边框1个像素,实线,红色。
1 |
|
问题:这种方式的缺点?
- 如果标签多了,样式多了,代码量非常庞大。
- 可读性非常差。
- CSS代码没什么复用性可言。
9.3.2、第二种:
在head标签中,使用style标签来定义各种自己需要的css样式。
格式如下:
xxx{
key : value value;
}
需求1:分别定义两个div、span标签,分别修改每个div标签的样式为:边框1个像素,实线,红色。
1 |
|
问题:这种方式的缺点。
- 只能在同一页面内复用代码,不能在多个页面中复用css代码。
- 维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。
9.3.3、第三种:
把css样式
1 | 使用html的<link rel="stylesheet" type="text/css" href="./styles.css"/>标签导入css样式文件 |
1 | div{ |
1 |
|
9.4、CSS选择器
9.4.1、标签名选择器
标签名选择器的格式是:
标签名{
属性:值;
}
标签名选择器,可以决定哪些标签被动地使用这些样式
1 | 需求1:在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。 |
1 |
|
9.4.2、id选择器
1 | id选择器的格式是: |
1 |
|
9.4.3、class选择器(类选择器)
1 | class类型选择器的格式是: |
1 |
|
9.4.4、组合选择器
1 | 组合选择器的格式是: |
1 |
|
9.5、CSS常用样式
1、颜色
color:red;
颜色可以写颜色名如:black,blue,red,green等
颜色也可以写rgb值和十六进制表示值,如rgb(255,0,0),#00F6DE,如果写十六进制必须加#
2、宽度
width:19px;
宽度可以写像素值:19px;
也可以写百分比值:20%;
3、高度
height:20px;
宽度可以写像素值:19px;
也可以写百分比值:20%;
4、背景颜色
background-color:#0F2D4C
5、字体样式
color:#FF0000;字体颜色红色
font-size:20px;字体大小
6、红色1像素实线边框
border:1px solid red;
7、DIV居中
margin-left:auto;
margin-right:auto;
8、文本居中
text-align:center;
9、超链接去下划线
text-decoration:none;
10、表格细线
1 | table{ |
11、列表去除修饰
ul{
list-style: none;
}
常用样式的使用如下:
1 |
|