目录
HTML
HTML概述
系统架构
B/S架构
Browser/Server 浏览标记
C/S架构
Client/Server 客户端/服务器
W3C(world wide web)
世界万维网联盟(制定了HTML的规范)
HTML是超文本标记语言(标记:标签 使用大量标签;超文本:流媒体、图片、声音等)
HTML基础
基本标签
1、<!doctype html> html5语法(解释文档类型)
(!加tab 可自动生成)
html不区分大小写
meta charset=“utf-8”浏览器采用xxx字符集打开
2、换行 <br >
3、水平线<hr>
4、font标签 字体标签
6、实体符号(以&开始 以;结束)
< < 小于号 > >大于号
 空格
表格(table)
<table border='1px' width='100px' height='100px'>//可以设置样式
<thead>//表头
<tr>//行
<th>//单元格 列
<input type="checkbox" id="all">//复选框
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="one">//表格内容
<tr>//行
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>1</th>
<th>1</th>
</tr>
</tbody>
</table>
1、单元格合并
行合并 rowspan=“” 删下不删上(同一行)
列合并 colspan=“”(不同行)
2、th标签(标题单元格 居中加粗)
thead、tbody、tfoot(非必须 便于js的编写)
背景 background:url(路径)
图片 <img src=“” title='标题' alt=''>
超链接
<a href=“路径/本地地址” talent=""></a>
href hot reference 热引用
talent:_blank新窗口
_self
_top
_parent
作用:
1、通过超链接从浏览器向服务器发送请求
B---请求(request)-----S
S---响应(response)-----B
超链接提交的数据是固定的
列表
表单(form)
概述
1、作用:收集用户信息。提交数据给服务器
2、<form action="请求路径"></from>
3、action 作用:指定提交数据给哪个服务器(请求路径中的端口对应的服务器)
格式: action?name=value&name=value&name=value
有name才能提交
method 属性(超链接 默认get)
get:信息会显示在浏览器地址栏上
post:不会---
input 输入框
下拉列表
select(选择)
option value=”“
multiple=”multiple“ size=”下拉列表显示个数
input type=”submit/button“ name=”“
submit 提交表单数据
button 普通按钮
reset 重置清空
radio 单选按钮
file 选择文件
text 文本
password 密码
checkbox 复选框
单选按钮必须要有value
hidden 在网页上不显示 但还是会提醒
value控件
readonly和disabled
都不能修改 但disabled不提交数据
控件maxlength和minlength
设置文本框数字
文本域 textarea
没有value
表单验证
h5新增类型:
设置表单元素必填 required
如何使用正则 pattern
提交表单时不验证 novalidate/formnavalidate
元素的id属性
在html文档当中。任何元素(节点)都有id属性,id属性是该节点的唯一属性,不能重复
作用:便于获取元素、节点
javascript通过id获取节点对象来进行增删改查
HTML文档是一棵树,叫DOM树(document)。
树上有节点,每个节点都有唯一的id。
div和span
概述
可以称为图层/盒子,方便布局
div独占一行 块级元素
span不会
盒子套盒子
可以通过x坐标和y坐标进行定位
标记: 优先级 1
CSS
CSS概述
层叠样式表
三大特性
层叠性
继承性
可以继承的样式
文本 字体 段落 颜色
text-
font-
line-
color
优先级
权重
继承/* 0
元素选择器 1
类选择器/伪类选择器 10
id选择器 100
行内样式 style=“”1000
!important 无穷大
a链接 不参与继承
权重会叠加 但不会进位
是一种标记语言 美化html 实现结构和样式分离
CSS基础
元素显示模式
块元素
div h p ul ol li dl dt dd table tr form 等元素
独占一行
可以设置宽高 内外边距
宽度默认是父级元素的100%
当块级元素的宽度超过父元素宽度时 不会自动换行
行内元素
a span em strong
默认宽度是本身内容宽度
一行可以有多个元素
行内元素只能放文本或者其他行内元素(a除外)
行内块元素
img input th td
可以实现块级元素在同一行 但中间会有缝隙
默认宽度为本身内容宽度
宽高 行高 内外边距可以设置
转换模式
display
block
inline
inline-block
css语法规范
选择器
作用:选择标签
分类
基础选择器
标记: 优先级 1
标签选择器 例如:div span等
标记: 优先级 1
类选择器 例如:.box等
标记: 优先级 1
id选择器 例如:#box
标记: 优先级 2
只能出现一个 不能同名
搭配js使用
通配符选择器 *
标记: 优先级 2
复合选择器