C/S与B/S架构
- C/S架构
- client：客户端
- server：服务器
- B/S架构
- browser：浏览器
- server：服务器
WEB工作原理
- 浏览器 => 服务器：发送请求，索取相关数据。
- 服务器 => 浏览器：接收请求并解析，处理业务，返回数据(响应)
- 页面组成：HTML、CSS、JS
开发工具
- 编辑工具：notepad++
- 测试工具：chrome
HTML简介
- 说明：超文本标记语言，所见即所得的文本
- 后缀：.html或.htm，现在统一使用.html
标签格式
- 格式：
- 双边：
<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名> - 单边：
<标签名 属性1="值1" 属性2='值2' 属性3=值3 />
- 双边：
- 特点：
- 成对出现
- 容错性强
- 标签名已预定义
- 全部小写，注意格式
- 属性使用双引号包括
- 说明：标签就是HTML的骨架，最重要的组成部分。
全局架构标签
-
示例：
<html> <!--注释--> <head> <title>网页标题</title> </head> <body text="red" bgcolor="#0000ff"> 这是页面的内容 </body> </html> -
说明：
- html：是文档中最大的标签，所有标签都要放在该标签内部
- head：头部，存放页面显示以外的内容，如：标题、字符集等
- body：身体，存放页面要显示的内容，其中的内容会显示在页面中。
-
属性：
- text：字体颜色
- bgcolor：背景色
-
几乎每个标签都有的属性：
- class、id、name、style
- 后面集合CSS与JS经常使用
常用标签(文本修饰)
- 标题：h1~h6，字体从大到小；h1一个页面中最多一个，不要为了调整字体大小而使用。
- 加粗：
<b></b>、<strong></strong> - 斜体：
<i></i>、<cite></cite>、<em></em> - 下划线：
<u></u> - 删除线：
<s></s> - 上标：
<sup></sup> - 下标：
<sub></sub> - 字体：
<font></font>- size：大小
- color：颜色
- face：脸型(字体类型)
常用标签(格式控制)
- 换行：
<br />，对于任意多个空格或回车，浏览器都解析为一个空格 - 段落：
<p></p>，表示一个段落 - 横线：
<hr />，水平的直线 - 滚动：
<marquee></marquee> - 原样：
<pre></pre>，浏览中显示的内容与文档中的格式一样 - 无序列表：
<ul></ul>，其中的每个元素都是一个<li></li>- type：disc(实心圆，默认)，circle(空心圆)，square(实心方框)
- 有序列表：
<ol></ol>- type：1、a、A、I
- start：序号的其实位置
字符实体
-
说明：HTML 中的预留字符必须被替换为字符实体，否则无法显示。
-
提醒：不用刻意记录字符实体，用的时候查一下就可以了。
-
示例：
< 小于 < > 大于 > 空格 & &
URL(重点)
- 说明：统一资源定位符，是URI的一种，可以唯一的标识一个网络资源。
- 组成：协议://主机:端口/文件?参数1=值1&参数2=值2
- http：80端口，会自动省略
- https：443端口
- 例子：http://www.baidu.com:80/index.html?page=3&wd=python
超链接(a)
- 名称：
<a></a> - 说明：超链接，可以完成页面的跳转
- 属性：
- href：指定跳转地址
- title：光标放上去的提示信息
- target：新页面的打开目标
- _self：当前标签栏
- _blank：新的空白标签栏
- _parent：覆盖父级页面
- _top：覆盖最外层页面
- name：设置锚点，可以用于跳转定位
- 设置该属性后，可以根据其值进行跳转定位(设置a标签的href属性)
- 如：
<a name="p5"></a>，使用：<a href="xxx#p5"></a> - 说明：不但可以在一个页面内部跳转，也可以在不同页面间跳转。
多媒体标签
- img：图片(重点)
- src：图片资源位置
- 相对目录
- .表示当前目录
- …表示上一级目录
- 绝对目录
- window：以盘符开头的目录
- 类unix：以/开头的目录
- 相对目录
- width：宽度
- height：高度，只设置高度时，宽度会等比缩放，两个都设置时会进行拉伸或压缩
- title：光标放上去的提示信息，加载失败也会显示
- src：图片资源位置
- audio：音频
- src：指定资源
- controls：显示控制条
- loop：是否循环播放
- autoplay：自动播放
- video：视频
- 音频标签的属性它都有，还对出来一些
- width、height
- 单独设置时会等比缩放，同时设置时不成比例的一边会留白
表格(table)
- 说明：类似于excel格式
- table：表格标签，所有表格的对象都要放在该标签中
- border：边框尺寸
- bordercolor：边框颜色
- width：宽度
- height：高度
- align：水平对齐方式(left默认、center、right)
- bgcolor：背景色
- tr：表示表格中的一行
- bgcolor：背景色
- align：水平对齐方式(left默认、center、right)
- valign：垂直对齐方式(top、middle默认、bottom)
- td：表示一行中的一个单元格
- rowspan：行合并
- colspan：列合并
- th：与td相似，内容样式上进行加粗，着重强调，用于设置表头
- caption：表格标题，通常用于描述表的作用
分帧(iframe)
- 说明：就是一个页面中包含另一个页面
- 属性：
- src、width、height
- frameborder：是否显示边框(0：隐藏，1：显示)
- scrolling：滚动条显示设置(yes、no、auto)
- name：标识该窗口的名字，可以用于a标签的打开目标地址
分帧(frameset)
- 说明：替代body定义网页框架，而且可以自己指定比例或尺寸
- frameset：
- rows：垂直方向的内容划分，可以指定像素，也可以使用百分比，*表示其他
- cols：水平方向的内容划分，使用方法同rows
- noresize：禁止拖拽，修改比例
- frameborder：是否显示每一帧的边框
- border：设置边框的宽度
- bordercolor：设置边框颜色
- frame：frameset中的每一帧，也就是一个页面
- noframes：针对不支持frameset的低级浏览器的兼容设置
表单(form)(非常重要)
- 说明：收集用户信息，如：登录、注册等场景
- form：表示表单，所有要提交的数据都必须放在该标签中
- action：提交地址
- method：提交方法，get、post
- get：提交的数据在URL中可见
- post：提交的数据在URL中不可见，用于登录、注册、上传文件等
- input：输入框，是表单中最重要的组成部分
- name：指定名字，否则数据无法提交(即使提交了也没有意义)
- value：文本框的内容，一般用在不能输入的类型中
- placeholder：占位内容，通常用于提示
- readonly：只读，设置后无法修改
- disabled：禁用状态
- size：设置尺寸(宽度)
- maxlength：限制最大输入字符个数
- type：可以有多种类型
- text：普通文本，默认
- password：密文文本
- submit：提交按钮
- radio：单选框，多个关联选项name属性要一致，需要设置value，默认选中checked
- checkbox：复选框，多个关联选项name属性要一致，默认选中checked
- file：文件上传，需要进行配套设置，表单：
method="post"，enctype="multipart/form-data" - hidden：隐藏字段，该字段根普通字段一样，但是不会在页面上显示
- select：下拉选择框
- 属性name需要设置
- size：可以设置高度(选项个数)
- 每个选项都是一个option，必须指定value，默认选中使用属性selected
- textarea：文本域
- 说明：可以输入多行文本
- 属性：
- cols：列数(宽度)
- rows：行数(高度)
- 注意：不要在标签书写任何多余的内容
- 表单提交
<input type="submit" />，标准的提交按钮，甚至可以提交本按钮值<button></button>，标准按钮，可以用于提交，但是不能提交本按钮值<input type="button" />，长的像按钮，但是不能提交，可以结合JS使用
head标签
-
说明：一般存放一些对于网页进行说明的内容，不会显示在页面上。
-
示例：
标题：<title></title> 简化字符集设置：<meta charset="utf-8" /> 关键字：<meta name="keywords" content="" /> 网页描述：<meta name="description" content="" /> 标准字符集设置：<meta http-equiv="content-type" content="text/html;charset=utf-8"> 演示刷新跳转：<meta http-equiv="refresh" content="3; url=http://www.baidu.com"> 加载CSS文件：<link rel="stylesheet" type="text/css" href="css文件路径" />
无意义标签
- 说明：虽然这些标签没有特殊意义， 但是后面可以结合CSS和JS进行使用
- 常用：
div、header、footer、section、span
取消的DTD
- H5统一使用：
<!DOCTYPE html>
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
