互联网通信模型

定义：两台经算计通过何种类型的软件进行通信。

C/S通信模型
Client Softwore：专用客户端软件
客户端软件是安装在客户端计算机的一种用于提供用户交互和发送服务器请求的一种软件，
帮助用户向指定的服务器发送请求，服务端计算机得到请求之后，分析请求资源，将请求
资源通过网络流返回给客户端，客户端进行解析和渲染。
特征
- 优点
  有效对服务器进行很好的保护
  有效分摊服务器的压力，不需要去考虑高并发。
- 缺点
  用户获得服务的成本非常高。
  用户培养成本高，更新相对于繁琐。
- 代表软件
  一般广泛用于个人娱乐市场、LOL、微信、钉钉
B/S通信模型：
Brower：浏览器。
主流浏览器：Edge、火狐、谷歌、safari、oper
文件类型：
- 静态资源文件
  事先要将文件准备好，然后部署在服务器中，当浏览器访问服务器时，服务器解析用户请求资源路径，然后返回指定静态文件。
- 动态资源文件
  动态生成的文件，其中文件中的数据是需要计算机语言经过编译和计算之后得到的，然后将文件返回。
特征
- 适用场景
  既可以在个人娱乐市场也可以广泛运用到企业级应用。
- 优点
  不会增加用户获得服务的成本
  维护特别方便
- 缺点
  不安全。
  需要考虑高并发。

HTML

全称：HyperText Markup Language

标签的分类

标签分为：

块级标签
独占一行
如h1-h6
行内标签
可以在同一行显示
如span
单标记
标记没有结束标记
如hr
双标记
标记有结束标记
如a

基本文件结构

<html>
    <head>
        <!-- 设置网页的字符集编码 -->
		<meta charset="utf-8" />
		<!-- 设置网页的关键字 -->
		<meta name="keywords" content="HTML+CSS前端零基础入门"/>
		<!-- 设置网页的描述 -->
		<meta name="description" content="此网站为您提供HTML+CSS前端自学，以及视频、图文教程..." />
		<!-- 每三秒钟自动刷新一次 -->
		<!-- <meta http-equiv="refresh" content="3"/> -->
		
		<!-- 设置3秒钟后自动跳转 -->
		<!-- <meta http-equiv="refresh" content="3;url='https://www.oschina.net'"/> -->
        
		<!-- 这是icon图 -->
		<link rel="shortcut icon" type="image/x-icon" href="https://static.oschina.net/new-osc/img/favicon.ico">
		
		<!-- 设置网页标题 -->
		<title>我的第一个网页</title>
    </head>
    <body>
        <h1>
            标题标签
        </h1>
        <p>
            段落标签
        </p>
    </body>
</html>

说明：
	1.html
		必须要有，他是根标记。
	2.head
		网页的头部资源。【网页元数据】，其中标签的内容是影响整个网页的。
		1.网页的标题
		2.网页的字符编码
		3.网页的关键字和网页的描述以及作者
		4.网页的刷新时间。
		等等。
	3.body
		网页中所有可以显示在页面的都在body中设置。

注意：
	浏览器对于HTML标签的解析是没有报错的。
	浏览器解析时，遇到不认识标签，会将标签中的内容，以正常内容显示。

链接

链接是可以从一个页面跳转到另一个页面实现页面直接的导航。
提交服务器，产生服务器事件。
触发网页本地事件。
发送email
做锚点【同一网页的链接】
图片链接

语法：
	<a>  </a>
href="url"
    比如:<a href="../index.html">链接到index.html</a>
    ../：上一级目录

target：在哪里打开新的页面
    _self：在当前窗口打开【默认】
    _blank：在新窗口打开

<!-- 1. 在当前窗口打开百度。 -->
<a href="https://www.baidu.com" target="_self">百度</a>

<!-- 2.提交服务器，产生服务器事件。 -->
<a href="stuListlimit.action?stuCode=dfjsakf-2323-jkjfk&name=张三">删除</a>

<!-- 3.触发网页本地事件。 -->
<!-- javascript:; ：告诉链接，此链接是一个功能性链接。 -->
<a href="javascript:;" onclick="alert('你点击我干嘛？')">点击</a>

<!-- 4.发送email -->
<a href="mailto:ykdong@foxmail.com">联系我们</a>

<!-- 5.做锚点【同一网页的链接】 -->
<a name="top"></a>
<div style="height: 20000px;"></div>    //此处作用：将页面撑大
<a href="#top">回到顶端</a>

<!-- 6.图片链接 -->
<a href="../index.html">
    <img src="../img/0.jpg" >
</a>

图片标签

语法：
	<img />
属性：
	src：图片的地址【任意】
	title：图片的标题
	alt：图片加载失败的描述
	width：宽度
	height：高度

1 2	例子： <img src="https://pengyirui.gitee.io/img/avatar.png" title="这是我的头像" alt="葫芦" width="500px" height="500px"/>

表格

基本表格：
语法：
	<table>				：表格
		<caption></caption> 表格的标题
		<tr>			：行
			<td></td>	：列
			<td></td>
			<td></td>
		</tr>
	</table>

属性：
	border：表格的边框
	width：% px
	cellpadding：数据与单元格之间的距离
	cellspacing：单元格与单元格之间的距离
	rowspan：合并单元格【合并行】
	colspan：合并单元格【合并列】
    align="center" 设置居中

高级标签（少用）
语法：
	<table>
		<thead>
			<th><th>
		</thead>
		<tbody>
			<tr>
				<td></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td></td>
			</tr>
		</tfoot>
	</table>
注意：
	<thead>和<tfoot>：只能出现一次
	<tbody>：可以出现多次

<table border="1" width="50%" cellpadding="0" cellspacing="0">
    <caption>学生管理系统</caption>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>身份证号码</td>
        <td>生日</td>
        <td>班级</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>阿克尚</td>
        <td>20</td>
        <td>男</td>
        <td>3420524852252</td>
        <td>2019-01-01</td>
        <td>开发班</td>
        <td>
            &nbsp;<a href="xxx.php?stuCode=3420524852252" onclick="return confirm('确定删除吗？')">删除</a>
            &nbsp;|&nbsp;
            <a href="#">更新</a>
        </td>
    </tr>
    <tr>
        <td>蒙多</td>
        <td>22</td>
        <td>男</td>
        <td>48915218415</td>
        <td>2021-09-09</td>
        <td>开发班</td>
        <td>
            &nbsp;<a href="#" onclick="confirm('确定删除吗？')">删除</a>
            &nbsp;|&nbsp;
            <a href="#">更新</a>
        </td>
    </tr>
</table>

表单

用于与用户进行交互，收集用户数据信息。
标签：
1.<form>
属性：
	action：服务器的提交地址
	method：服务器提交方式 get	post
	enctype：文件提交类型

2.<input />
属性：
	1.type：
	取值：
		1.text：文本框【默认】
		2.password：密码框
		3.radio：单选
		4.checkbox：多选
		5.file：文件上传
		6.hidden：隐藏域
		7.reset：重置
		8.submit：提交
		9.button：普通按钮
		
		--HTML5提供【了解】
		1.tel：不支持PC端，只支持移动端
		2.email：邮件验证
		3.color：颜色拾取器
		4.number：数字选取
		5.date：日期插件
		6.datetime：日期插件
		7.range：数字选择器
		
	2.placeholder：提示信息
	3.maxlength：最大填写字符量
	4.value：设置当前输入框的默认值
	5.disabled：数据限制，不可修改和提交，只能看
	6.readonly：数据限制，不可修改。
	7.pattern：数据校验
	8.checked：单选与多选的默认选择
	9.name：设置与后台服务器交互时服务器获取的哪一个标签的值。
	
	
	
3.<select>
下拉列表
属性：
	name：选取的具体数据
	<option>
	属性：
		value：用户选择的数据的具体值
		selected：默认选中
4.<textarea>
多行文本
	rows：行数
	cols：列数

<form action="xxx.php" method="#" enctype="multipart/form-data">
    <input type="hidden" name="username" value="f4d60ddb-2fe2-425b-994e-ed9f95b12d70"/>
    账号：<input type="text" placeholder="请输入用户名" />
    <input type="text" placeholder="请输入用户名" required maxlength="8" value="ykdong@foxmail.com" pattern="\d{6}"/>
    <span>账号最小6个，最多8个</span>
    </br>
    密码：<input type="password" placeholder="请输入密码"/></br>
    性别：
    男<input type="radio" name="sex" checked value="male"/>
    女<input type="radio" name="sex" value="female"/>
    保密<input type="radio" name="sex" value="secret"/></br>
    爱好：
    看书<input type="checkbox" name="book" value="看书" checked/>
    工作<input type="checkbox" name="work" value="工作"/>
    健身<input type="checkbox" checked disabled value="sport"/><br/>
    出生日期：<input type="date" /><br/>
    联系方式：<input type="tel" /><br/>
    权限：<input type="number" min="2"  max="10" step="2" start="2"/><br/>
    颜色：<input type="color" /><br/>
    email:<input type="email" /><br/>
    <input type="image" src='https://pengyirui.gitee.io/img/avatar.png'" /><br/>
    <input type="range" min="10" max="20"/><br/>
    
    
    
    学历：
    <select name="">
        <option value ="">--请选择--</option>
        <option value ="">胎教</option>
        <option value ="" selected>幼儿园</option>
        <option value ="">学前班</option>
        <option value ="">小学</option>
        <option value ="">初中</option>
        <option value ="">高中</option>
        <option value ="">大学</option>
        <option value ="">研究生</option>
        <option value ="">博士</option>
        <option value ="">博士后</option>
    </select>
    <br/>
    头像：<input type="file" />
    <br/>
    自我介绍：<textarea rows="8" cols="100"></textarea>
    
    <input type="reset" value="重置" />
    <input type="submit" value="提交"/>
    <input type="button" value="点击"/>
</form>

列表

无序列表【使用率较高】
语法：
	<ul>			
		<li></li>
	</ul>
有序列表
	<ol>			
		<li></li>
	</ol>

定义列表【极少用到】
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>

内嵌框架

专门用于将众多的.html文件整合在一个文件中，形成一个网页效果。
语法：
	<iframe></iframe>
属性：
	src：要嵌入到网页的文件路径
	width：宽度
	height：高度
	frameborder：边框
	scrolling：鼠标滚轮 取值：no

1 2	<!-- 把left.html引入到此处 --> <iframe src="left.html" width="100px" scrolling="no" height="800px" frameborder="0"></iframe>

文本标签

h1-h6:标题标签  块级标签
p：段落		    块级标签
span:文本内容   行内标签
sub:下标
sup:上标
del：删除线

i：斜体
b：加粗
strong：加粗
ins：下划线
small：小字体
big：大字体
bdo：文本方向
abbr：文本描述

<h1>标题标签，块级标记</h1>
<p>你</p><p>好</p>
Iphone13 pro max 不要<del>8888</del> 也不要<del>888</del> 只需要<span style="color: red; font-size: 34px; font-weight: bold;">98元</span>，就可以带回家
<br/>
水的分子表达式是：H<sub>2</sub>O<br/>
2的3次方等于:2<sup>3</sup>=8
<hr/>
welcome <i>to</i> GuangZhou...<br/>
welcome <span style="font-style: italic;">to</span> GuangZhou...<br/>

welcome <b>to</b> GuangZhou...<br/>
welcome <span style="font-weight:bold ;">to</span> GuangZhou...<br/>
welcome <strong>to</strong> GuangZhou...<br/>


<ins>下划线</ins><br/>
<span style="text-decoration: underline">下划线</span><br/>

<small>小小小</small><br/>
<big>大大大</big><br/>
<bdo dir="rtl">welcome to china</bdo><br/>

<abbr title="这里的文字可以隐藏">这段文字的背后你看不见</abbr>

多媒体

用于加载视频、声音文件的标签。

# 视频
<video></video>
属性：
	autoplay：自动播放
	controls：控制台
	loop：循环播放

# 声音
<audio></audio>

1	<video src="../video/movie.mp4" width="320" height="240" controls autoplay loop></video>

了解

<!-- 文章、段落标签 -->
<article>
    <header>标题</header>
    <section>
        第一段
    </section>
    <section>
        第二段
    </section>
    <footer>脚注</footer>
</article>
<hr/>

<!-- 图片结构标签 -->
<figure>
    <figcaption>Logo标识</figcaption>
    <img src="../img/0.jpg" />
</figure>
<hr/>

<!-- 导航结构标签 -->
<nav style="width: 100px;height: 200px; border: 1px solid red; margin-left: 200px;">
    <ul>
        <li>网页</li>
        <li>资讯</li>
        <li>视频</li>
        <li>贴吧</li>
        <li>音乐</li>
        <li>游戏</li>
    </ul>
</nav>


<!-- 语义化标签： -->

<!-- mark：重点突出的内容 -->
welcome <mark>to</mark> HTML
<br/>

<!-- time：时间搜索标签 -->
我在<time datetime="2019-2-14">情人节</time>有个约会
<br/>

<!-- details和summary -->
<!-- 会有个小三角折叠 -->
<details>
    <summary>HTML简介</summary>
    <p>HTML是一门超文本标记语言</p>
    <p>HTML可以包含文本、视频、音频、图片、文字等等数据。</p>
</details>
<hr/>

<!-- meter：计数仪，标识度量单位 -->
<meter max="100" min="1" value="12" high="41" low="20"></meter>
<hr/>

<!-- progress：进度条 -->
<progress value="60" max="100"></progress>

CSS

全称：cascading style sheets
如果把html比作一个人，那css就是人的衣服

由选择器、属性、属性值组成

选择器：
选择器是用来定义CSS样式名称，每种选择器都有各自的写法。
属性：
修改网页中元素样式的根本。
属性值：
所有属性都需要一个或者多个属性来确定标签在修改样式中的表现。

引入CSS的方式

在页面中引入CSS样式有3中方式：
/* 1.内部样式（html中） */
<style type="text/css">
        p{
            color: red;
        }
</style>

/* 2.内联样式（html文件的标签中） */
	<body style="background-color: #ccc;">
		<p>你好CSS</p>
		<span>账号可以使用</span>
		<span>账号不可以使用</span>
	</body>

/* 3.外部引入样式（把css文件引入到html中）*/
<link rel="stylesheet" type="text/css" href="../css/oa_regist_style.css"/>

选择器

概念
在对网页中的元素进行样式修改的时候，首先要找到要修改的标签，CSS选择器就是用来寻找指定的标签的。
用于过滤网页中相同名称或者相同位置的标签。

选择器的分类

基本选择器
- 元素选择器
- id选择器
- 类选择器
属性选择器
层次选择器、后代选择器
派生/分组/集体选择器
伪类选择器

元素选择器

使用HTML标签作为选择器的名称。
例如：div{}就是用来选取整个网页中的div标签

/* 例：p标签的字体为红字，ul采用默认风格，链接取消下划线。 */
p{
	color: red;
}
ul{
	list-style: none;
}

a{
	text-decoration: none;
	color: black;
}

id选择器

通过给标签设置一个ID来选择唯一的标签。
建议：id唯一

/* 语法：
#id{
	属性：属性值;
} */

/* 例子：将id为s1的文字修改颜色 */
/* css */
<style type="text/css">
#s1{
    color: #008000;
}
</style>

/* html */
<body>
	<span id="s1">welcome to china</span>
</body>

类选择器

有些元素的元素名不相同，但是拥有相同的样式，
我们就可以使用类选择器进行样式的设置。

语法：
.class{
	属性:属性值;        
}

/* 例子：将class为c1的字体修改为18个像素 */
/* css */
<style type="text/css">
    .c1{
        font-size: 18px;
    }
</style>

/* html */
<body>
    <p class="c1">《关于讨论双减政策下，大学生家教是否可行》</p>
    <span class="c1">没有教师资格证的学生，不允许私下家教</span>
</body>

属性选择器

可以根据元素怒的属性和属性值来原则元素

根据指定的属性名来找元素

语法：
元素名[属性名]{}

/* 例子： */
<style type="text/css">
    p[hello]{
        color: #FF0000;
        font-size: 18px;
    }
</style>

<body>
    <p hello="happy">自定义属性的元素</p>
    <p world="happy">普通的p元素</p>
</body>

根据指定属性和属性值来找元素

语法：
元素名[属性名="属性值"]{}


/* 例子 */
<style type="text/css">
    p[hello="self"]{
        color: #FF0000;
        font-size: 18px;
    }
    p[hello="happy"]{
        text-decoration: underline;
    }
</style>


<body>
        <p hello="self">自定义属性的元素</p>
        <p hello="happy">值为happy</p>
</body>

根据属性值中包含指定的词汇查找元素【类似模糊匹配】
注意！匹配的不是字符，而是词汇，词汇之间是以空格分开。

<style type="text/css">
    p[title~=s]{
        color: #008000;
    }
</style>

<body>
    <p title="dongyukun handsome s">帅气的p标签</p>
</body>

根据属性值中包含指定的词汇开头的元素【开头精确匹配】
注意！匹配的是开头的单词，多个单词之间用"-" 分开。

<style type="text/css">
    p[hello|=d]{
            color: #FF0000;
    }
</style>
<body>
    <p hello="d-dongyk-happy">我是p标签的内容</p>
</body>

根据属性值中包含指定的词汇开头的元素【开头模糊匹配】
注意！匹配的是开头的字符。

<style type="text/css">
    p[hello ^= a]{
            color: #FF0000;
    }
</style>

<body>
    <p hello="a_bc">我是p标签的内容</p>
</body>

按照指定字符结尾的元素
注意！匹配的是结尾的字符

<style type="text/css">
    p[class $= test]{
        color: red;
    }
</style>

<body>
    <p class="firstedtest">普通的p元素</p>
</body>

匹配属性值中包含指定值的元素
注意！在属性值中全局匹配指定的值。

<style type="text/css">
    p[class *= t]{
        color: red;
    }
</style>

/* 以下全匹配 */
<body>
    <p class="firsttestabcfa">第一个p元素</p>
    <p class="test_first">第二个p元素</p>
    <p class="second_test">第三个p元素</p>
    <p class="test_second">第四个p元素</p>
</body>

层次选择器

又名后代选择器
专门用于查找嵌套的html元素

子元素选择器

语法：
div a{属性名:属性值}
只要a在div中，就可以找到

<style type="text/css">
div a{
    text-decoration: none;
}
</style>

<body>
    <div>
        <p>
            <a href="#">百度</a>
        </p>
        <a href="#">新浪</a>
    </div>
</body>

直接子元素选择器

  语法：
  div > a{属性名:属性值}
  只查找div下面a元素

   <style type="text/css">
       div > a{
           text-decoration: none;
       }
   </style>

  	<body>
	<div>
		<p>
			<a href="#">百度</a>
		</p>
		<a href="#">新浪</a>
	</div>
</body>

相邻兄弟选择器（第一个同级元素

  语法：
  	h1 + p{属性名:属性值}
  只查找指定元素下面的   第一个同级元素   。

   <style type="text/css">
       h1 + p{
           color: red;
       }
   </style>

  	<body>
	<p>这是h1上的p标签中的文字</p>
	<h1>这h1标签中的文字</h1>
	<p>这是h1下的p标签中的文字</p>
	<p>这是h1下下的p标签中的文字</p>
	<p>这是h1下下的p标签中的文字</p>
</body>

相邻兄弟选择器（所有同级元素

  语法：
  	h1 ~ p{属性名:属性值}
  只查找指定元素下面的    所有同级元素    。

   <style type="text/css">
       h1 ~ p{
           color: red;
       }
   </style>

  	<body>
	<p>这是h1上的p标签中的文字</p>
	<h1>这h1标签中的文字</h1>
	<p>这是h1下的p标签中的文字</p>
	<p>这是h1下下的p标签中的文字</p>
	<p>这是h1下下的p标签中的文字</p>
	<span>这是h1下面的span元素</span>
</body>

派生/分组/集体选择器

将不同元素但是同一样式的标签聚合在一起。
无法一一列举

大致语法：
#content > #t1,form[action='#'] > input,.app,img{
	
}

5.伪类选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。
伪类用冒号来表示。

a:hover{color: lightblue;}/* 鼠标滑过的样式 */
a:link{color: red;} /* 未访问的样式 */
a:visited{color: blue;} /* 已访问的样式 */
a:active{color: yellow;}/*已选中的样式*/

选择器的优先级

内联样式 > 内部样式 > 外部样式
(最接近html的优先生效)

!important：强制使用，会将选择器的优先级去除，有限使用它修饰的样式。

<link rel="stylesheet" type="text/css" href="../css/oa_regist_style.css"/>

<style type="text/css">
    p{
        font-size: 20px;
    }
    @import url("../css/oa_regist_style.css");
</style>

<body>
    <p style="color: #FF0000;">这是一个普通的p标签</p>
</body>

/* 最后生效的是import导入后的样式 */

常用的CSS属性

字体样式（font

p{
    font: italic bold 30px "微软雅黑";
    /* italic：斜体
    bold：加粗 */
}

背景样式（background

div{
    width: 1500px;
    height: 1500px;
    background: #ccc url(../img/0.jpg) no-repeat right top;

        /* 
        repeat：平铺（默认
        no-repeat; 不平铺
        repeat-x;  横向平铺
        repeat-y;  纵向平铺
        fixed：固定背景图片
        inherit：继承于父标签的方式
        top、bottom、left、right：图片定位 */
}

文本样式

1.color：文本颜色
2.line-height：行高
3.text-aligin：居中【左右居中】
    
4.text-indet：文字的留白
5.text-decoration：
    取值：
        line-through：贯穿线
        underline：下划线
        overline：上划线
6.text-transform：
    取值：
        uppercase：大写
        lowercase：小写
7.letter-sapcing：字符之间的间距
8.word-spacing：单词之间的间距
    按照空格来区分是否是一个单词。

列表属性

<!-- 
list-style-image：列表图片
list-style：列表样式一般设置none，表示没有前面的点
list-style-type：列表样式类型 
-->

ul{
    list-style: none;
    list-style-type: oriya;
    list-style-image: url(../img/0.jpg);
}

表格属性

1
2
3

单元格与单元格之间的间距
border-collapse: collapse;（边与边合并）
                ：separate;（不合并）

盒子模型

盒子模型就是在网页设计中经常用到的一种思维模式。
即：内容、边框、边界，为节点的一个容器思想。
将众多不同元素放置在容器中，让对容器进行定位。


属性：
margin：外边距
边框与边框之间的距离，两个容器之间的距离

padding：内边距
内容与边框的距离，内边距会增加容器的宽度或者高度

浮动（float

可以使块级元素在同一行显示。
float:
取值：
	left：左边浮动
	right：右边浮动
本质是：使当前浮动元素脱离正常文档流
正常文档流是按照左上布局，按照顺序放置元素。

clear：清除浮动
取值：both
消除浮动所带来的影响。
元素浮动之后原有的位置会空置出来，默认会让其它元素占用。
清除浮动就是为了不让其它元素使用空出来的位置。

定位（position

position：定位属性
取值：
	static：默认，按照正常文档流显示元素
	relative：相对定位，相对于元素当前的位置进行定位
	absolute：绝对定位，相对于第一个已经定位的父元素定位，如果没有父元素，就相对于body定位。
	fixed：固定定位。（类似广告，一直固定在某个地方）
	sticky：粘贴定位 （类似excel的窗口冻结）

display

隐藏和显示元素以及将块级元素变为行内元素，
也可以将行内元素变为块级元素。
属性：
	display
取值：
	none：隐藏元素
	block：显示元素
	inline-block：将行内标记变成块级标记
	inline：将块级标签变为行内标签

BootStrap

用于快速开发web应用程序和网站的前端框架。基于HTML、CSS、JS【Jquery】的

https://v3.bootcss.com

https://www.bootcss.com/

https://www.runoob.com/bootstrap/bootstrap-tutorial.html

学习链接

菜鸟教程：https://www.runoob.com/html/html5-intro.html
W3：https://www.w3school.com.cn
MDN WebDocs：https://developer.mozilla.org/zh-CN/docs/Web