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