爱站程序员基地B/S架构资源分为静态资源和动态资源静态资源： html css javaScript动态资源: 不同用户访问 得到的结果可能不一样如 jsp/servlet/php/asp如果用户请求的是动态资源 那么服务器会执行动态资源转换为静态资源 在发送给服务器
html
概念: hyper text markup language超文本传输语言超文本:超文本是用超链接的方法 将各种不同空间的文字信息组织在一起的网状文本标记语言:由标签构成的语言 <标签名称> 如 html,xml标记语言不是编程语言
快速入门
语法：html文档后缀名 .html 或者 .htmhtml 不区分大小写 但一般用小写标签:注释 <!-- 注释内容 -->文件标签 构成html最基本的标签<html> html 文档的根标签<head> 头标签 用于指定html文档的一些属性 引入外部的资源<title> 标题标签<body> 体标签<!doctype html>文本标签:<h1>to<h6> 标题标签<p> 段落标签<br> 换行<hr> 显示一条水平线<b><i>*<font><center /> 内容居中显示
html 是页面内容控制
css 是页面样式控制
html 表单标签
表单: 用于采集用户输入的数据 用于和服务器进行交互action 指定提交数据的urlmethod 指定提交的方式 get post一共有7种 2种常用get请求参数会在地址中显示请求参数大小是有限制的不太安全post不会在地址栏中显示 会封装在请求体中请求参数大小没有限制较为安全表单中的数据要想被提及 必须指定name属性<form action=\"#\" method=\"get\"><label for=\"username\">用户名:</label><input name=\"username\"/><br />密码:<input name=\"password\"/><br /><input type=\"submit\" value=\"登陆\"/></form>input 可以通过type属性 改变显示样式placeholder： 给输入框添加提示信息text 文本输入框password 密码输入框radio 单选框name属性值要相同一般会给每一个单选框提供value属性 代表提交后的值checkbox 复选框会给每一个单选框提供value属性 代表提交后的值checked = ‘checked’ 默认被选中<label for=\"username\">用户名:</label><input name=\"username\"/><br />把label标签和input对应后 点击label区域 input框获取焦点file 提交文件hidden 隐藏域 用于提交隐藏数据 当点击提交后 会自动传入后台submit 提交表单button 只是按钮 点击不会提交imgage： 图片提交按钮 通过src指定图片路径color 取色器date 选择时间email 会帮助校验是否是邮箱select 下拉列表<select name=\"province\"><option> --请选择-- </option><option value=\'1\'> 安徽</option></select>textarea 文本域<textarea cols = \'5\' rows = \'20\'></textarea>
CSS 页面美化和布局控制
概念：cascading style sheets 层叠样式表层叠 多个样式可以作用在同一个html元素上 同时生效好处：功能强大 属性更多将内容展示和样式控制分离降低耦合度让分工更容易提高开发效率css与html的结合方式内联样式在标签内使用style属性指定css代码 以键值对的形式存在并用分号隔开<div style = \"color:red;\">hello css</div>不推荐使用 并没有达到解耦的目的内部样式在head标签内 定义style标签 style标签的标签体就是css代码让**当前页面**的div都显示蓝色<style>div{color: :blue;}</style>外部样式定义css资源文件在head标签内 定义link标签 引入外部的资源文件如：a.css 文件div{color:green;}<link rel = \"stylesheet\" href=\"css/a.css\"><div>hello css</div>1,2,3种方式 css作用范围越来越大
css语法
格式:选择器{属性名1：属性值1；属性名2: 属性值2；...}选择器：筛选具有相似特征的元素每一对属性需要使用分号隔开选择器：筛选具有相似特征的元素分类：基本选择器：id选择器：选择具体的id属性值元素 建议在一个html页面里id值唯一#id属性值{}<head><meta charset=\"UTF-8\"><title>Title</title><style>#div1{color: blue;}</style></head><body><div id=\"div1\">黑马程序员</div></body>元素选择器：选择具有相同标签名称的元素id选择器 优先级高于元素选择器<style>div{color: red;}</style>类选择器 选择具有相同的class属性值的元素.class名{color:blue;}<div class=\"div1\">黑马程序员</div>类选择器优先级高于元素选择器2. 扩展选择器1.选择所有元素:*{}2.并集选择器:选择器1，选择器2{}3. 子选择器:div p{}选择 div标签下的p标签父选择器: 筛选选择器2的父标签 选择器1选择器1 > 选择器2{}属性选择器：选择元素名称 属性名=属性值的元素元素名称[属性名=\'属性值\']{}input[type = \'text\']{}伪类选择器 : 选择 一些元素具有的状态语法: 元素:状态{}a:link{color:pink;}a:hover{}鼠标点击按着不放的样式a:active{}a:visited{}如: <a>* 状态属性font-size ：字体大小color：文本颜色text-align：对齐方式line-height 行高border 设置边框 符合属性background: url(\"img/logo.jpg\") no-repeat center;
盒子模型
用于控制布局margin:外边距padding:内边距默认情况下 padding 会影响盒子的大小 会撑大box-sizing: border-box;float:浮动left right
