八.Web基础
8.1B/S四部分
客户端、web、htttp协议、网页
web服务器：php语言对应apache，jsp语言对应tomcat,asp.net/asp对应iis,nodejs对应node.js，服务器需运行才能访问
http协议，request/response
web网页：结构（html）、样式（css）、行为（javascript）
8.2html
html介绍：超级文本呢标记语言
超文本：超越文本元素，包含图片视频、音乐、连接元素
w3c：规定web标准的一个组织
html学习的目的：标签的用途，标签在浏览器中的默认样式
html发展历史：html1.0,html2.0html3.0.html4.0,xhtml1.0,html5
xhtml:x指的时xml,语法规范更严谨，标准严格
xhtm语法规则：
1.标签与属性全部小写
2.标签必须闭合
3.属性=值，不能简写
4.标签的顺序要一致
后缀名：
html后缀;.html、.htm、.shtml（包含SSI技术，安全性高）和wendows系统有关，老板版本支支持3位后缀
html语法，属性理解
术语：元素、标签、属性
元素：指的时整体
标签：指的是标签名
属性：标签的一些属性
语义化L:
1.更容易被搜索引擎访问（seo）
2.更容易让屏幕阅读器读出网页内容
8.3html基本框架
dtd:文档类型定义
类型：S=Strict(严格型）、T=Translitional(过渡型）、F=Frameset(框架型)
<!DOCTYPE> #声明文档类型，作用是告诉浏览器用哪个标准来编译网页
<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
8.4html基本标签
双标签，单标签
,html4中有哪些标签，html5兼容性支持哪些标签
/:根目录，或是文件的上一级
../:当前文件的上一级
./:当前文件夹
IDE集成开发环境，用的什么工具
文本标签:
<p>p标签,段落标签</>
注意段落与段落行距大于段落内文字行距
<b>b标签，加粗</b>
<strong>strong标签,加粗，有加强语气，b标签呗淘汰</strong>
<i>i标签，倾斜</i>
<em>em标签，倾斜，有加强语气，i标签被淘汰</em>
<br/>换行标签，单标签
<hr/>下划线标签，下划线
<q><q标签，引用，浏览器自动加引号/q>
<blockquote>段引用</blockquote>
<pre>预标签，显示你写格式</pre>
<address>地址标签。自动生成地址格式，自动换行</address>
<img 属性有src='地址'使用相对地址，图片不显示的时候会使用alt='替换文本' title='标题'with="300px"height="200px">图片标签，单标签
<a href="地址"，target=""属性值有_blank,_self>a标签，超链接标签</a>
瞄点连接
1.定义锚点<a name='123'></a>
2.<a href="#123"></a> -->
功能性连接：
连接腾讯javascript:发qq，
邮件mailto:123456@qq.com
<div>块标签，就是一个容器，多个div自动换行</div>
<span>定义文档中的节，即结构</span>
列表标签
<ol>有序列表标签order list简写</ol>
<ol type=""属性值可以用A,1,a>水果
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ul>无序列表标签unorder list简写</ol>
<ul type="" 属性值默认为黑实体，circle空圆圈，square为实体正方形>水果
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<dl>自定义列表 define list简写</dl>
<dl>
<dt>计算机学院</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
表格
<table>表格标签</table>
<caption>表头</caption>
<tr>表格中的行</tr>
<th>表头单元格</th>
<td>标准单元格</td>
注意：th,td有rowspan="3"占行,colspan=“2”占列
<table border="1" height="100%" weight="100%" cellspacing="0"单元格间距 cellpadding="12"单元格内文字离框的距离>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标题标签 -->
<h1>标签一</h1>
<h2>标签二</h2>
<h3>标签三</h3>
<h4>标签四</h4>
<h5>标签五</h5>
<h6>标签六</h6>
<p>汉字是历史上最古老的文字之一。也是至今通行的世界上最古老的文字。
<b>世界上还没有任何一种文字像汉字这样经久不衰。 从甲骨文发展到今天的汉字，</b>
<i>已经有数千年的历史。文字的发展经过了甲骨文、金文、大篆、小篆、隶书、草书、楷书、</i>
行书等书体演变。<br>
<q>少小离家老大回，乡音无改鬓毛衰。儿童相见不相识，笑问客从何bai处来。</q>
<blockquote>少小离家老大回，乡音无改鬓毛衰。儿童相见不相识，笑问客从何bai处来。</blockquote>
<pre>
网
页
你
好
</pre>
<hr>
</p>
<p>汉字是历史上最古老的文字之一。也是至今通行的世界上最古老的文字。
<strong> 世界上还没有任何一种文字像汉字这样经久不衰。 从甲骨文发展到今天的汉字，</strong>
<em>已经有数千年的历史。文字的发展经过了甲骨文、金文、大篆、小篆、隶书、草书、楷书、</em>
行书等书体演变。
</p>
<p>
<address>
联系人：123
地址：<address> 资阳市</address>
</address>
</p>
<img src="地址" alt="替换文本" title='主题' height='300px' width="400px"><br>
<a href="www.baiu.com" target="_blank">百度</a>
<a href=""></a>
</body>
</html>
html5结构标签
<header>
<nav>导航标签</nav>
</header>
<section>
定义文档中的节，章节、页眉、页脚或文档中的其他部分。
</section>
<footer>
定义页脚
</footer>
<aside>
定义侧边块
</aside>
8.5html标签
1.图片标签
<img src="" alt=""/>
img标签是一个单标签，只有起始标签
src：图片的来源
alt:提示文本，当图片不在的时候，会用文本提示
width:设置图片宽度，单位像素，百分比
height:设置图片高度，单位像素，百分比
2.列表标签
有序列表
<ol type="" start="">
<li>
</li>
</ol>
有序列表
type属性值可以是:A,a,I,i,1;
start属性值可以是:数字如2
无序列表
type属性值可以是：circle(空心圆)，square(实心正方形)，disc(实心圆)
3.超链接标签
a标签
<a href="" name="" target="">
href:链接的地址
href:
name:链接的名字
target:页面打开方式
_blank在新窗口打开链接
_self在当前窗口打开链接
_top在层级窗口中打开链接
_father在父级窗口中打开链接
锚点链接：
<a href="#a" target="name">
跳转链接到，锚点a
</a>
<p id="a">
锚点a
</p>
锚点结合iframe标签使用，实现在当前页面打开网页
<a href="https://www.iqiyi.com/v_260uudpmizo.html?vfrm=pcw_home&vfrmblk=O&vfrmrst=" target="newwindow">第一集</a>
<iframe name="newwindow" frameborder="1" style="width: 100%;height: 800px;"></iframe>
4.标题标签
标题标签，从大到小h1-h6
<h1>标题标签</p>
5.水平分割线
hr标签
<hr>水平分割线</p>
6.文字标签化标签
加粗标签b标签，strong标签
<b>加粗，只是加粗</b>
<strong>加粗标签，有强调语气，语义化，方便阅读器感情朗读</strong>
<big>定义大号</big>
<em>倾斜标签，强调语气，语义化 </em>
<i>斜体标签</i>
<sub>定义下标</sub>
<sup>定义上标</sup>
<u>下划线</u>
<strick>删除线</strick>
<del> 定义删除字</del>
7.特殊字符
空格:
两个空格： 
小于:<
大于：>
&符号：&
双引号："
乘号：×
除号：÷o;
8.span标签
span标签
<span>文字容器标签,行内元素，不会自动换行</span>
9.段落标签
p标签,段落标签
<p>段落标签，用于文本段落，块级标签，可以自动换行</p>
10.单行代码标签
code标签
<code>a + b = c </code>
11.多行标签，预期标签
pre标签，用于直接显示预期的格式
<pre>
1
2
3
</pre>
12.音频、视频标签
audio音频标签
<audio scr="" controls autoplay>音频标签</audio>
src:音频链接地址
controls:显示控制台
autoplay:自动播放，此属性已经被禁用了
video音频标签
<video scr="" controls autoplay multed>音频标签</video>
src:音频链接地址
controls:显示控制台
autoplay:自动播放，此属性已经被禁用了
multed:静音效果
13.浮动框架
iframe标签，用于将另外一个网页嵌入到当前网页,与a标签的target属性连用合适
<iframe src="" frameborder="1" name="" width="" height=""></iframe>
src:打开的网页地址
frameborder:边框值只有0/1
name:用于和a标签的target对应
width:框架宽度
height:框架高度
14.路径问题
相对路径：
./当前路径
../上级目录，或者父级目录
绝对路径：
本地：d://imgs/img/a.jpg
服务器：/root/www/img/1.img
块级元素与行内元素特点：
块级元素特点：
1.块级元素，独占一行，多个块级元素会自动换下一行
2.块级元素可以用来布局页面
3.块级元素可以嵌套其他块级元素和行内元素，p，h标签有点特殊
行内元素特点：
1.行内元素不会自动换行，多个行内元素处于一行时，不会自动换行，只有一行占据满了才会换行
2.行内元素不能布局
3.行内元素不能嵌套块级元素，可以嵌套行内元素
8.6表格标签
table表格标签
<table border="1" width="100%" cellspacing="0" cellpading="10px">
border:边框属性
width:表格宽度
cellspacing:单元格间距
cellpadding:文字距单元格内部距离
caption表格的标题标签
<caption> 学习时间表</caption>
tr是表格的行标签，每行都有,里面可以加入行标题，或者单元格
<tr>
<th>行标题</th>
</tr>
th行标题标签，文字会加粗
<tr>
<th>行标题</th>
</tr>
td单元个标签
<tr colspan="" rowspan="">
<td>
单元格标签
</td>
</tr>
注意：rowspan指的是占据几行，当rowspan="2"时，就是指的占据两行，前一行单元格属性中加入rowspan="2"，下一行对应位置的单元格则删除
cowspan指的是占据几列，当cowspan="2"时，就是指的占据几列，当前行的第一个元素写入cowspan="3",右边的则删除
<thead><tbody><tfoot>语义标签，html会自动添加
例子
<table border="1" width="100%" cellspacing="0" cellpading="10px">
<caption>
学习时间表
</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>历史</td>
<td>政治</td>
<td rowspan="3">休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>历史</td>
<td>政治</td>
</tr>
<tr>
<td colspan="5">晚自习</td>
</tr>
</table>
8.7Form表单
1.form标签
form表单标签,双标签，input标签单标签
<form action="提交的网页地址" method="提交方法" name="名字
<input type="text" placeholder="提示文字">
</form>
action:提交的网页地址链接
method:提交方式，GET/POST
name:定义名字
2.文本输入标签
<input type="text" name="账号" placeholder="提示文本" size="10" value="15008128619">
3.文本密码输入框
<input type="password" name="密码" placeholder="提示文本" maxlength="12" value="246810">
4.range属性框
<input type="range" min="1" max="10">
5.表单提交
submit属性，用于登录、注册、提交、搜索
<input type="submit" name="login" value="登录">
6.表单重置按钮
<input type="reset" name="重置" value="重置">
7.单选
radio属性：
name值必须设置成一样，不然没法在一组
checked属性，默认选项
<input type="radio" name="sex" value="boy" checked>男孩
<input type="radio" name="sex" value="girl">女孩
8.label标签
label标签和单选一起使用，可以在选择文字的时候选择到
<label>
<input type="radio" name="sex" value="boy" checked>男
</label>
<label>
<input type="radio" name="sex" value="girl">女
</label>
9.多选
checkbox属性：
name值必须设置成一样，不然没法在一组
checked属性，默认选项
<label>
<input type="checkbox" name="course" value="english" checked>英语
</label>
<label>
<input type="checkbox" name="course" value="chinese">中文
</label>
<label>
<input type="checkbox" name="course" value="math">数学
</label>
<label>
<input type="checkbox" name="course" value="chemestry">化学
</label>
10.普通按钮
这个普通按钮不会重置，只有加了js才能实现重置
<input type="button" value="重置">
11.button标签
type属性：submit,button,reset,只有submit才有提交功能
<button type="submit" value="提交">
提交
</button>
<button type="button" value="按钮">
按钮
</button>
<button type="reset" value="重置">
重置
</button>
12.文件上传
type属性为file时注意
1.form mehod属性为POST
2.entype加密方式:multipart/form-data
<form action="提交地址" method="POST" enctype="multipart/form-data">
<input type="file" name="photo">
</form>
13.select列表标签
下拉列表中的特殊属性
option中的selected：默认选中属性
selection中的multed:多选，按住ctrl+选中多个
<select name="edu" id="edu">
<option value="1">博士</option>
<option value="2" selected>专科</option>
<option value="3">本科</option>
<option value="4">高中</option>
</select>
14.文本域
textarea标签
需要设置：cols属性，rows属性
<textarea name="名称" id="id名称" cols="30" rows="30">
</textarea>
15.几个特属性
reaonly:只读属性
required:必须填写
disabled：禁止属性
16.图片按钮
<input type="image" src="路径">
17.其他标签
1.输入eamil
required：必须填写属性
邮箱： <input type="email" name="email" placeholder="请输入邮箱" required>
2.输入url
required：必须填写属性
url： <input type="url" name="url" placeholder="请输入url" required>
3.输入tel
required：必须填写属性
tel： <input type="tel" name="tel" placeholder="请输入电话号码" required>
4.日期
<input type="date" name="日期">
5.颜色
你喜欢的颜色<input type="color" name="颜色">
18.分组标签
legend和fieldset标签
<fieldset>
<legend>
个人信息：
</legend>
姓名：<input type="text" name="姓名" placeholder="输入姓名">
年龄：<input type="text" name="年龄" placeholder="输入年龄">
学历：<input type="text" name="学历" placeholder="输入学历">
</fieldset>
8.8html其他语义标签
1.多级标签，加强语气
<hgroup>
<h1>
标题1
</h1>
<h2>
标题2
</h2>
</hgroup>
2.header标签
3.artical文章标签，用于文章，可以布局用
4.aside侧边栏标签，artical标签外的可以用
5.section章节标签，章节标签，用于文档区域
6.footer脚部标签
7.blockquote引用标签，用于引用其他源的块应用
浙公网安备 33010602011771号