Web前段介绍
Web前段介绍
一、什么是网页
网页是基于浏览器的应用程序，是数据展示的载体。
二、网页的组成
1. 浏览器
代替用户向服务器发请求
接收并解析数据展示给用户
2. 服务器
存储数据
处理并响应请求
3. 协议
规范数据在传输过程中的打包方式
三、开发前的准备
1. 运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
2. 调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
3. 开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、PyCharm等）
HTML语法介绍
一、HTML介绍
超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容。
二、标签
标签也称为标记或元素，用于在网页中标记内容
1. 语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
2. 分类：
双标签：成对出现，包含开始标签和结束标签。例：<html></html>
单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：<br><br/>
3.标签属性：
标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。
由属性名和属性值组成，属性值使用双引号表示。例：<meta charset="utf-8">
同一个标签中可以添加若干组标签属性，使用空格间隔。例：<img src="lily.jpg" width="200px" height="200px">
三、使用
1. 创建网页文件，使用.html或.htm作为文件后缀
2. 添加网页的基本结构
<html>
<head>
<title>网页标题</title>
<meta charset="utf-8">
</head>
<body>
网页主体内容
</body>
</html>
3. 标签嵌套：在双标签中书写其他标签，称为标签嵌套；
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素；
- 平级结构互为兄弟元素；
4. HTML语法规范
标签名不区分大小写，建议使用小写
注释语法： 快捷键Ctrl+/ <!-- 此处为注释 -->
常用标签介绍
一、基本结构解析
快捷键：!+table
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
<head>
<!-- 设置网页标题，显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->
二、body中常用标签
1.文本标签
标题标签：自带加粗效果，从h1到h6字体大小逐级递减
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签：<p>段落文本</p>
普通文本标签：
<span>行分区标签，用于对特殊文本特殊处理</span>
<b>加粗标签</b>
<strong>强调标签，效果同b标签</strong>
<label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>
<i>斜体标签</i>
<u>删除线标签</u>
格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
<br>
水平线标签，在页面中插入一条水平分割线
<hr>
字符实体：
某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
例：
- 使用 < 在页面中呈现 "<"
- 使用 > 在页面中呈现 ">" （<学习pthong> #<学习python>）
- 使用 在页面中呈现一个空格
- 使用 © 在页面中呈现版权符号"©"
- 使用 ¥ 在页面中呈现人民币符号"￥"
容器标签：常用于页面结构划分，结合CSS实现网页布局
<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>
2.图片与超链接标签
图片标签 ：
<img src="">：用于在网页中插入一张图片。
- 属性 src 用于给出图片的URL，必填。
- 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
- 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
- 属性 alt 用于设置图片加载失败后的提示文本
语法：
<img src="" width="" height="" title="" alt="">
<img src="northStar.jpg" width="500px" title="northStar" alt="此处为图片">
超链接标签：用户可以点击超链接实现跳转至其他页面
1. 属性 href 用于设置目标文件的URL，必填。
2. 属性 target用于设置目标文件的打开方式，默认("\_self")在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
<!--刷新-->
<a href="">链接地址为空</a>
<!--'#'表示锚点连接，链接至指定文件的指定位置-->
<a href="#">链接地址为#</a>
<!--跳转2号位置-->
<a href="05_anchor.html#two" target="_blank">2号位置</a>
<!--阻止默认跳转，既不刷新也不跳转-->
<a href="javascript:void(0)">阻止默认的跳转行为</a>
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--目录超链接-->
<a href="#one">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="#last">5</a>
<!--添加锚点-->
<a name="one"></a>
<h1 style="height:300px;background:green;">１.超链接</h1>
<h1 style="height:300px;background:green;">２.超链接</h1>
<h1 style="height:300px;background:green;">３.超链接</h1>
<h1 style="height:300px;background:green;">４.超链接</h1>
<a name="last"></a>
<h1 style="height:300px;background:green;">５.超链接</h1>
<!--鼠标点1或者点5会跳转到1或者5的位置-->
三、常用结构标签
1.列表标签
有序列表（ordered list） 取值"1"/"a"/"A"/"i"/"I",
默认使用阿拉伯数字标识每条数据
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>
无序列表（unordered list） ul中可取：circle/square（实心方块）/none(取消项目符号)
默认使用实心圆点标识列表项
<ul>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ul>
列表嵌套：在已有列表中嵌套添加另一个列表，常见于下拉菜单
<ol>
<li>
西游记
<ul>
<li>孙悟空</li>
<li>孙悟空</li>
<li>孙悟空</li>
</ul>
</li>
</ol>
<ol type="i">
<li>老王</li>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ul>
<!--父子嵌套实现下拉菜单-->
<li>
老李
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ul>
</li>
<li>老张</li>
</ol>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ul>
2.表格标签
表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下
<!-- 创建表格标签 -->
<table>
<!-- 创建行标签 -->
<tr>
<!-- 行中创建单元格以显示数据 -->
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
</tr>
<tr>
<!--th表示单元格，自带文本加粗和居中效果-->
<th>迪丽热巴</td>
<th>20</td>
<th>002</td>
</tr>
</table>
单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整
| 单元格属性 | 作用 | 取值 |
| colspan | 跨列合并单元格 | 无单位数值 |
| rowspan | 跨行合并单元格 | 无单位数值 |
行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px">
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
<table border="1px" width="300px" height="300px">
<!--表格内部结构划分（行分组）：
将若干行划分为表头，表尾和表格主体，
默认所有的行都会被自动加入表格主体中（tbody）
-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">总人数：</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>老王</td>
<td>35</td>
<td>001</td>
</tr>
<tr>
<td>老李</td>
<td>35</td>
<td>001</td>
</tr>
</tbody>
</table>
3.表单标签
表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。
表单使用<form></form>
例如：
<form action="" method="" enctype="">
<!--此处为表单控件-->
</form>
| 属性名 | 取值 |
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式，默认为get方式，可以设置post |
| enctype | 设置数据的编码，射击二进制数据提交（例如图片，文件，音频等），必须设置数据的提交方式为post，编码类型为"multipart/form-data" |
表单控件使用（重点）
表单控件用于采集用户信息，可设置以下标签属性
| 属性名 | 取值 |
| type | 设置控件类型 |
| name | 设置控件名称，最终与值一并发给服务器 |
| value | 设置控件的值 |
| placeholder | 设置输入框中的提示文本 |
| maxlength | 设置输入框中可输入的最大字符数 |
| checked | 设置单选按钮或复选按钮的默认选中 |
| selected | 设置下拉菜单的默认选中 |
<body>
<!--网页表单-->
<!--form负责提交数据给服务器.标签属性:
action指定数据的提交地址
method指定数据的提交方式,默认为get
enctype指定数据的编码方式,默认转换字符串,
拼接在URL后面(urlencoded),
如果涉及二进制数据(图片,音视频等),必须设置提交方式为post,
同时指定编码类型为multipart/form-data-->
<form action="/login" method="get" enctype="application/x-www-form-urlencoded">
<!--表单控件-->
<p>
用户姓名:<input type="text" name="username" placeholder="用户名由数字和字母组成" maxlength="10">
</p>
<p>
用户密码:<input type="password" name="userpwd" placeholder="请输入密码">
</p>
<p>
用户性别:
<!--一组按钮的控件名称必须保持一致-->
<!--checked默认选中-->
<input type="radio" name="gender" value="boy" checked="checked">男
<input type="radio" name="gender" value="girl">女
</p>
<p>
兴趣爱好:
<!--label for id 实现文本与控件的绑定,
将label标签的属性for取值为对应控件的id值:
1.使用label标签表示文本
2.为相应控件添加id标识
3.label与控件绑定:for属性值与id属性值保持一致-->
<input type="checkbox" name="hobby" value="smoke" checked id="smoke">
<label for="smoke">抽烟</label>
<input type="checkbox" name="hobby" value="masage" id="masage">
<label for="masage">保健</label>
</p>
<!--隐藏域(了解):将一些服务器端需要,
但是用户不需要了解的数据提交过去,对用户不可见-->
<input type="hidden" name="uid" value="001">
<!--下拉菜单-->
<select name="city" id="">
<!--默认选中第一个option,可以手动设置selected表示选中-->
<option value="beijing">北京</option>
<option value="shangshai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen" selected>深圳</option>
</select>
<!--文件选择框:涉及二进制数据提交,必须使用post方式,
同时设置编码类型为multipart/form-data-->
用户头像:<input type="file" name="uimg">
<p>
<!--功能按钮-->
<!--1.提交按钮,点击时提交数据到后台,
可以设置value属性,表示按钮的显示文本-->
<input type="submit" value="注册">
<!--2.重置按钮,点击时将表单还原至初始状态-->
<input type="reset" value="重填">
<!--3.普通按钮,需要自定义点击处理-->
<input type="button" value="点击">
<!--button标签表示按钮,标签内容即为按钮显示文本
书写在form中,相当于submit提交按钮;
书写在表单外,相当于普通按钮,需要自定义点击操作-->
</p>
<button>form内</button>
</form>
<button>form外</button>
</body>
