day01
C/S和B/S架构
- C/S架构：客户端服务器模式
- client:客户端
- server:服务器
- B/S架构：浏览器服务器模式
- browser:浏览器
- server：服务器
web工作原理
-
浏览器=》服务器：发送请求，取得相应的数据，或者叫提交请求
-
服务器=》浏览器：响应请求，服务器接收到请求，并进行解析处理，然后返回这个数据
-
页面的组成部分：html, css, javascript
开发工具
- 编辑工具：notepad++， pycharm, Hbuilder(咱们选择的编辑工具)
- 测试工具：google chrom, 火狐
HTML简介
-
说明：HTML是 hyper Text markup language 超文本标记语言
-
后缀：.html 或者.htm，现在你统一使用.html
-
标签：是html页基本组成部分。
-
格式：属性值统一使用双引号
<标签名 属性1=“值1” 属性2=“值2” ...> 标签内容</标签名 双边标签 <标签名 属性1=“值1” 属性2=“值2” .../> -
t特点：
- 双边标签（系统提供好的，是必须记住的）必须是成对出现的,单边标签都是自己加上/
- 标签的容错性相当强，有的时候写错了，也可以在浏览器中执行
- 所有的标签都是已经定义好了的，不能自己造标签,不能随意使用
- 标签名不区分大小写，但是建议统一使用小写
-
q全局架构标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全局架构标签</title>
</head>
<body>
真正显示的内容
<marquee>呵呵哒</marquee>
</body>
</html>
-
说明：
标签 说明 html html文档中最大的标签，所有的内容都要放在这个里面 head 头部标签，通常放显示之外的内容，用于对页面的额说明等 body 身体，存放页面显示的内容 meta 设置字符集，在head标签里面 title 设置标题的，在head标签里面 -
几乎每一个标签都有一些公共的属性
- name, class,id,style
- 后面会学习和css和 js一起使用
常用标签（修饰文本的）
-
标题：h1-h6,字体从大到小，仅仅是为了调整字体大小的
-
加粗：
-
斜体：
-
下划线：
-
删除线：
-
标注：上标注,下标注
-
字体：,size,设置字体大小的，color,设置字体颜色 的，face,字体的类型
常用标签（格式控制）
-
换行:
<br />无论有多少个连续的空格，浏览器都会解析成一个空格 -
滚动屏幕:
marquee -
段落：
<p></p>(使用的最多) -
原样输出标签：
<pre></pre>浏览器显示的与你文档中写 的一样 -
无序列表：
<ul></ul>,中都有一个简单<li></li>他们都有一个type属性- type:square(实心的方块) circle（空心的圆）disc(实心的圆)
-
有序列表：
<ol></ol>中都有一个简单的<li></li>- type:1,a,A,i,I
- start:起始的序号
作业：去查p标签的属性
字符实体
-
说明：在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
-
提醒：不用刻意去记这些，需要的时候查询一下即可
-
示例：
空格 < 小于号 > 大于号 & &
url（非常重要）
- 说明：统一资源定位符，是(URI统一资源标识符)的一种，可以定位一个网络资源
- 组成：
协议：//主机:端口/文件?参数1=值1&参数2=值2- 示例：
<https://www.baidu.com/s?ie=utf-8&f=8>
- 示例：
超链接
-
标签：
<a></a> -
说明：可以进行页面的跳转
-
属性：
属性 说明 href 指定跳转的地址 title 光标放上去以后有一个提示信息 target m目标页面打开的方式 属性值 _self _blank _top _parent -
锚点：对页面进行定位的
多媒体标签
-
图片标签：
<img/>非常重要属性 说明 src z指定资源的地址 title 光标放上去显示的信息，资源链接失败的时候，会显示信息 width 设置图片的宽度 height 设置图片的高度 -
音频标签：
<audio></audio>属性 说明 src 指定资源路径 controls 是否显示播放条 loop 是否进行循环播放 autoplay 设置自动播放 - 谷歌浏览器自动播放设置
- 在地址栏中输入：chrome：//flags
- autoplay policy：改为 no user guster is required
- 谷歌浏览器自动播放设置
-
视频标签：
<video></video>属性 说明 和audio标签一模一样
day02
表格（table）
-
说明：展示效果类似于excle表格的
-
table表格标签，所有表格相关的标签都要放在这个标签里面属性 说明 width 宽度 height 高度 align 对齐方式 bgcololr 背景颜色 border 边框 bordercolor 边框的颜色 -
tr:表格中的一行数据属性 说明 bgcolor 背景色 align 水平对齐方式（默认的左对齐） center right valign 垂直对齐方式（top）（middle默认）（bottom） -
td:一行中的一列，就是一个单元格属性 说明 bgcolor 背景色 align 水平对齐方式 valign 垂直方向上对齐方式 rowspan h行合并 colspan 列合并 -
th:与td一样，都是表示一个单元格，样式有所不同，用于表示表头信息 -
caption:表格标题，说明表格的作用
分帧（几乎被弃用）（jquery loader）后台管理
-
说明：一个页面包含另外一个页面
-
标签
iframe属性 说明 src 指定加载的页面的url width 宽度 height 高度 scrolling 滚动条的显示方式，yes显示滚动条，no不显示滚动条，auto自动 frameboreder 是否显示边框，0,代表隐藏，1代表显示 name 窗口的名字，可以作为a标签打开的一种方式
分帧（frameset）
-
说明：替代了body定义页面的框架，可以指定尺寸，也可以指定比例
-
frameset属性
属性 说明 noresize 禁止拖拽 frameborder 是否显示边框，0 代表隐藏， 1代表显示 border 设置边框的宽度 bordercolor s设置边框的颜色 rows 垂直方向上面进行划分尺寸，可以使用像素，也可以使用百分比 cols 水平方向上面进行划分 noframes:针对于不支持frameset的浏览器的时候使用
表单（form）
-
说明：服务器在搜集用户信息的时候才使用表单，比如登录，注册等
-
form表单，所有要提交的数据必须放在其中属性 说明 method 提交的方法，get是默认的，数据会在url里面进行拼接，post数据是不可见的 action 提交的地址 -
input组成表单的重要的部分 -
属性
-
属性 说明 type 类型（后面会专门把type属性列出来单独讲） name 名称，不写的话，提交的数据是无意义的数据（很重要） size s设置尺寸 maxlength 输入最大字符的个数 value 文本框中的内容 placeholder 设置占位的提示信息 readonly 只读 disabled 禁用状态 -
input下面属性 type 属性值
type取值 说明 text 普通的文本 password 密文文本 submit 提交按钮 hidden 隐藏字段，便于携带隐藏信息 radio 单选框，多个互斥选项，name属性要一致，提交的时候要通过value值指定，checked默认选中哪一个 checkbox 复选框，同上 number 数值类型的文本框，可以进行加1减1的操作，min,max file 用于上传文件 image 图片形式的提交按钮 -
select下拉选择框- 说明：他是一个组合的提交内容，select有一个name属性
- 选项：每一个选项都是option，需要设置value属性
- 选中：可以去设置selected的一个属性
- 尺寸：通过size属性进行尺寸大小的设
-
textarea文本域，用于多行输入 -
表单提交相关的
按钮 说明 submit 标准的提交按钮 image 图片形式的提交按钮 type=“button” 这个要配合以后的js一起使用 和submit一样
head
-
说明：用于存放对页面进行说明的内容，不会显示在页面上面
<html> <head> <!-- 设置字符集 --> <meta charset="UTF-8"> <!-- 设置标题 --> <title>千锋教育-坚持教育初心，坚持面授品质，IT培训良心品牌</title> <!-- 设置页面的关键字 --> <meta name="keywords" content="Java培训,JavaEE培训,HTML5培训,h5培训,H5培训,PHP培训,Python培训,人工智能培训,UI培训,Linux培训,大数据培训,云计算培训,unity游戏开发培训,软件测试培训,WEB前端培训,嵌入式物联网培训,IT培训,千锋,千锋教育" /> <!-- 页面设置的描述 --> <meta name="description" content="千锋教育_中国IT职业教育良心品牌,专注Java培训,JavaEE培训,PHP培训,HTML5+WEB前端培训,Python+人工智能培训,Linux云计算培训,全链路UI培训,大数据培训,unity游戏开发,软件测试,嵌入式物联网培训,并提供Java培训视频,PHP培训视频,Linux培训视频,HTML5培训视频,软件测试培训视频,嵌入式物联网培训视频等12大学科培训视频,千锋教育长期坚持用“良心做教育”,提供一流IT培训服务." /> <!-- 设置字符集完整的写法 --> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <!-- 页面可以自动刷新 --> <meta http-equiv="refresh" content="3; url=http://www.baidu.com" /> <!-- --> <link rel="stylesheet" type="text/css" href="xxx.css"/> </head> </html>
无意义标签
- 行标签：
- 快标签：div,header,section,footer
- 这5个标签没有任何意义，只有和css和js一块使用的时候才有生命
取消的DTD
-
说明：文档定义类型
-
H5：统一写成
https://blog.csdn.net/weixin_41179709/article/details/82822317
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
