[学习交流] 【石家庄校区】HTML、CSS

本帖最后由小石姐姐于 2018-10-26 09:42 编辑

day07_HTML

今日内容

web开发架构(了解)

html概述

html常用的标签

案例:编写黑马旅游网站的首页

web概念概述

一. JavaWeb:

使用Java语言开发基于互联网的项目

二. 软件的架构:

1. C/S:Client/Server 客户端/服务器端

1.1 在用户本地有一个客户端程序, 在远程有一个服务器端程序

* 如: QQ, 迅雷. . .

1.2 优点: 用户体验好

1.3 缺点: 开发, 安装, 部署, 维护麻烦

2. B/S:Browser/Server 浏览器/服务器端

2.1 只需要一个浏览器, 用户通过不同的网址(URL), 客户访问不同的服务器端程序

2.2 优点: 开发, 安装, 部署, 维护简单

2.3 缺点:

1. 如果应用过大, 用户的体验可能会受到影响

2. 对硬件要求过高

2.4 B/S 架构详解:

资源分类:

a. 静态资源:

* 使用静态网页开发技术发布的资源

* 特点:

1. 所有用户访问, 得到的结果是一样的

2. 如: 文本, 图片, 音频, 视频, HTML, CSS,JavaScript

3. 如果用户请求的是静态资源, 那么服务器会直接将静态志愿发送给浏览器, 浏览器中内置了静态资源的解析引擎, 可以展示静态资源

b. 动态资源:

* 使用冬天网页及时发布的资源

* 特点:

1. 所有用户访问, 得到的结果可能不一样

2. 如: jsp/servlet,php,asp...

3. 如果用户请求的是动态资源, 那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

* 我们要学习动态资源, 必须先学习静态资源

* 静态资源:

1. HTML：用于搭建基础网页，展示页面的内容

2. CSS：用于美化页面，布局页面

3. JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

一. 概念: 是最基础的网页开发语言

1. Hyper TextMarkup Language 超文本标记语言

1.1 超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

1.2 标记语言: 由标签构成的语言 <标签的名称>

如: html,xml

注意: 标记语言不是变成语言

二. HTML 快速入门

1. 语法:

1.1 html文档后缀名 .html 或者 .htm

1.2 标签分为:

1. 围堵标签: 有开始标签和结束标签。如 <html> </html>

2. 自闭和标签: 开始标签和结束标签在一起

* 如: <br/>

1.3 标签可以嵌套

* 需要正确嵌套, 不能你中有我, 我中有你

* 错误示范:<a><b></a></b>

* 正确示范:<a><b></b></a>

* 细节: 父标签, 子标签, 孙子标签概念

父标签嵌套子标签, 子标签嵌套孙子标签

1.4 在开始标签中可以定义属性, 属性是由键值对构成, 值需要用引号(单双引号都可以)引起来

属性可以改变内用的显示效果,

html的结构(文件标签)

根标签:<html>

作用: 标记整个html的网页

头标签:<head>

作用: 设置网页的信息, 比如网页的标题, 网页的编码格式

* 如 :

[Java] 纯文本查看 复制代码

<head>
<title>网页标题</title>
<metacharset="utf-8"/>
</head>
体标签<body>
作用: 显示在网页的内用
*如:
<html>
<head>
<title>网页标题</title>
<metacharset="utf-8"/>
</head>
<body>
<fontsize="6" color="red"> hello!!!</font>
</body>
</html>

1.5 html的标签不区分大小写, 建议使用小写

三. 标签学习:

1. 文件标签: 构成html最基本的标签

1.1 html: html文档的根标签

1.2 head: 头标签, 用于指定html文档的一些属性, 引入外部的资源

1.3 title: 标题标签

1.4 body: 提标签

1.5 <!DOCTYPEhtml>：html5中定义该文档是html文档

2. 文本标签: 和文本有关的标签

2.1 <h1> to<h6>: 标题标签(自动换行)

* h1~h6: 字体大小逐渐递减

2.2 <p>: 段落标签

2.3 <br>: 换行标签

2.4<hr>: 展示一条水平线

* 属性 :

1. color: 颜色

2. width: 宽度

3. size: 高度

4. align: 对齐方式

* color：颜色

* size：大小

* face：字体

2.5 <b>: 字体加粗

2.6 <i>: 字体斜体

2.7 <font>: 字体标签

* 属性:

1. color: 颜色

2. size: 大小

3. face: 字体

2.8<center>: 文本居中

2.9

* 属性定义:

1. color:

* 英文单词: red, green, blue

* rgb(值1, 值2, 值3): 值的范围: 0~255

如:rgb(0,0,255) 蓝色 rgb(255,0,0) 红色

* #值1值2值3: 值的范围: 00~FF之间(16进制数字组成)

如: #FF0000 红色 #FFFFFFF 白色

2. width:

* 数值: width='20', 数值的单位, 默认是px(像素)

* 数值%; 占比相对于父元素的比例

特殊符号:

3. 图片标签:

<img/>: 展示图片

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src 相对的路径: 网页相对于存放图片的位置

想要找到图片, 得先找到存放图片的目录类似DOS命令

1. 网页和图片在同一级

直接src="图片名称"

[HTML] 纯文本查看 复制代码

<imgsrc="banner_1.jpg" />

2. 网页在图片的上一级(存放图片的目录和网页在同一级)

src="目录名/图片名称"

[Java] 纯文本查看 复制代码

<imgsrc="image/banner_1.jpg" />

3. 网页在图片的下一级(存放网页的目录和图片在同一级)

src="../目录名/图片名称"

[Java] 纯文本查看 复制代码

<imgsrc="../image/banner_1.jpg" />

4. 列表标签:

第一种: 有序列表 (order list) <ol></ol>

li:

第二种: 无序列表 (unorder list) <ul></ul>

5. 链接标签: <a></a>

[Java] 纯文本查看 复制代码

<ahref="index.html" name="hello" target="_self">超链接</a>

属性:

1. href: 指定访问资源的URL(统一资源定位符)

可以是网址, 资源路径, 邮箱(herf="mailto:邮箱地址") . . .

跳转到资源是自己网站内部的资源, 也可以挑战到其他网站的资源

href属性的值分为两种情况:

想要找到资源, 得先找到存放资源的目录类似DOS命令

第一种: 跳转到其他网站的资源: 带http

如: 跳转到百度 href="http://www.baidu.com"

第二种: 跳转到自己网站内部的资源, 不需要带http

路径写法同img

2. target: 指定打开资源的方式

* _self: 默认值, 在当前页面打开

* _blank: 在新的页面打开

案例:

[Java] 纯文本查看 复制代码

<ahref="banner_1.jpg">跳转到同一级目录</a> <br />
<ahref="image/banner_1.jpg">跳转到下一级目录</a><br />
<ahref="../image/banner_1.jpg">跳转到上一级目录</a><br />

6. div和span: <div></div> <span></span>

* div:每一个div占满一整行。块级标签

* span：文本信息在一行展示，行内标签内联标签

7. 语义化标签: <header></header><footed></footed>

* <header>：页眉

* <footer>：页脚

8. 表格标签: <table></table>

* table: 定义表格

[HTML] 纯文本查看 复制代码

<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER"  valign="TOP" background="myweb.gif"  bgcolor="#0000FF"  bordercolor="#FF00FF"  bordercolorlight="#00FF00"  bordercolordark="#00FFFF"  cols="2">

属性:

1. width：宽度

2. border：边框

3. cellpadding：定义内容和单元格的距离

4. cellspacing：定义单元格之间的距离, 如果指定为0, 则单元格的线会合为一条

5. bgcolor：背景色

6. align：对齐方式

* tr: 定义行

1. bgcolor：背景色

2. align：对齐方式(文本的对齐方式)

* td: 定义单元格(列)

1. colspan：合并列

确定是哪一行里的单元格

2. rowspan：合并行

确定是哪一行和哪一行合并,并且要知道合并完后新的单元格是哪一行

确定合并几行(几个单元格)

* th: 定义表头单元格

* <caption>：表格标题

* <thead>：表示表格的头部分

* <tbody>：表示表格的体部分

* <tfoot>：表示表格的脚部分

day08_HTML&CSS

今日内容

HTML 标签: 表单(掌握)

CSS(通过帮助文档, 独立查询常用的属性)

HTML标签: 表单标签

一. 表单:

1. 概念: 用于采集用户输入的数据, 用于和服务器进行交互

2. form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

* 属性:

1. action: 指定提交数据的URL

2. method: 指定提交方式

*分类及区别: 一共7种, 2种比较常用

1. get:

a. 请求参数会在地址栏中显示, 会封装到请求行中(HTTP协议后讲解)

b. 请求参数大小是有限制的

c. 不太安全

2. post:

a. 请求参数不会再地址栏中显示, 会封装在请求体中(HTTP协议后讲解)

b. 请求参数大小没有限制的

c. 较为安全

* 表单项中的数据要想被提交, 必须指定其name属性

* 注意事项:

1. 表单定义一个范围, 所有的表单项(变淡子标签), 必须在这个范围内

2. 表单中数据要想被提交, 必须指定其name属性

3. 表单项标签:

* input: 可以通过type属性值, 改变元素展示的样式

1. type属性:

* text: 文本输入框, 默认值

1. placeholder: 指定输入框的提示信息, 当输入框的内容发生变化，会自动清空提示信息

* password: 密码输入框

* radio: 单选框

*注意:

1. 要想让多个单选框实现单选的效果, 则多个单选框的name属性值必须一样.

2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

3. checked 属性, 可以指定默认值

* checkbox: 复选框

* 注意：

1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

2. checked属性，可以指定默认值

* file: 文件选择框

* hidden: 隐藏域, 用于提交一些信息

* submit: 传送键, 提交表单数据

* reset: 清除键, 初始化表单数据

* 按钮:

1. submit: 提交按钮, 可以提交表单

2. image：图片提交表单按钮

* src属性指定图片的路径

3. button: 普通按钮, 后期结合JavaScript语法用

(HTML5 新特性, 移动端开发)

* email: 邮箱

* date: 日期

2. label：指定输入项的文字描述信息

* 注意：

1 label的for属性一般会和 input的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

* select: 下拉列表(用于选择下拉列表的值时用, 应用场景: 选择省, 市, 区的数据等 . . .)

1. 子元素：option, 指定列表项

* selected, 默认选项

* textarea:文本域(用于输入文本内容多的使用, 应用场景: 自我描述, 教育经历等 . . .)

1. rows: 默认多少行, 不够了自动扩容

2. cols: 指定列数, 每一行有多少个字符

CSS: Cascading Style Sheets 层叠样式表

一. 概念: Cascading Style Sheets 层叠样式表

1. 作用: 页面美化和布局控制

2. 层叠：多个样式可以作用在同一个html的元素上，同时生效

二. 好处:

1. 功能强大

2. 将内容的展示和样式控制分离

* 降低耦合度, 解耦

* 让分工协作更容易

* 提高开发效率

三. CSS的使用：CSS与html结合方式

1. 内联样式

* 在标签内使用style属性指定css代码

[Java] 纯文本查看 复制代码

* 如：<divstyle="color:red;">hello css</div>

2. 内部样式

* 在head标签内，定义style标签，style标签的标签体内容就是css代码

* 如：

[Java] 纯文本查看 复制代码

<style>
div{
color:blue;
}
</style>
<div>hellocss</div>

3. 外部样式

1. 定义css资源文件。

2. 在head标签内，定义link标签，引入外部的资源文件

* 如：

* a.css文件：

[Java] 纯文本查看 复制代码

div{
color:green;
}
<linkrel="stylesheet" href="css/a.css">
<div>hellocss</div>
<div>hellocss</div>

* 注意事项:

1. 三种方式, css作用范围越来越大

2. 内联样式不常用, 内部样式和外部样式常用

3. 三种格式可以写为:

<style>

@import"css/a.css";

</style>

四. css语法:

1. 格式：

选择器 {

属性名1:属性值1;

属性名2:属性值2;

...

}

2. 选择器:筛选具有相似特征的元素

3. 选择器: 筛选具有相似特性的元素

解释:

css作用美化和布局网页, 美化html的什么标签, 布局html的什么标签,

选择器就是用来标识(定位)美化或者布局的标签

通俗的说就是来定位或者标识html网页的标签

注意事项:

* 每一对属性需要使用；隔开，最后一对属性可以不加；

五. 选择器：筛选具有相似特征的元素(参考手册上是选择符)

1. 分类:

a. 基本选择器

1. id选择器, 选择器具体的id属性值的元素, 建议在一个html页面中id值唯一

* 语法: #id属性值{ }

* 例如:

[Java] 纯文本查看 复制代码

#div1 {
color: red;
}

2. 元素选择器: 选择具有相同标签名称的元素

* 语法: 标签名称{ }

* 例如:

[Java] 纯文本查看 复制代码

div {
color: green;
font-size: 50px;
}

* 注意事项: id选择器优先级高于元素选择器

3. 类选择器: 选择具有相同的class属性值的元素

* 语法: .class属性值{ }

* 例如:

[Java] 纯文本查看 复制代码

.cls1 {
color: yellow;
}

* 注意事项: 类选择器选择器优先级高于元素选择器

选择器优先级:

style属性 > id选择器 > class选择器 > 标签选择器

b. 扩展选择器

1. 选择所有元素:

* 语法: *{ }

2. 并集选择器:

* 语法: 选择器1, 选择器2{ }

3. 子选择器: 筛选选择器1元素下的选择器2元素

* 语法: 选择器1 选择器2{ }

* 例如:

[Java] 纯文本查看 复制代码

div p{
color:red;
}

4. 父选择器：筛选选择器2的父元素选择器1

* 语法：选择器1 > 选择器2{}

* 例如:

[Java] 纯文本查看 复制代码

div > p{
color:red;
}

5. 属性选择器：选择元素名称，属性名=属性值的元素

* 语法：元素名称[属性名="属性值"]{}

* 例如:

[Java] 纯文本查看 复制代码

input[type="text"]{
color:red;
border: 5px solid;
}

6. 伪类选择器：选择一些元素具有的状态

* 语法：元素:状态{}

* 如： <a>

* 状态：

* link：初始化的状态

* hover：鼠标悬浮状态

* active：正在访问状态

* visited：被访问过的状态

* 例如:

[Java] 纯文本查看 复制代码

a:link{
color:red;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}
a:visited{
color:blue;
}

六. 属性

1. 字体, 文本:

* font-size: 字体大小

* color: 文本颜色

* text-align: 对其方式

* line-height：行高

2. 背景:

* background：复合属性

* 例如:

background:url("文件路径")no-repeat center;

3. 边框:

* border：设置边框，复合属性

* 例如:

[Java] 纯文本查看 复制代码

p{
font-size:50px;
text-align:center;
line-height:200px;
. . .
border: 1px solidred;
}

4. 尺寸:

* width：宽度

* height：高度

5. 盒子模型: 控制布局

* content: 内容(网页显示的内容)

* border: 边框

* margin: 外边距(边框距最外边盒子的距离)

* padding: 内边距(内容与边框border的距离)

注意事项:

* 默认情况下内边距会影响盒子的大小

* 取值顺序 padding: 100px; 上, 右, 下, 左

* 可以单独设置上, 下, 左, 右四个值

padding-top: 值;

padding-bottom: 值

. . .

解决方法: 设置盒子的属性, 让width和height就是最终盒子的大小

box-sizing:border-box;

* float: 浮动

* left:

* right:

* position: 取值有static, absolute, fixed, relative

1. 默认取值: static, 遵循html的定位原则

2. 常用的:

absolute 绝对定位

relative: 相对定位

注意: 如果没有设置position属性, 那么设置top,right, bottom, left属性也没用

3. 绝对定位的基准点

* 如果没有父级元素, 那么久以浏览器的左上角为基准点进行定位

eg: 定位到右下角

<styletype="text/css">

[Java] 纯文本查看 复制代码

#c{
border: 0px solid;
background: green;
width: 100px;
height: 100px;
position:absolute;
bottom: 0px;
right: 0px;
[align=left]</style>[/align][align=left]<divid="c">[/align][align=left]</div>[/align]
}

* 如果有父级元素, 并且父级元素有定位, 那么就以父级元素的左上角为基准点

eg: a盒子在b盒子的中间

[Java] 纯文本查看 复制代码

<styletype="text/css">
#a{
border: 0px solid;
background: red;
width: 100px;
height: 100px;
position:absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
#b{
border: 0px solid;
background: blue;
width: 200px;
height: 200px;
position:absolute;
}
#c{
border: 0px solid;
background: green;
width: 100px;
height: 100px;
position:absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<divid="b">
<divid="a">
</div>
</body>

注意:如果需要嵌套定位, 这a, b 两个盒子都必须加上position: absolute

4. 相对定位的基准点 position: relative; 以自己本身为基准点定位的

[Java] 纯文本查看 复制代码

* margin: auto

距离上边框:0px, 距离左右边框自适应

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【石家庄校区】HTML、CSS

0 个回复