【HTML】绝地求生

1.Lamp网站构建

1.1基础概念

1.1.1LAMP网站的构建

 - B/S 架构  【浏览器----服务器】，比如京东，淘宝，知乎- C/S 架构  【客户端----服务器】，比如微信，QQ，LOLPHP属于B/S结构软件

1.1.2网站工作流程

- 请求 【浏览器发URL给服务器】 request
- 响应 【服务器发资源给浏览器】response

1.1.3统一资源定位符

URL

http://www.jd.com/list.html?c=user&a=del&uid=17

http/https ：传输协议【超文本传输协议& 安全版SSL传输协议】
www.jd.com : 域名【表示向哪个服务器发出资源请求】
/ ：网站根目录
list.html 【文件名，请求的具体内容】
？：后面跟的是参数【多个参数之间需要用&分隔，且实际工作中&两旁不能有空格】

端口

HTTP和HTTPS文本传输协议使用的端口号不一样。
服务器上有 65535个端口，其中：
HTTP使用的时80端口
HTTPS使用的是443端口 {SSL}

状态响应码

200---------成功
403---------拒绝
404---------没找到
500---------服务器内部错误

1.1.4动态网站

网站服务与数据库的结合，根据查询数据库所得到的网页不同。

动态网站架构

浏览器：用于解析网页代码显示屏幕上
CSS：修饰网页内容，大小，颜色，样式，位置
HTML：标记网页内都有什么内容
客户端脚本语言: 用户交互，页面特效
服务器：负责响应，把网页发给浏览器
服务器脚本语言：生成页面
数据库f’f’d’d’f: 存储数据

1.1.5开发平台 LAMP

Linux - apache - mysql - php 一种黄金炸鸡搭配

1.1.6超文本

HTTP: 超文本传输协议
HTML：超文本标记语言
PHP：超文本预处理器
浏览器：超文本解释器

1.1.6.1超文本传输协议

HTML - 超文本传输协议

超文本----超链接
标记----标签

浏览器会按照标签内容把文件渲染成网页。HTML不是编程语言，是一种标记语言
编码格式--------UTF-8无BOM格式编码

1.1.6.2HTML 主体结构

<!DOCTYPE html>    <!--  告诉浏览器用最新的HTML标准来解析该文档  -->
<html>             <!--     告知浏览器这是一个 HTML 文档--><head>         <!--  头部  告诉浏览器的内容    --><meta charset="utf-8" /><title>主体结构</title>    <!--定义网站的标题--></head><body>         <!--  身体   要让浏览者看到的内容放这里(比如文本、图像、颜色、图形等等)   --><!--     注释的作用: 1) 对代码的解释和说明2) 注释的代码不被执行3) 注释的内容不会显示在页面上--></body>
</html>

1.1.7字符集字符编码

字符：【一个文字一个标点就是字符】
字节：【B是字节】1kb=1024b; 1mb=1024kb; 1gb=1024mb; 1Tb=1024GB;1Pb=1024Tb;

HTML 概述

网页基础架构

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="description" content="网页内容介绍"/><meta name="keyswords" content="关键字"/><!-- 网站定时刷新--><meta http-equiv="refresh" content="5;url=http://www.baidu.com" ><title>网页title</title></head><body></body>
</html>

字符实体

&gt ----------- >
&lt ------------ <
&nbsp ---------空格

常用标签

标题标签

<h1></h1> ------大
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>-------小

文本格式化标签

<b></b> -------------加粗
<i></i>--------------斜体
<del></del>----------删除线
<strong></strong>-----强调，状态是加粗
<em></em>-------------强调，状态是斜体
<sup></sup>-----------上标字
<sub></sub>-----------下标字<hr />--------------- 换行
<big></big/>----------比正常字大一些
<small></small>-------比正常字小一些

计算机输出标签

<code></code>
<kbd></kbd>
<pre>- -- -   - -- -   - -   - -
</pre>

写文章术语标签

<bdo dir="rtl">cscsc</dbo>   <!-- 会从右到左显示 -->
<city></city> -----------引用名著
<abbr title="world wide web">WWW</abbr>
<q></q>------------标记短的引用

文本标签

<p></p> ---------段落之间默认，独占一行，一个段落之间含有默认的上下间距

列表

有序列表
<ol><li></li><li></li>
</ol>无序列表
<ul><li></li><li></li>
</ul>定义列表
<dl><dd></dd> -------- 需要定义列表中的每一项<dd></dd>
</dl>

超链接

<!-- 引用地址分为相对地址和绝对地址相对路径: 相对于引用文件本身去定位被引用的文件地址.  表示当前文件所在目录下      但在使用时也可以省略.. 表示当前文件所在目录下的上一级目录
-->
<!-- 绝对地址：相对于磁盘或者网站域名根目录的位置去定位文件的地址/ 代表服务器根目录, 网站上的页面都存在它下面 根据实际情况, 它会是系统中的某一个特定的文件夹
-->
<!-- 带参数传递, 同时把一些数据传递过去,这些数据称为参数
-->
<a href="htttp://www.baidu.com">点击一下</a>
<a href="./default.html">default</a>
<a href="../default.html">default</a>
<a href="./3.php?id=20"></a>

target属性

<a href="http://www.baidu.com" target="_blank">点击一下</a> -------- 新窗口打开
<a href="http://www.baidu.com" target="_self">点击一下</a> --------- 在当前窗口打开

锚点

<a name="one" >锚点</a>
<a href="#one" >跳转到锚点</a>

图像超链接

<a href="http://www.baidu.com"><img src="./images/a.jpg">
</a>

多媒体

<audio src="zoe.mp3"></audio>
<video src="zoe.mp4" autoplay controls loop ></video >
<embed src="fun.mp4" />

子窗口

<iframe src="./abc.html" name="test"></iframe>
<a href="地址" target="test">跳转</a>

<!--
水平对齐  align     left  center  right     左   中  右
垂直对齐  valign    top  middle  bottom     上   中  下
--><table><tr><th></th><th></th></tr><tr><td></td><td></td></tr>
</table>
<!--横向合并-->
<td colspan="2"></td>
<!--纵向合并-->
<td rowspan="2"></td>

表单

<form action="./x.php" method="get">账号：<input type="text" name="uname" value="cd" />密码：<input type="password" name="pass" value="cc"/>提交：<input type="sumit" value="submit" /></form>

action : 数据提交的位置
method：
- get: 提交后数据会在url里显示长度不宜过长
- post: 提交后，不会在在url 显示，相对安全

type='text'--------- 单行文本框type='password'--------密码框, 输入的内容会被星号或小圆点代替type='radio' -----------单选框type='checkbox' -----------多选框type='hidden'------------隐藏域type='file' ------------ 文件上传type='submit'------------提交按钮type='reset'------------重置按钮type='color' ------------ 可以选取颜色type='number'-----------单行输入框中只能输入数字type='range'-------数值范围的滑块type='date'---------点选日期控件

文本框

文本框： <input type="text" placeholder="姓名" required autofocus maxlength="3" size="8" />required --- 必填项目autofocus--- 光标闪烁disable----不能输入修改

单选框

单选框： <input type="radio" name="sex" valu
e="x" />女check----表示默认选中实现单选按钮就有被选中的感觉需要用到<label>
1.
<label><input type="radio" name="sex" value="w"/>女</label>
2.
<label for="one"></label>
<input type="radio" name="sex" value="w" id="one"/>女

多选框

城市：<select name="city"><option value="bj" >bj</option><option value="sh" >sh</option><option value="gz" >gz</option></select>

隐藏域

在页面上不显示
<input type="hidden" name="uid" value="17" />

文件上传

在表单里实现文件上传需要在表单定义里加上enctype="multipart/form-data"
<form action="./p.php" method="post" enctype="multipart/form-data"><input type="file" name="myface"/>
</form>

文本域

<textarea name="x" ></textarea>

提交按钮

<input type="submit" value="提交" />
<input type="image" src="./d.png" >

数字框

<input type="number" step="0.1" min="0" max="100" />step ---每次增加多少 或者减少多少