day01
一.网页三剑客（css,html,javascript）
概述
- html:主要应用网页的内容和结构，网页的东西都是有html完成的。
- css:修饰html，使页面展示不同的效果，主要定义网页的外观样式。
- javascript:使页面能够动起来，实现与用户交互的功能。主要定义网页的行为和动作。
框架结构
主要有两种结构 ：
1.c/s结构：即客户端服务器结构，常见应用，王者荣耀，qq。
2.b/s结构：即浏览器服务器模式，常见应用，贪狼玩月。
资源分类：静态资源和动态资源
- 静态资源：服务器不更新。
- 动态资源：服务器更新。
1 学习html
什么是html
html是一种超文本标记语言，是一种标识性的语言，它使网上的各种资源形成一个整体，将不同位置的资源随机的连接起来，构成一个逻辑链，让人们查找更加的方便。
HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称。
html的语法
- 文件的后缀是html或者htm.
- 标签不区分大小写.
- 标签分为键值对和无键值对.
html的标签
文本标签
-
标题标签
标题标签是放在body里面的，基本我们就是用到h1到h6.
键值对形式<h1>标签</h2> -
段落标签
键值对形式<p>我是段落标签</p>
有属性名 align 默认靠左 center right left -
换行标签
<br/> -
分割线标签
<hr/> -
加粗标签
<b><b/> 和<strong></strong> -
斜体标签
<em></em> <i><i/> -
上标标签 下标标签
<sub></sub> <sup></sup> -
字体格式化标签
<font></fomt> -
居中标签
<center></center>
多媒体标签
- 图片标签
<img src=”” width=”” height=”” alt=”” title=”” /> - 音频标签
<audio controls loop muted autoplay>
<source src="./vedio/德玛西亚.mp3">
</audio>
controls ：控制面板 loop： 播放循环 muted ：静音播放
- 视频标签
<body>
<!-- 视频标签 -->
<video autoplay controls loop muted height="300px" width="530px">
<source src="./vedio/燕子.mp4">
</video>
</body>
controls ：控制面板 loop： 播放循环 muted ：静音播放 height:高度
width：宽度
注：不管高度宽度如何调，播放时候视频的比例是不变的。
列表标签
无序标签 <ul> </ul>有types属性 disc 实心圆、square 方块 、circle 空心圆三种(默认type=“disc”)
有序标签 <ol></ol> 有type属性 A、a 、I 、i 、1 五种（默认type=“1”)
列表项 <li></li> 是ul和ol的子标签
<body>
<!-- 无序列表 -->
<ul type="circle">
<li>苍老师</li>
<li>波波老师</li>
<li>小泽老师</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>苍老师</li>
<li>波波老师</li>
<li>小泽老师</li>
</ol>
</body>
超链接标签
<a href="目标地址" target="_blank"> </a>
href:跳转目标的地址。
target:打开方式
1._blank重新打开一个页面。
2._self 在本页面打开（默认）
表格标签
- 标签名
table 父标签 相当于表格的容器
tr 子标签 定义行 写在table里面
td 子标签 定义列 写在 tr里面
th 子标签 表格的列标题 ：加粗，居中，写在tr里面
caption 写在table里面 和tr同级 - 属性名
border 表格变宽的宽度 ，粗细
width 表格的宽度 可以给table th td 不能给tr设置
height 表格的高度 可以给 table th td tr 设置
align 可以给table td tr 设置 他们的对齐方式 center left right
bgcolor 背景颜色，可以设置给table、tr、th、td bordercolor，可以改变表格边框及单元格分割线的颜色
rowspan 合并行 rowspan=“2” 然后去掉下一行
colspan 合并列 colspan=“5” 然后去掉下一列
cellspancing 单元格之间的空白
cellpadding 字体与边框之间的空白
thead 标签定义表格的表头
tbody 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容
tfoot 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
<body>
<table border="1px" width="500px" height="200px" cellspacing="0px" cellpadding="0px" align="center">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>个人简介</th>
</tr>
<tr align="center">
<td>1001</td>
<td>柳岩</td>
<td>女</td>
<td>我大, 我骄傲</td>
</tr>
<tr align="center">
<td>1002</td>
<td>刘涛</td>
<td>女</td>
<td rowspan="2">我是一名演员</td>
</tr>
<tr align="center">
<td>1003</td>
<td>宝强</td>
<td>男</td>
</tr>
<tr align="center">
<td>1004</td>
<td colspan="2">张艺兴</td>
<td>小绵羊</td>
</tr>
</table>
</body>
表单标签
表单主要的作用是接受用户输入的信息，当用户输入信息时，浏览器将用户输入的信息打包发给服务器，从而实现与web浏览器的交互。
表单是控件的容器，一个表单由from，表单控件和表单按钮组成。
- action 指向数据提交的路径，提交的服务器地址
- method 数据提交的方式 ，常用值 get post
- enctype 规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式。1.
application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2.
multipart/form-data:指定传输数据为二进制类型，比如图片，mp3，文件。3.
text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。
输入域标签
input属性
| 属性名 | 属性说明 |
|---|---|
| id | 为当前组件提供一个唯一的标识 |
| type | 定义表单输入项input的组件类型 详见下一个表格type属性值说明 |
| name | 为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据，只要这个数据要进行提交，name属性必须设置！ |
| value | 为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on |
| checked | 设置单选框/复选框的默认选中状态（全选、反选） |
| readonly | 设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交 |
| disabled | 设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交 |
| size | 组件的长度 |
| maxlength | 设置允许输入的最大的长度 |
| placeholder | 输入框的提示信息，占位符，用于提示用户输入的规则、规范 |
input-type属性值说明
| 属性值 | 说明 |
|---|---|
| text | 文本框(默认)，单行的输入字段，用户可在其中输入纯文本。 |
| password | 密码框。 内容为非明文 |
| radio | 单选框。 必须将其设置为同一组(name的名字必须相同) |
| checkbox | 复选框。 必须将其设置为同一组(name的名字必须相同) |
| file | 附件框、文件选取。用于文件上传。 |
| hidden | 隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。 |
| submit | 提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性 将按钮起一个名字 |
| reset | 重置按钮。 用于将所有的 表单输入项恢复到 默认状态 |
| image | 图形提交按钮 |
| button | 普通按钮。 需要和JavaScript事件一起用 |
<body>
<!--输入域标签-->
<form action="index.html" method="get">
<p>
用户名:<input type="text" id="username" name="username" placeholder="请输入用户名" value="liuyan" size="20" disabled="disabled">
</p>
<p>
密码:<input type="password" name="password" maxlength="8" placeholder="请输入密码">
</p>
<p>性别:
<!--性别:要求性别是互斥的效果 必须是同一组-->
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</p>
<p>
爱好:
<input type="checkbox" name="hobby" value="cy" checked="checked" /> 抽烟
<input type="checkbox" name="hobby" value="hj" checked="checked" /> 喝酒
<input type="checkbox" name="hobby" value="tt" /> 烫头
<input type="checkbox" name="hobby" value="bd" /> 蹦迪
</p>
<p>
上传头像:<input type="file" name="picture">
</p>
<input type="hidden" name="method" value="findStudentBySid" />
<p>
邮箱:<input type="email" name="email" />
</p>
<p>
出生日期:<input type="date" name="birthday" />
</p>
<p>
<input type="submit" value="注册" />
<input type="reset" value="重置按钮" />
<input type="button" value="普通按钮" />
</p>
<p>
<input type="image" src="./img/liuyan.jpg" width="200px" height="120px" />
</p>
</form>
</body>
下拉标签
提供一个下拉列表框，让用户进行选择。 <select>
| 属性值 | 说明 |
|---|---|
| name | 下拉列表框的名字，数据提交的关键字，设置给select标签 |
| value | 下拉选择框选中的值，设置给option标签，如果想让某一个option默认选中，使用selected属性！ |
| multiple | multiple 属性规定输入字段可选择多个值，设置给select标签 |
<body>
<form action="#" method="get">
<!--下拉框-->
<select name="city" multiple="multiple">
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz" selected="selected">广州</option>
</select>
<p>
<input type="submit" value="提交" />
</p>
</form>
</body>
文本域标签
HTML提供了多行输入的文本控件：<textarea>
| 属性值 | 说明 |
|---|---|
| cols | 设置文本域的列数，横向空间不够，自动换行 |
| rows | 设置文本域的行数，纵向空间不够，出现纵向滚动条 |
<body>
<form action="#" method="get">
<!--多行文本域-->
<textarea name="xs" rows="10" cols="60">优就业是中公教育IT培训平台APP。优就业业务类型主要包括面授培训、网络远程教学培训、网络直播课程培训、IT类图书出版等。</textarea>
<p>
<input type="submit" value="提交" />
</p>
</form>
</body>
按钮标签
<button>标签定义一个按钮。- 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
- <button>控件 与<input type="button">相比，提供了更为强大的功能和更丰富的内容。
- <button> 与 </button>
标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
<body>
<!-- button按钮 -->
<button>按钮</button>
</body>
html框架标签
写法格式:
<frameset></frameset>
- 框架标签标签是在本页面内用多窗口将多个页面整合在一起的一个框架集。每一个页面都是独立的，需要用子标签来确定页面的位置。
<frameset>通过行和列控制整体布局，用cols确定列数，用rows确定行数。 - 特别注意事项:
<frameset>标签与<body>标签不能同时共存 框架子标签<frame>
<frame>标签是<frameset>标签的子标签, 用于页面引入.
| 属性名 | 属性说明 |
|---|---|
| src | 指定页面的路径 |
| noresize | 框架分割后禁止调整 |
| name | 该框架的名称用于和a标签target连用 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="15%, *">
<frame src="top.html" noresize="noresize" />
<frameset cols="15%, *">
<frame src="left.html" noresize="noresize" />
<frame src="right.html" name="abc">
</frameset>
</frameset>
</html>
实体字符
- 有些字符，像(<)这类的，对HTML来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符。
- 字符实体语法结构：&实体名称;常见的实体字符有：空格： 小于符号：< 大于符号：> 双引号：" 版权符号：©
DIV和span标签
- DIV是一个块级元素, 默认没有任何样式, 需要配合CSS一起使用才能发挥作用,用div+css可以制作出精美的网页;
- 扩展: 介绍一个行内标签: span
- DIV是一个块级元素, 它包含的元素会自动换行, 单独占一行;
- Span是一个行内元素, 它包含的元素不会自动换行, 有多少内容就占多少空间;
HTML5新特性
什么是 HTML5？
- HTML5 是最新的 HTML 标准。
- HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
- HTML5 拥有新的语义、图形以及多媒体元素。
- HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
- HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
- 为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 语义标签，多媒体内容，更好的页面结构，更好的形式处理等
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
