A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 卞建彬 中级黑马   /  2018-10-25 20:08  /  1398 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 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, 距离左右边框自适应



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马