Get的点
Web的简单了解
HTML最常用的功能介绍及演示
web概念概述
- Web标准构成
构成 : 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面.- 结构 : 结构用于对网页元素进行整理和分类,
- 表现 : 表现用于设置网页元素的版式,颜色,大小等外观样式.
- 行为 : 行为是指网页模型的定义及交互的编写.
- JavaWeb:
- 使用Java语言基于互联网开发的项目
- 软件架构:
- C/S: Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序,在远程有一个服务器
- 如 QQ,英雄联盟…
- 优点:
1.用户体验性好 - 缺点:
1.开发,安装,部署,维护都比较麻烦
- B/S: Browser/Server 客户端/服务器端
- 只需要一个浏览器,用户通过不同的网址(URL)访问不同的服务器端程序
- 优点:
1.开发,安装,部署,维护 简单 - 缺点:
1.如果应用过大,用户的体验可能会受到影响
2.对硬件要求比较高否则容易产生延迟等问题
- C/S: Client/Server 客户端/服务器端
- B/S架构详解
- 资源类型
-
静态资源:
- 使用静态网页技术发布的资源
- 特点:
- 所有的用户得到的内容是一样的
- 包括图片,视频,文本 HTML CSS JavaScript等,服务器直接把内容反馈给浏览器,浏览器负责对内容进行解析，然后展现给用户。
-
动态资源:
- 特点:
- 所有的用户得到的内容可能是不一样的
- 如jsp/servlet,php,asp等
- 请求的动态资源会先转换成静态资源,然后再让浏览器进行解析.
- 特点:
-
我们要学习动态资源,必须先学习静态资源
-
静态网页技术三剑客
1）HTML: 用于搭建基础网页,展示网页内容
2）CSS: 美化页面,进行页面布局
3）JavaScript: 控制页面中的元素,使页面具有动态效果
HTML
-
概念: 最基础的网页开发技术
- HTML:Hyper Text Markdown Language 超文本标记语言
- 超文本: 通过超链接等形式,把不同空间的文字信息合并在一起的网状文本
- 标记语言: 由标签构成的语言,不同于编程语言
- HTML:Hyper Text Markdown Language 超文本标记语言
-
快速入门
- 语法
- html的后缀名:
.html,或是.htm - 标签分为:
- 围堵标签(双标签):有开始标签和结束标签,例如
<html>< /html> - 自闭合标签(单标签):开始标签和结束标签在一起,例如:
<br/>
- 围堵标签(双标签):有开始标签和结束标签,例如
- 标签可以嵌套但不能你中有我我中有你
- 在开始标签中可以定义属性,标签名和属性,属性和属性之间用空格隔开,属性由键值对构成,需要用单引号(或是双引号)引起来
- html的标签不区分大小写,但是强烈建议使用小写
- html的后缀名:
- 语法
-
HTML标签关系
-
嵌套关系
<head> <title></title> </head> -
并列关系
<head></head> <body></body>
-
-
标签学习
-
文件标签: 构成HTML最基本的标签
-
<html></html>: html文档的根标签 -
<head></head>: 头标签.用于指定html的一些属性.引入外部的资源 -
<title></title>: 标题标签 -
<body></body>: 体标签 -
<!DOCTYPE html>:html5中声明是html的标签<!-- 声明此文档类型是html5--> <!DOCTYPE html> <!-- lang : 指定html语言种类--> <html lang="en"> <head> <!-- 编码格式--> <meta charset="UTF-8"> <title>hello HTML!</title> </head> <body> Nobody Nobody But True You! </body> </html>
-
-
文本标签: 和文字有关的标签
- 注释标签:
<!-- --> - 标题标签:
<hx>x可以是1-6<hx>会自动换行 - 换行标签:
<br /> - 段落标签:
<p>文本内容</p> - 显示一条水平线:
<hr /> - 字体加粗标签:
<b></b> 或者<strong></strong>语义更强烈 - 字体倾斜标签:
<i></i>或者<em></em>推荐后者 - 字体删除标签:
<s></s>或者<del></del>推荐后者 - 下划线标签 :
<u></u>或者<ins></ins>推荐后者
- 注释标签:
-
<img src="图像url" />图片标签- 属性
src:把指定路径下的图片显示 - alt: 图片不能显示,就显示事先设置的文字.
- title : 鼠标悬停时显示的文本提示.
- 相对路径 :
./指当前目录../上一级目录../../上上一级
- 属性
-
列表标签
-
概念 : 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表
-
整齐,整洁,有序,跟表格类似,可组合自由度很高
-
有序标签:
- 列表内容自带顺序
<ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> -
无序标签:
<ul></ul>中只能嵌套<li></li><li>与</li>之间相当于一个容器,可以容纳所有元素,什么链接,图片都可以- 样式属性不用管,css来搞定.
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> -
自定义列表
- 自定义列表对名词或术语进行描述或解释.模板如下
<dl> <dt>动物</dt> <dd>猫</dd> <dd>狗</dd> <dd>鱼</dd> </dl>
-
-
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>- href 必需属性,
- target : _self和_blank分别指在当前页面打开和新开一个页面打开,默认_self
- 内部链接 : href=“路径+页面名称”
- 外部链接 : href=“网站地址”
- 空连接 : href="#"
- 图像链接 :
<a href="链接地址"><img src="图片地址"></a>
-
<div>和<span>标签: 前者包裹的内容会自动换行,后者会在一行显示 -
语义化标签
- 所谓标签语义化,就是指标签的含义…在合适的地方给一个最为合理的标签,让结构更为清晰.
-
三个表
- 表格 : 表格用来显示数据,可以让数据显示整齐规范.
- 表单 : 表单用来收集用户信息.
- 列表: 列表用来布局,列表可以使布局整齐规范.
-
表格标签
-
<table></table>: 定义表格- width:宽度
- height:高度
- border: 边框
- cellpadding: 定义单元格内容和单元格边框的距离
- cellspacing: 定义单元格与单元格边框之间的空白间距,如果指定为0,则显示为一条线
- bgcolor: 背景颜色
- align: 对齐方式
-
<tr></tr>: 定义行 -
<td></td>: 定义单元格,没有表示列的标签 -
<th></th>: 定义表头单元格,会让单元格里边的内容居中并且加粗显示 -
<caption>: 表格标题<table border="1" height="300" width="980" align="center" cellspacing="0" cellpadding="30"> <caption> <h2>毒药排行榜</h2> </caption> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>在线玩家</th> <th>最近七日</th> <th>下载链接</th> </tr> <tr> <td>1</td> <td>王者毒药</td> <td> <img src="./images/up.jpg" width="30"> </td> <td>8000万</td> <td>10亿</td> <td> <a href="#">Window软件中心</a> <a href="#">iOS软件中心</a> <a href="#">盗版软件中心</a> </td> </tr> <tr> <td>2</td> <td>联盟毒药</td> <td> <img src="./images/down.jpg" width="40"> </td> <td>7000万</td> <td>9亿</td> <td> <a href="#">Window软件中心</a> <a href="#">iOS软件中心</a> <a href="#">盗版软件中心</a> </td> </tr> <tr> <td>3</td> <td>单身毒药</td> <td> <img src="./images/up.jpg" width="30"> </td> <td>5000万</td> <td>2亿</td> <td> <a href="#">Window软件中心</a> <a href="#">iOS软件中心</a> <a href="#">盗版软件中心</a> </td> </tr> </table> -
<thead>: 表格的头部分,应用于比较复杂的表格 -
<tbody>: 表格的体部分,应用于比较复杂的表格 -
<tfoot>: 表格的脚部分,应用于比较复杂的表格 -
<cospan>: 占几列 -
<rowspan>: 占几行- 先确定跨行还是跨列合并
- 查找目标单元格,并遵循先上后下,先左后右的原则.紧接着确定合并单元格的个数
- 删除多余的单元格
<table border="1" height="300" width="980" align="center" cellspacing="0" cellpadding="30"> <caption> <h2>个人简历</h2> </caption> <tr> <td>马德华</td> <td>男</td> <td>18</td> <td rowspan="2">照片</td> </tr> <tr> <td>身高175</td> <td>汉族</td> <td>已婚</td> </tr> <tr> <td>个人作品展示</td> <td colspan="3">个人作品</td> </tr> <tr> <td>个人经历</td> <td colspan="3">个人简历</td> </tr> </table>
-
-
表单标签
- 三部分组成
- 表单控件,也被称为表单元素
- 提示信息
- 表单域
- 数据提交项标签:
<form>标签包裹的内容就是采集数据的范围- 需要知道的标签有action(内容要提交的URL)和method(主要包含post和get)
- get: 请求的参数会在地址栏体现出来,大小有限制且不太安全
- post: 请求的参数在地址栏不会体现出来,大小没有限制且较为安全
- 注意表单中的数据要被提交必须具备name属性,以此来区分不同的输入框.
- 需要知道的标签有action(内容要提交的URL)和method(主要包含post和get)
- 表单项标签
-
<input>:可以通过type属性,改变元素展示的样式- text: 默认是text,指文本输入框
- password: 密码输入框
- radio: 单选框,要实现多个选项具有单选的效果,name的属性值必须相同. 为了作为区分,需要添加value属性.同时使用checked表示默认选中
- checkbox: 复选框
- placeholder: 提示内容,当输入框中的内容修改后,提示内容自动清除
- label:label里边的for属性一般和id对应,如果使用啦,点击label区域会使输入框得到焦点
- file: 文件选择框
- hidden: 隐藏域:用于提交一些信息.
- submit: 提交按钮
- button: 就是一个按钮
- image: 图片提交按钮,点击可以提交表单
<form action="#" method="post"> <input type="hidden" value="只传数据,不显示" name="hid-data"/> <label> 用户名 : <input type="text" name="username" placeholder="请输入用户名" /> </label> <br/> <label for="password">密 码 : </label> <input type="password" id="password" name="password" placeholder="请输入密码" /><br/> 性 别 : 男<input type="radio" name="gender" /> 女<input type="radio" name="gender" /> 隐藏<input type="radio" name="gender" checked="checked" /><br/> 爱 好 : 抽烟<input type="checkbox" name="hobby" /> 喝酒<input type="checkbox" name="hobby" /> 烫头<input type="checkbox" name="hobby" /> 敲代码<input type="checkbox" name="hobby" checked="checked" /><br/> 上传文件 : <input type="file" value="请选择要上传的文件"><br/> <input type="button" value="获取验证码" /><br/> <input type="submit" value="提交所填" /><br/> <input type="reset" value="重置所有"><br/> <input type="image" src="images/btn(1).png"/><br/> </form>- color: 取色器,以%和255组合表示
- date: 年月日
- datetime-local: 年月日时分秒
- email: 邮箱
- number: 数字
-
<select>: 下拉列表
1. 和option以及name和value配合使用,实现下拉列表的作用,默认选中的属性是selected
2. 了解即可,实际开发很少用到志愿填报 : <select> <option>--请选择学校--</option> <option>兰州大学</option> <option>郑州大学</option> <option>福州大学</option> </select> <select> <option>--请选择专业--</option> <option>大数据</option> <option>人工智能</option> <option>云计算</option> </select> -
<textarea>: 文本域-
rows表示行, 实际开发中被css取代
-
cols表示每行中显示的字符数 ,实际开发中被css取代
<textarea rows="5" cols="20"> </textarea>
-
-
- 三部分组成
-
拓展阅读
- 锚点定位 : 通过创建锚点链接,用户能够快速定位到目标内容
- 创建锚点链接分为两步:
-
使用响应的id名称标注跳转目标的位置(找目标)
<h2 id="two">第二章</h2> -
使用
<a href="#id名">链接文本</a>创建连接的文本
-
- 创建锚点链接分为两步:
- base标签
- base可以设置整体链接的打开状态
- base写在
<head></head>之间 - 把所有的连接都默认添加target="_blank"
- pre标签
<pre>标签可定义预格式化的文本- 里边的文字,会按照我们书写的模式显示
- 特殊字符
: 代表一个空格<: 小于>: 大于©: 版权®: 注册商标
- 锚点定位 : 通过创建锚点链接,用户能够快速定位到目标内容
-
查文档
Q. 判断你是不是一个开发大佬的前提是?
A: 使用别人开发好的工具和查阅文档.
So : 文档地址,拿走不谢 :
1. 百度网盘链接 : https://pan.baidu.com/s/1NpbHMMRlotLehRzZOMPSZw
2. 提取码 : 7hjx
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
