HTML
一、web概念概述
1java web:使用java语言开发基于互联网的的项目
2.软件架构:
(1)C/S:Client/Server 客户端/服务器端:在用户本地有一个客户端程序,在远程有一个服务器端程序
(2)B/S:Browser/Server 浏览器/服务器端:只需要一个浏览器,用户通过不同的网址(URL),客户访问同的服务器程序
3.软件架构优点:
(1)C/S:用户体验好
(2)B/S:开发、安装、部署、维护简单
4.软件架构缺点:
(1)C/S:开发、安装、部署、维护麻烦
(2)B/S:如果应用过大,用户的体验可能会受到影响;对硬件要求过高
5.B/S架构详解
(1)资源分类
①静态资源:
使用静态网页开发技术发布的资源
特点:
所有的用户访问,得到的结果都一样
如:文本,图片,音频,HTML,css,JavaScript
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置了静态资源的解析引擎,可以展示静态资源
②动态资源
使用动态网页技术发布的资源
特点:
所有用户访问可能得到的结果不一样
jsp/sevelt,php,asp...
如果用户请求的是动态资源,那么服务器会执行动态资源,将动态资源转换为静态资源,再发送给浏览器
6.静态资源
(1)HTML:
用于搭建基础网页,展示页面的内容
(2)CSS:
用于美化页面,布局页面
(3)JavaScript:
控制页面的元素,让页面有一些动态的效果
二、HTML
1.概念:是最基础的网页开发语言;Hyper Text Markup Language 超文本标记语言
(1)超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
(2)标记语言:有标签构成的语言。<标签名称> 如html,xml;标记语言不是编程语言
2.入门
(1)语法:
①html文档后缀名为:.html或者.htm
(2)标签分类
①围堵标签:又开始标签和结束标签,如<html> </html>
②自闭标签:开始标签和结束标签在一起;如<br/>(换行标签)
(3)标签可以嵌套
需要正确嵌套,不能你中有我,我中有你;错误写法:<a><b></a></b>;正确写法:<a><b></b></a>
(4)在开始标签中可以定义属性(字体颜色),属性是有键值对组成,值需要用单引号(或双引号)括起来
(5)html的标签不区分大小写,但是建议使用小写。
3.标签
1.文件标签:构成html最基本的标签
html:html文档的根标签
head:头标签,用于指定html文档的一些属性,引入外部的资源
title:文本标题标签
body:体标签
html5中<!DOCTYPE html>:定义文档标签
2.文本标签:和文本有关的标签
注释标签:<!--注释内容-->
<h1>to<h6>:标题标签,1-6字体越来越小
<p>:段落标签
<br/>:换行标签<br>
<hr>:显示一条水平线<hr/>;属性:color:颜色,width:宽度,size:高度,align:对齐方式 (center:居中,left:左对齐,right:右对齐)
<b>:字体加粗
<i>:字体斜体
<font>:字体标签
<href>
属性定义:
color
英文单词:red,green,blue
rgb(值一,值二,值三):值的范围:0~255 如rgb(0,0,255)
#值1值2值3:值的范围:00~FF之间,如:#FF00FF;
width
数值:width=‘20’,数值的单位默认是px(像素)
数值%:占比相对于父元素的一个比例
3.图片标签<img>,<img/>;如:<img src="image(路劲)/图片文件名.jpg">
align:对齐
alt:加载失败时打印的内容
src:指定图片的的位置
相对路劲:以.开头的路径;./:代表当前目录;../:代表上一级目录
4.列表标签
有序列表
ol:
li:
无序列表
ul:
li:
5.连接标签:
a:定义一个超链接 属性:herf:指定访问资源的URL(统一资源定位符) target:指定打开资源的方式(——self:默认值,打开当前页面;——blank:在空白页面打开)
6.div和span(块标签)
span:文本信息在一行展示,行内标签 (内表签)
div:每一个div占满一整行,块级标签
7.语义化标签:html5中为了提高程序的可读性,提供一些标签
<header>页眉
<footer>页尾
8.表格标签:
table:定义表格
width:宽度
border:边框
cellpadding:定义内容与边框之间的距离,0时左对齐边框
cellspacing:定义单元格之间的距离,如果指定距离为0,则单元格的线合为一条
bgcolor:被景色
align:对齐方式
tr:定义行
align:对齐方式
align:对齐方式
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
caption:定义表格标题
thead:表示表格头部份
tbody:表示表格的体部分
tfoot:表示表格的脚部分
9.表单标签
概念:用于采集用户输入的数据,用于和服务器进行交互
使用标签:from:用于定义表单,可以定义一个范围,范围代表采集用户数据的范围
属性
action:指定提交的URL
method:指定提交方式(一共七种,2种比较常用)
get
请求参数会在地址栏中显示,会封装在请求行中
url(请求参数)长度(大小)是有限制的
不太安全
post
请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议后讲解)
请求参数长度没有限制
较为安全
表单项中的数据要被提交,必须指定其name属性
10.表单项标签
input:可以通过type属性值,改变元素展示的样式
type属性
text:文本输入框
placeholder:指定输入框的提示信息,当内部内容发生变化会自动消失,一般用在用户名和密码
password:密码输入框
radio:单选框;1.要想多个单选框实现单选必须让name值一样 2.一般会给每一个单选框提供一个value属性,指定被选中后提交的值;3.checked属性,可以指定默认值
checkbox:复选框;1.一般会给每个单选框提供value属性,指定其被选中后提交的值;2.checked属性,可以指定默认值
file:文件选择框
hidden:隐藏域,用于提交一些信息
按钮
submit:提交按钮
button:普通按钮
image图片提交按钮;src属性指定图片路径
color:取色器
label:指定输入项的文字描述信息
注意:label的for属性一般会和 input的id属性值对应,如果对应了,则点击label区域,会让input输入框获取焦点
select:下拉列表
option:下拉选择内容 子元素
province
selected:默认值
textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行
三、css:页面美化和布局控制
1.概念:Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效
2.好处
(1)功能比较强大
(2)将内容展示和样式控制分离
降低耦合度(解耦)
让分工写作更容易
提高开发效率
3.css的使用:css与html结合
(1)内联样式
在标签内使用style属性指定css代码
(2)内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码,在一个html文件中
(3)外部样式
1.定义css资源文件
2.在head标签内,定义link标签,引入外部标签
(4)注意
1,2,3种方式 css作用范围越来越大
1方式不常用,后期常用2,3
第三种格式可以简写
4.css语法
(1)格式
选择器
5.选择器:筛选具有相似特征的元素
(1)基础选择器
id选择器:选择具体的id属性值 ;语法:#id属性值{},建议在一个html页面中id值唯一
2.元素选择器:选择具有相同标签名称的元素;语法:标签名称{};注意id选择器优先级高于元素选择器;类选择器优先级也高于元素选择器,且低于id选择器
类选择器:选择具有相同的class属性值的元素,语法: .class属性值{}
(2)扩展选择器
*号:选择所有元素;语法*{}
并集选择器:选择器1,选择器2{}
子选择器:筛选选择器1下的选择器2;语法:选择器1 选择器2{}
父选择器:筛选选择器2的父元素选择器1;语法:选择器1>选择器2
属性选择器:选择元素名称,属性名=属性值的元素;语法:元素名称[属性名=”属性值“]{}
伪类选择器:选择一些元素具有的状态;语法:元素:状态{};如:<a> 状态:link:初始化的状态;visited:被访问过的状态;active:正在访问的状态;hover:鼠标悬浮状态
6.属性
(1)字体、文本<p>标签
font-size:字体的大小
color:文本的颜色
text-align:对齐方式
line-height:行高
(2)背景
background:设置对象的背景特征; background: url("img/logo.jpg") no-repeat center; no-repeat (不重复显示)
(3)边框
border:设置边框 ;border:1px solid red;
(4)尺寸
width:宽度
height:高度
(5)盒子模型:控制布局
margin:外边距
padding:内边距;
默认情况下内边距回会影响盒子大小;设置盒子的属性,box-sizing:border-box; 让width和height就是最终盒子的的发小
float:浮动;left;right