黑马程序员技术交流社区

标题: [石家庄校区]近几天笔记汇总.part1 [打印本页]
作者: 麻绛    时间: 2018-8-24 21:52
标题: [石家庄校区]近几天笔记汇总.part1
本帖最后由 麻绛 于 2018-8-24 21:58 编辑

DAY07_HTML

一.Web概念概述
* JavaWeb：
    * 使用Java语言开发基于互联网的项目
* 软件架构：
    1. C/S: Client/Server 客户端/服务器端
        * 在用户本地有一个客户端程序，在远程有一个服务器端程序
        * 如：QQ，迅雷...
        * 优点：
            1. 用户体验好
        * 缺点：
            1. 开发、安装，部署，维护 麻烦
    2. B/S: Browser/Server 浏览器/服务器端
        * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
        * 优点：
            1. 开发、安装，部署，维护 简单
        * 缺点：
            1. 如果应用过大，用户的体验可能会受到影响
            2. 对硬件要求过高

* B/S架构详解
    * 资源分类：
        1. 静态资源：
            * 使用静态网页开发技术发布的资源。
            * 特点：
                * 所有用户访问，得到的结果是一样的。
                * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
        2. 动态资源：
            * 使用动态网页及时发布的资源。
            * 特点：
                * 所有用户访问，得到的结果可能不一样。
                * 如：jsp/servlet,php,asp...
                * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！
    * 静态资源：
        * HTML：用于搭建基础网页，展示页面的内容
        * CSS：用于美化页面，布局页面
        * JavaScript：控制页面的元素，让页面有一些动态的效果

二.HTML的概念
1. 概念：是最基础的网页开发语言
    * Hyper Text Markup Language 超文本标记语言
        * 超文本:
            * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
        * 标记语言:
            * 由标签构成的语言。<标签名称> 如 html，xml
            * 标记语言不是编程语言
2. 快速入门：
    * 语法：
        1) html文档后缀名 .html 或者 .htm
        2) 标签分为
            a. 围堵标签：有开始标签和结束标签。如 <html> </html>
            b. 自闭和标签：开始标签和结束标签在一起。如 <br/>
        3) 标签可以嵌套：
            需要正确嵌套，不能你中有我，我中有你
            错误：<a><b></a></b>
            正确：<a><b></b></a>
        4) 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
        5) html的标签不区分大小写，但是建议使用小写。
3.标签入门:
    1)文件标签：构成html最基本的标签
<html></html> html文档的根标签
<head></head>头标签。用于指定html文档的一些属性。引入外部的资源
<title></title>标题标签,在该标签内输入标题
<body></body>体标签,该标签内输入网页显示内容
<!DOCTYPE html>html5中定义该文档是html文档,自闭和标签
    2)文本标签：和文本有关的标签
<!--  注释内容  -->在两个横岗内填写注释内容
<h1></h1> to <h6></h6>标题标签,h1~h6:字体大小逐渐递减
<p></p>段落标签,表示该标签内的文字是一个段落
<br/>换行标签.自闭和标签
<hr/>展示一条水平线,自闭和标签
                * color：颜色
                * width：宽度
                * size：高度
                * align：对其方式
                    * center：居中
                    * left：左对齐
                    * right: 右对齐
<b></b>字体加粗
<i></i>字体斜体
<font></font>字体标签 color：颜色
               size：大小
               face：字体
<center></center>文本居中
        * 属性定义：
            * color：
                1. 英文单词：red,green,blue
                2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
                3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
            * width：
                1. 数值：width='20' ,数值的单位，默认是 px(像素)
                2. 数值%：占比相对于父元素的比例
    3)图片标签：
<img/>展示图片,自闭和标签
            * 属性：
                * width: 改变图片的宽度
                * height: 指定图片的高度
                * alt: 当图片加载失败时显示的文字
                * src：指定图片的路径,该路径为相对路径,相对于当前HTML文件路径的相对路径
                        * ./  代表当前目录   如 ./image/1.jpg
                        * ../  代表上一级目录
    4.)列表标签：
<ol>
     <li></li>
</ol>
有序列表,会在列表每个元素前增加序号
属性:type设置序号的类型,如:1,a,i
        start设置序号的起始值
<ul>
    <li></li>
</ul>
无序列表,不会在元素前添加序号可添加圆点和方框和圆圈
属性:type设置添加标记   disc 圆点, square 方框, circle 圆圈
    5)超链接标签

<a href="要跳转的路径"target="跳转的方式"></a>
href：指定访问资源的URL
target：
    _self:在当前页面打开连接
    _blank:在新窗口打开连接
    6)div和span
<span></span>文本信息在一行展示,行内标签,内联标签,本身没有任何效果,结合css使用
<div></div>每一个div占满一整行.块级标签.本身没有任何效果,结合css使用
    7)语义化标签
        html5中为了提高程序的可读性，提供了一些标签。本身没有效果
<header></header>页眉
<footer></footer>页脚


8. 表格标签：
<table></table>定义表格
属性:
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
<tr></tr>定义行
属性:
bgcolor：背景色
align：对齐方式
<td></td>定义单元格
colspan：合并列
rowspan：合并行
<th></th>定义表头单元格,会将格内字体加粗
<caption><c/aption>表格表格的标题
<thead>
<tbody>
<tfoot>
表示表格的头部分,本身没有什么效果
表示表格的体部分
表示表格的脚部分

DAY08_HTML&CSS

一.表单标签
概念:用于采集用户输入的数据,上传给服务器

标签<form></form>用于定义表单.可以定义一个范围,范围代表采集用户数据的范围
属性:
action: 指定提交数据的URL,#代表提交给自己
method: 指定提交方式,默认为get方式
提交方式共7种,2种开发较常用
get:
1.请求参数会在地址栏中显示.封装到请求行中
2.请求参数大小有限制
3.安全性差
post:
1.请求参数不会在地址栏中显示.会封装在请求体中
2.请求参数没有大小限制.
3.较为安全
注:表单中的数据要想被提交,必须定义name的值
注:地址栏请求参数的手动拼接: ...html?请求参数名1=参数值&请求参数2=参数值&.....
1.表单项标签

<input/>输入项标签
可以通过type属性值,改变元素展示的样式并且输入项一般都会有文字描述自闭和.
注:表单中的数据要想被提交,必须定义name的值
id属性:每个标签都可以定义一个单独的id
type属性:
text: 文本输入框,默认值
placeholder:指定输入框的提示信息,当输入框的内容发生变化时
用户名<input type="text" placeholder="请输入用户名">
password: 密码输入框,输入的文字会变成密文
密码<input type="password" palsceholder="请输入密码">
注意:text和passord的value值为文本框默认展示的值,如不进行更改就会将value值提交
radio:单选框
     注意：
                        1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                        2. 必须给每一个单选框提供value属性，指定其被选中后提交的值(选中哪个提交哪个的值)
                        3. checked属性，可以指定默认值,写法 checked="checked"
性别: 男 <input type="radio" name="sex" value="man" checked="checked">
女 <input type="radio" name="sex" value="woman">
checkbox：复选框
                      注意：
                         1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
爱好: 逛街<input type="checkbox" name="hobby" value="mai">
学习<input type="checkbox" name="hobby" value="java" checked="checked">
睡觉<input type="checkbox" name="hobby" value="sleep">
file: 文件选择框
暂时还无法提交服务器文件,以后学习先做了解
请选择文件<input type="file" name="file">
hidden: 隐藏域
提交一些隐藏信息,value会被提交
隐藏域<input type="hidden" name="yc" value="被提交的值">
按钮:按钮一般不需要文字描述该标签,也不需要name
submit: 提交按钮.
表示提交该form表单内的所有信息,一个表单想要提交必须有submit按钮,value="按钮上显示的文字"
<input type="submit" value="登录">
button: 一个按钮.
目前没有实际左右,将来回合JavaScript结合使用value="按钮上显示的文字"
<input type="button" value="一个按钮">
image: 将一个图片作为提交按钮
讲一个图片显示成为提交按钮,需要一个src属性的支持,指定图片的相对路径
<input type="image" src="image/regbtn.jpg">
H5新类型:
color:取色器
将选择的颜色提交,实现一些功能
选择颜色<input type="color" name="color">
date datetamp-local: 提交时间
date表示不带时分秒的选择,datetamp-local会有日期和包括时分秒
生日<input type="deta" name="birthday"> 不带时分秒
生日<input type="detatamp-local" name="birthday"> 带时分秒
email: 邮箱输入框
表示只能输入一个带@关键字的邮箱才能提交
邮箱<input type="email" name="email">
number: 定义数字
表示输入框只能输入数字
年龄<input type="number" name="age">
<select>
<option></option>
<option></option>
<option></option>
</select>
注:表单中的数据要想被提交,必须定义name的值
下拉标签
属性:
name: 表示提交的数据的名称必须有,不然不会提交
子标签option: 选择项
value: 表示选择该项时提交的值,一般第一个提交值为--请选择--的option选择项标签,
该选择项value可以写成一个空字符串,表示选择该项不会提交任何值,其他value值表示选择该项后提交的value值
selected: 表示该选项为默认项
省份<select name="province">
<option value="" selected="selected">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<textarea></textarea> 注:表单中的数据要想被提交,必须定义name的值
文本域标签
属性:
cols:  列数
rows:  行数
name: 表示提交的数据的名称必须有,不然不会提交
自我介绍<textarea cols="10" rows="50">默认值</textarea>
注意:该标签的默认值直接写进<textarea></textarea>标签之内即可,不需要定义value值
<label></label>指定输入项的文字描述信息标签
for属性:
for属性一般会和input的id属性值对应.如果对应了，则点击label区域，会让input输入框获取焦点。
<label for="name">姓名<label/><input type="text" name="user"  placeholder="请输入姓名" id="name">
总结按钮前面不需要文字描述,input,select,textarea都需要文字描述




二.CSS
概念cascding style sheets 层叠样式表
层叠:多个样式(显示效果)可以作用在同一个HTML元素(标签)上,同时生效

好处:
1.功能强大
2.将内容展示和样式控制分离,降低耦合,解耦,让分工协作更容易,提高开发效率
语法:
选择器 selector
1.基础选择器
1)id选择器
#id属性值{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
选择器选择具体的id属性值为元素
建议html页面元素的id唯一


2)元素选择器
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
选择具有相同标签名称的元素
id选择器的优先级高于元素选择器

3)类选择器
.class值{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
选择具有相同的class属性值的元素
a) 类选择器优先级高于元素选择器
b) 类属性值和id在HTML里本质上一样,都是"身份证"
c) 一个元素的class值可以有多个,如果写多个class值需要用空格隔开
d) 如果一个标签定义多个class值并给每个class值赋予属性,会只有一个生效

2. 扩展选择器：
            1) 选择所有元素：
*{}一次选择所有标签
            2) 并集选择器：
选择器1,选择器2{}一次选择多个HTML元素,注意与后代选择器区分
            3) 后代选择器
选择器1 选择器2{}选择选择器1下的所有辈分选择器2元素
注意与后代选择器区分
            4) 子元素选择器
选择器1 > 选择器2{}注意: 选择选择器1下的儿子辈选择器2选择的元素

            5) 属性选择器
元素名称[属性名="属性值"]{}选择元素名称，属性名=属性值的元素签
注意: 一般用来查找不同type类型的input标

            6) 伪类选择器：

元素:状态{}选择一些元素具有的状态
* 如： <a>
                 * 状态：
         * link：初始化的状态
                  * visited：被访问过的状态
                  * active：正在访问状态
                  * hover：鼠标悬浮状态


3.选择器中的属性
1) 字体、文本
font-size字体大小
font-size: 30px;
color文本颜色
color: #FF0000;
text-align对其方式:
text-align: left;
right
center
line-height行高,该文本每行的高度
line-right: 100px;

2) 背景
background该方法可用一张图片来修饰一个元素当做背景
background: URL(图片的相对路径);
修改图片为不重复填充和居中显示:
background: URL(图片的相对路径) no-repeat center;
3) 边框
border设置边框，复合属性
border: 3px solid red;
属性分别为 线的粗细 实线 颜色
4) 尺寸
width宽度
width: 10px
height高度
height: 50px

5) 盒子模型：控制布局
margin外边距
当前标签距离父标签的边距
margin: auto; 水平居中
padding内边距
padding: 100px;
默认情况下内边距会影响整个盒子的大小
解决方法:
box-sizing: border-box;  
设置盒子的属性，让width和height就是最终盒子的大小不会因为内边距的变化而改变盒子的变化
float浮动设置标签显示的位置,浮动的先后顺序按照元素定义的先后顺序
float: left;
right;


CSS的使用:
注:三种方式的生效顺序为就近原则
1.内联样式,行内样式
<div style="color:red;">hello css</div> 不推荐使用,无法解耦
2.内部样式,页面内样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
<style>
div{
color:red;
}
</style>
3.外部样式
外部定义css文件,然后在页面中通过<link herf="路径">引入
* a.css文件：
                div{
                    color:green;
                }
            <link rel="stylesheet" href="css/a.css">
            <div>hello css</div>
            <div>hello css</div>








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2