萌新学习——HTML&CSS基础
1.Web基础
C/S和B/S
Client/Server服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如oracle或SQLServer。客户端需要安装专用的客户端软件——例如：WeGame,
Brower/Server,客户机上只要安装一个浏览器，如IE浏览器、谷歌浏览器等；服务器安装数据库，在这种结构下用户界面完全通过www浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在服务端实现，浏览器通过网络协议同数据库进行数据交互。——不需要安装，通过网页直接打开使用
2.HTML文档结构
a.<!DOCTYPE html>定义文档类型
b.<html>定义html文档
c.<head>定义头部文档
i.引用脚本，指示浏览器在哪里找到样式表，提供源信息等；定义文档的各种属性和信息
ii.<base>为页面上的所有连接规定默认地址或默认目标
iii.<meat>提供有关页面的信息、关键字、编码模式、兼容性模式设置、页面缩放等
iv.<link><script><style><title>
d.<body>定义文档主体
3.文档标签
a.标题标签H1-H6(字体由大到小)
b.字体标签：<b>、<strong>加粗、<sup>上标、<sub>下标、<u>下划线、<i>、<em>斜体、<code>代码、<cite>引用
c.格式化标签：<p>段落标签、<br>换行、<hr>分割线、<pre>预格式化
4.链接标签
a.Href
i.图片路径、文件路径、网址、锚点
b.Target（属性）
ii._self(连接到目标地址-在当前页面)、_blank(连接到目标地址-新建一个页面)、_parent(上一级-父级)、_top(最顶级)、[name]
5.图片标签
a.src图片路径
b.alt无效替代1
6.列表
a.无序列表ul-li
i.type属性：circle(空心圆)、disk(默认值)、square(实心方块)
b.有序列表ol-li
i.type属性：1/i/I/a/A
c.自定义列表dl-dt-dd
7.表格
a.Table tr td th-单元格加粗
b. 合并：colspan-跨列、rowspan-跨行
c.扩展样式：（table+宽高 td+边框）
i.border-collapse
1) separate-默认值，边框会被分开
2) collapse-如果可能，边框会被合并成一个单一的边框，会忽略spacing和empty-cells的值
ii.border-spacing:[length]
1) 规则相邻单元的边框之间的距离，使用px、em等单位，不允许使用负值
2) 定义1个length参数，定义的是水平和垂直的间距
3) 定义2个length参数，定义的是第1个为水平，第2个位垂直的间距
8.表单
a. form标签；action-后端地址，method-提交方式
b. 侧重于与后端发送数据；以input标签为主，以name属性为辅，通过form表单向后端发送数据
c. 标签属性
i. type：text、count、date、button、radio、checke、hidden、submit
ii. name:设置的值必须和后端接受的前端数据的参数名称一致
iii. value:显示在页面的值
9.Iframe
a. Frameset
b. iframe中的name属性配合a标签中的target属性使用
c. iframe的src属性-加载新页面
10.div-span
a. div块状容器
b. span行级容器
CSS
1.CSS选择器
a. 基本选择器
i. ID
ii. 类选择器
iii. 标签选择器
b. 其他选择器
i. .classname空格div 当前元素所有后代元素-子子孙孙
ii. .classname>div 当前元素下一级所有子元素-只有子代
iii. .classnameA~.classnameB 当前节点A之后的元素B
c. 伪类选择器
i. :hover 鼠标经过时设置其样式
ii. :active 鼠标按下时设置其样式
iii. :visited 选择已访问的链接，并设置其样式-针对a标签
2.CSS优先级
a. style属性>ID选择器>class选择器>标签
b. 就近原则，同级别选择器则取最新属性生效
3.盒子模型
a. 盒子水平排列-margin无重合
b. 盒子垂直排列-margin重合
c. 盒子样式
i. border：1px dashed #red
ii. Padding:1px 1px 1px 1px 顺时针方向，从上开始
iii. Margin:0 auto
4.样式
a. 文本样式-Font
i. Font-family、font-size、font-weight
ii. text-align：left、center、right
iii. line-height:数值(一般用像素或者所在元素高度的于字体大小的比值)例：高度为200px,字体为20px，若想居中展示
1) 数值：line-height：200px
2) 比值：line-height：10
iv. Text-decoration：none/underline/over/line-through
b. 背景样式-backgroud
i. Backgroud-color: #ffffff #fff rgb(255,255,255) white 16进制 (1,2,…A,B,C,D,E) ff=15*16^1+15*16^0=255
ii. Backgroud-image:url()
iii. Backgroud-repear:no-repeat/repeat-x/repeat-y
iv. Backgroud-position:
1) top left(第1个值上中下，第2值左中右)
2) x% y%(第1个水平位置，第2个垂直位置)左上角为0%，0%， 右下角为100%，100%；只规定一个值则另外一个值为50%
3) Xpx Ypx
v. Backgroud-size:
1) length:长度，如果只设置一个值则第2个值会被设置为auto
2) percentage：百分比，如果只设置一个值则第二个值会被设置为auto
3) cover：覆盖背景，保持纵横比
4)contain：图片不超出标签范围的情况下变成最大，且保持纵横比
c. 布局样式
i. 文档流 即文档的排列方式：在同一个平面中从左到右，从上到下排列
ii. 脱离文档流 盒子模型脱离源文档的文档排列方式，从同一平面中浮起来，根据一定的要求排列
iii. 浮动
1) float
2) clear：both
iv. 定位-position
1) position与top、bottom、left、right联用
2) Absolute:绝对定位，相对于静态定位(static)以外的第一个父元素进行定位，若在非静态内则以该非静态元素未定位
3) Fixed:绝对定位，是相对于浏览器窗口为进行定位，既有滚动条时页面效果相对静止类似登陆弹窗
4) Relative:相对定位，相对于其原本自身正常定位位置进行定位，即left：20px会向元素的left位置添加20像素，以其本身原本的位置
5) static：默认值
6) lnherit：规定应该从父元素继承position属性的值
7) sticky：h5-粘性定位，left，top不设置值时不脱离文档流，设置后类似fixed效果
v. 盒子层次z-index属性，数值越高越在顶层
vi. 呈现形式
1) block：块级元素-可设置宽高，元素独占一行
2) inline：行级元素-不可设置宽高，元素自适应内部内容
3) inline-block：介于前两个之间，可设置宽高，但不独占一行
浙公网安备 33010602011771号