HTML
软件架构
C/S 客户端/服务器
- 桌面上使用的软件都属于C/S构架的
- 用户通过客户端来使用软件
- 而在远程的服务器来处理软件的业务逻辑
- 特点：
- 使用C/S架构的软件必须要安装
- 软件更新时服务器和客户端都需要更新
- C/S架构的软件不能跨平台使用
- C/S架构的软件服务器和客户端采用自有的协议，比较安全。
##### B/S 浏览器/服务器
- B/S本质上也是一种C/S
- 不同的是 B/S框架的软件使用浏览器作为客户端
- B/S架构的软件都是通过访问网页的形式使用的
- 特点：
- 使用B/S架构的软件不需要安装，只需要系统中有浏览器即可
- B/S软件更新时客户端不需要更新
- B/S架构的软件可以跨平台使用
- B/S架构的软件服务器和浏览器之间的通信采用HTTP协议。较不安全
### 进制
- 十进制
- 0,1,2,3,4,5,6,7,8,9,10,11,12
- 二进制
- 满2进1
- 计算机底层保存数据时采用二进制
- 0,1 / 10,11/ 100,111
- 八进制
- 满8进1
- 0,1,2,3,4,5,6,7
- 10,11,12,13 ... 17
- 十六进制
- 满16进1
- 使用abcdef代表11,12,13,14,15,16
- 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
### 编码
- 将字符串转换称二进制码的过程称为编码
- 将二进制码转换为字符串的过程称为解码
- 编码和解码所遵循的规则称为 字符集
- 常见字符集
- ASCII
- ISO-8859-1
- GB2312
- GBK
- UTF-8 万国码，几乎支持所有字符
- 乱码的根本原因就是编码和解码所采用的字符集不同所造成的
### 网页结构
- 结构
- 定义出网页的整体结构
- 使用HTML来定义页面的结构
- 表现
- 网页的所有外在显示的内容都属于表现
- 使用CSS来设置页面的样式
- 行为:
- 行为用来处理用户和网页之间的交互
- 使用JavaScript来处理页面中的交互行为
- 一个设计优良的网页要求结构, 表现, 行为三者分离
## HTML 简介
- 超文本标记语言
- HTML负责页面的结构. 它是通过HTML标签的形式来定义出页面中的各个部分
- HTML页面基本结构
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
### HTML 标签
- 标签又称之为元素
- 普通标签
- 语法<标签名></标签名>
- 自结束标签
- 语法:<标签名/>
- 属性
- 可以在标签或自结束标签中为标签(元素)添加属性
- 语法:
- ````<标签名 属性名=“属性值”></标签名>````
- ````<标签名 属性名=“属性值” /> ````
##### HTML常用标签
- ````<!doctype html>````
- 文档声明. 表示当前页面是以HTML5规范编写的
- ````<html>````
- 网页的根标签,有且只有一个.网页的所有内容都在根标签中
- ````<head>````
- 网页的头部标签. 可以帮助浏览器来解析页面或帮助搜索引擎检索网页
- ````<title>````
- 网页的标题标签. 内容会默认显示在网页的标题栏中
- 搜索引擎检索网页时会主要检索title中的内容.来判断网页的主要内容.会影响到网页在搜索引擎的排名
- ````<meat/>````
- 定义当前页面的字符集
- ````<meta charset="utf-8" />````
- 可以定义网页中的关键字
- ````<meta name="keyword" content="前端,html5,java”/>````
- 可以设置网页的描述信息
- ````<meta name="description" content="专注于搜集美女图片的网站" />````
- 可以用来做重定向请求
- ```` <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />````
- 可用来制作网站的小图标
- ````<link href="img/icon_mouse_32.ico" rel="shortcut icon" type="image/x-icon"/>````
- ````<body>````
- 网页的主题. 所有可见内容都应该写在body标签中
- ````<h1>~<h6>````
- 内容标题标签
- 从h1到h6重要性依次递减
- 一般一个页面中只有一个h1标签
- 一般只使用h1-h3
- ````<p>````
- 网页中的段落标签
- ````<br/>````
- 换行
- ````<hr/>````
- 水平分割线
- ````<ul><li>````
- 无序列表
- ````<ol><li>````
- 有序列表
- ````<dl><dt><dd>````
- 定义列表
- ````<img/>````
- 图标标签
- 属性:
- src: 指向外部图片的路径
- alt: 图标描述信息
- ````<a>````
- 通过超链接可以使从一个页面跳转到另一个页面
- 属性:
- href: 指定要打开的页面地址或路径
- target:[可选] 要打开页面的位置
- _self: 默认值.当前窗口的卡爱
- _blank: 在新的窗口的打开
- ```` <!-- -->````
- html注释的内容
- 用来对代码进行描述或解释说明
### 实体 (转义字符)
- 可以使用实体来表示一些特殊符号
- 语法:
- &实体名字; ©
- &#x四位code编码;☭
- 常用实体:
- 空格 ```` ````
- 小于号< ````<````
- 大于号> ````>````
- 版权符号 ````©````
### HTML 表格
- 使用 ````<table>```` 标签创建表格
- 在````table````标签中使用 ````<tr>````来代表表格中的一行
- 在````<tr>````标签中使用````<td>````代表每一行中的单元格
- ````<thead>````
- 表示表格的头部.永远显示在表格头部
- 可以将头部信息的````<tr>````放到````<th>```` 中填写头部信息
- ````<tbody>````
- 表示表格的主体. 可以将主题的````<tr>````放到````<tbody>`````中
- ````<tfoot>````
- 表示表格的底部. 可以将底部的````<tr>````放到````<tfoot>````中
- 注意: 默认情况下的如果创建一个表格没有指定````<tbody>````时浏览器会自动添加一个.并将所有````<tr>````都放到````<tbody>````里.选择器使用后代选择器
### HTML 表单
- 使用 ````<form>```` 标签来创建表单
- 表单标签必须有一个action属性
- action需要一个服务器地址.当提交表单时,会提交到该地址
##### 表单常用种类
- 文本框
- 使用input标签创建
- ````type="text"````
- 提交到服务器元素必须指定name属性
- 密码框
- 使用input标签创建
- ````type="password"````
- 提交按钮
- 使用input标签创建
- ```` type="submit" ````
- 提交按钮中可通过设置value的值指定按钮中的文字
- 单选项
- 使用input标签创建
- ````type="radio"````
- ````checked="checked"```` 单选框默认选中状态
- name属性用来对单选项分组
- value属性会提交到服务器
- 多选项
- 使用input标签创建
- ````type="checkbox"````
- ````checked="checked"```` 多选框默认选中状态
- name属性用来对单选项分组
- value属性会提交到服务器
- 下拉列表
- 使用````<select>````标签创建下拉列表
- ````<select>````标签需要name属性
- 使用````<option>````标签来向下拉列表中添加选项
- ````<option>````标签需要value属性
- 可以为某个````<option>````添加````selected=“selected”````设置默认选中状态
- 可以为````<select>````添加一个属性````multiple="multiple"````可以设置多选
- 重置按钮
- 使用input标签创建
- ````type="reset"````
- 按钮
- ````type="button"````创建一个单纯的按钮
- 也可以使用 ````<button>```` 标签来创建
- ````<button>````更加灵活