---

前言

本文记录学习CSS和HTML的一些笔记及知识点

---

一、HTML

1.1概述及相关

1.1.1 C/S与B/S软件结构

• JAVA SE 是 C\S结构 , C 即为Client客户端，S为Server服务端。（客户端/服务器）
  在用户本地有一个客户端程序，在远程有一个服务器端程序。
  优点：
  1．用户体验好
  缺点：
  1.开发、安装，部署，维护麻烦

• WEB为B\S结构，B为Broswer(浏览器)，这个浏览器（Tomcat）相当于一个客户端。（浏览器/服务器）
  优点：
  1、开发、安装，部署，维护简单。
  缺点：
  1、如果应用过大，用户的体验可能会受到影响。
  2、对硬件要求过高。

B/S架构详解

资源分类
1、静态资源
使用静态网页开发技术发布的资源。
特点:
①所有用户访问，得到的结果是一样的。
②如:文本，图片，音频、视频，.HTML,cSS, Javascript
③如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

2、动态资源
使用动态网页技术发布的资源。
特点：
①所有用户访问，得到的结果可能不一样。
②如∶jsp/servlet,php,asp…
③如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

所以需要先学习静态资源，再学习动态资源。

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

1.2 HTML（hyper text markup language超文本标记语言）

一、快速入门语法:

1. html文档后缀名.html 或者.htm
2. 标签分为

• 围堵标签∶有开始标签和结束标签。如 < / html>.
• 自闭和标签︰开始标签和结束标签在一起。如<br/ >

3. 标签可以嵌套∶
   需要正确嵌套，不能你中有我，我中有你。
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。

二、标签学习∶

1. 文件标签:构成html最基本的标签
   html: html文档的根标签
   head :头标签。用于指定html文档的一些属性。引入外部的资源
   title :标题标签。
   body :体标签
   <! DOCTYPE html> : html5中定义该文档是html文档
2. 文本标签∶和文本有关的标签
3. 图片标签：
4. 列表标签：
5. 链接标签：
   a:定义一个超链接
   属性：
   href ：指定访问资源的URL统一资源定位符。
   target :指定打开资源的方式

_self：默认值，在当前页面打开
_blank ：在空白页面打开

6. 表格标签︰
   table :定义表格
   width :宽度 horder :边框 cellpadding
   tr :定义行
   td:定义单元格
   th :定义表头单元格

7. 语义化标签：
   header :页眉
   footer :页脚

8. 表单标签
   概念:用于采集用户输入的数据的。用于和服务器进行交互。
   1、form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
   2、属性：
   action：指定提交数据的URL
   method：指定提交方式
   3、分类：一共7种，2种比较常用
   get：1、请求参数会在地址栏中显示。 2、请求参数大小是有限制的。3、不太安全。
   post：1、请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)。2、请求参数的大小没有限制。3、较为安全。

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

表单项标签∶
一、input :可以通过tvpe属性值，改变元素展示的样式。
type属性∶
text :文本输人框，默认值
placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password :密码输入框
radio:单选框

性别:<input type="radio" name="gender" value="male" >男
<input type="radio" name="gender" value="female" checked>女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="java" checked>Java
<input type="checkbox" name="hobby" value="game">游戏
<br>

1
2
3
4
5
6
7
8

注意：
1．要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2．一般会给每一个单选框提供value属性，指定其被选中后提交的值.
3. checked属性，可以指定默认值.
checkbox:复选框
注意∶
1，一般会给每一个单选框提供value属性，指定其被选中后提交的值.
2. checked属性，可以指定默认值.
label:指定输入项的文字描述信息.
注意︰
label的for属性一般会和 input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

二、select(下拉列表)

<select name="province" >
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option>
</ select>
<br>

1
2
3
4
5
6
7
8

三、文本域（textarea）

<textarea cols="20"rows="5" name="des"></textarea>
1