html、css

该笔记来源于黑马传智2020最新Java 以及传智Javaweb ,此笔记是我将两者的综合而成

web概念概述

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

软件系统体系结构

1.常见软件系统体系结构B/S、C/S

1.1 c/s

C/S结构即客户端/服务器（Client/Server），例如QQ；
需要编写服务器端程序，以及客户端程序，例如我们安装的就是QQ的客户端程序；
缺点：软件更新时需要同时更新客户端和服务器端两端，比较麻烦；
优点：安全性比较好。

1.2 b/s

B/S结构即浏览器/服务器（Browser/Server）；
优点：只需要编写服务器端程序；
缺点：安全性较差。

2.web资源

2.1　Web资源介绍

静态资源：使用静态网页开发技术发布的资源。
特点：

所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

动态资源：使用动态网页及时发布的资源。
特点：

所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

2.2　静态资源和动态资源区别

wps1.jpg

静态资源中包括：
可以这样理解：

html是名词，css是形容词，Javascript是动词

HTML：用于搭建基础网页，展示页面的内容
CSS：用于美化页面，布局页面
JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

1.html简介

1.1 HyperText Markup Language：超文本标记语言

超文本：超出文本的范畴，使用html可以轻松实现这样操作
标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>

1.2 html的规范（遵循）

1.2.1 标签分为：
围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如

1.2.2 html的标签不区分大小写，但是建议使用小写。
1.2.3 html包含两部分内容
<head> 设置相关信息</head>
<body> 显示在页面上的内容都写在body里面</body>

2.html 操作思想

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

3.html常用的标签

文件标签：构成html最基本的标签
- html:html文档的根标签
- head：头标签。用于指定html文档的一些属性。引入外部的资源
- title：标题标签。
- body：体标签
- '<!DOCTYPE html>'：html5中定义该文档是html文档
1. 文本标签：和文本有关的标签
注释：
- ```
<h1> to <h6>：标题标签
```
  h1~h6:字体大小逐渐递减
  <p>：段落标签
  
  ：展示一条水平线
- 属性：
- color：颜色
- width：宽度
- size：高度
- align：对其方式
- center：居中
- left：左对齐
- right：右对齐
  <b>：字体加粗
  <i>：字体斜体
  <font>:字体标签
  <center>:文本居中
- 属性：
- color：颜色
- size：大小
- face：字体

属性定义：

color：

英文单词：red,green,blue
rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
值1值2值3：值的范围：00~FF之间。如： #FF00FF

width：

数值：width='20' ,数值的单位，默认是 px(像素)
数值%：占比相对于父元素的比例
图片标签：

img：展示图片

属性：

src：指定图片的位置

代码：

相对路径
* 以.开头的路径
* ./：代表当前目录  ./image/1.jpg
* ../:代表上一级目录
-->

<img src="./image/jiangwai_1.jpg">

<img src="../image/jiangwai_1.jpg">

列表标签：
有序列表：
ol:
li:
无序列表：
ul:
li:
链接标签：
a:定义一个超链接
属性：
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开
div和span：
div:每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签内联标签
语义化标签：html5中为了提高程序的可读性，提供了一些标签。
<header>：页眉
<footer>：页脚
表格标签：

table：定义表格
width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式
tr：定义行
bgcolor：背景色
align：对齐方式
td：定义单元格
colspan：合并列
rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分
代码示例：

<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">

9.表单标签

<form></form>: 定义一个表单的范围

<form></form>: - 属性

action：提交到地址，默认提交到当前的页面
method: 表单提交方式

常用的有两种 get和post，默认是get请求

** 面试题目： get和post区别

get：

请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
请求参数大小是有限制的。
不太安全。

post：
1.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
请求参数的大小没有限制。
较为安全。

** enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性（第22天时候讲文件上传）

** 输入项：可以输入内容或者选择内容的部分

大部分的输入项使用 <input type="输入项的类型"/>

在输入项里面需要有一个name属性

普通输入项：<input type="text"/>
密码输入项：<input type="password"/>

单选输入项：<input type="radio"/>

在里面需要属性 name
name的属性值必须要相同
必须有一个value值（如果是在表单里面使用一组相同name的radio，那么一般在提交时都是得到checked的value值，而<input>标签后面的“学生”，“教师”则是在网页中显示的值）

实现默认选中的属性
-- checked="checked"

*** 复选输入项：

<input type="checkbox"/>

在里面需要属性 name
name的属性值必须要相同
必须有一个value值

实现默认选中的属性
checked="checked"

*** 文件输入项（在后面上传时候用到）

<input type="file"/>

*** 下拉输入项（不是在input标签里面的）

<select name="birth">
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
</select>

默认选择
selected="selected"

文本域

<textarea cols="10" rows="10"></textarea>

隐藏项（不会显示在页面上，但是存在于html代码里面）

<input type="hidden" />

提交按钮

<input type="submit"/>
<input type="submit" value="注册"/>

file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?sex=on&love=on&love=on&birth=1991

当在输入项里面写了name属性之后

file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html
?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=
file:///C:/Users/asus/Desktop/0413/day01/code/10-表单标签一.html?
phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=

?输入项name的值=输入的值&
参数类似于key-value形式

使用图片提交

<input type="image" src="图片路径"/>

重置按钮：回到输入项的初始状态

<input type="reset"/>

普通按钮

<input type="button" value=""/>

CSS

1. 概念：

Cascading Style Sheets 层叠样式表

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

2. 好处：

2.1. 功能强大
2.2. 将内容展示和样式控制分离

降低耦合度。解耦
让分工协作更容易
提高开发效率

3. CSS与html结合方式

内联样式（连接，用的较少）

在标签内使用style属性指定css代码
- 如：<div style="color:red;">hello css</div>
1. 内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码

<style>
                div{
                    color:blue;
                }
        
            </style>
            <div>hello css</div>

3. 外部样式

1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
* 如：
* a.css文件：

html
        div{
        color:green;
        }
     <link rel="stylesheet" href="css/a.css">
     <div>hello css</div>
         <div>hello css</div>

* 注意：
* 1,2,3种方式 css作用范围越来越大
* 1方式不常用，后期常用2,3
* 3种格式可以写为：
html <style> @import "css/a.css"; </style>

4. css语法：

格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素
注意：
每一对属性需要使用；隔开，最后一对属性可以不加；

5. 选择器：筛选具有相似特征的元素

分类：

基础选择器
1.1 id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法：#id属性值{}
1.2 元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器
1.3 类选择器：选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器
扩展选择器：
2.1 选择所有元素：
语法： *{}
2.2 并集选择器：
选择器1,选择器2{}
2.3 子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
2.4 父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2{}
2.5 属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名="属性值"]{}
2.6 伪类选择器：选择一些元素具有的状态
语法：元素:状态{}
如： <a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
优先级:
style > id选择器 > class选择器 > 标签选择器

6. 属性

6.1 字体、文本
font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

6.2 背景
background：

6.3 边框
border：设置边框，符合属性

6.4 尺寸
width：宽度
height：高度

6.5 盒子模型：控制布局
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
left
right

html、css

html、css

web概念概述

软件系统体系结构

1.常见软件系统体系结构B/S、C/S

2.web资源

2.1 Web资源介绍

2.2 静态资源和动态资源区别

HTML

1.html简介

2.html 操作思想

3.html常用的标签

CSS

1. 概念：

2. 好处：

3. CSS与html结合方式

4. css语法：

5. 选择器：筛选具有相似特征的元素

6. 属性

2.1　Web资源介绍

2.2　静态资源和动态资源区别