【HTML】绝地求生

1.Lamp网站构建

1.1基础概念

1.1.1LAMP网站的构建

 - B/S 架构  【浏览器----服务器】,比如京东,淘宝,知乎
 - C/S 架构  【客户端----服务器】,比如微信,QQ,LOL

PHP属于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 ---每次增加多少 或者减少多少
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页