一、Web前端介绍
1. 什么是网页
网页是基于浏览器的应用程序,是数据展示的载体
2. 网页的组成
-
浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
-
-主流浏览器(根据浏览器的引擎和内核划分):划分为5大浏览器:chrome(谷歌)、IE/Edge(微软) Firefox(火狐) Opera (欧朋) Safari(苹果)
- -浏览器引擎:渲染引擎、js引擎
-
服务器
- 存储数据
- 接收请求处理并响应请求
web服务器:Apache、IIS、Nginx
-
协议
- 规范数据在传输过程中的打包方式
3. 开发前的准备
- 运行环境:浏览器,设置chrome为默认浏览器,作为网页文件的运行环境。
- 调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
- 开发工具:不限,选用个人习惯的即可。(Sublime、VSCode、EditPlus、PyCharm等)
二、 HTML语法介绍
1. HTML介绍
超文本标记语言(HyperText Markup Language)浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容
2. 标签
标签也称为标记或元素,用于在网页中标记内容
-
语法:标签使用< >为标志,标签名不区分大小写,推荐小写表示
-
分类:双标签(主动闭和标签):成对出现,包含开始标签和结束标签。例:<html></html>
单标签(自闭和标签):只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:
<br>或
<br/>
标签属性:
-
-
标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。
-
例:<meta charset="utf-8">
同一个标签中可以添加若干组标签属性,使用空格间隔。例:<img src="lily.jpg" width="200px" height="200px">
3. 使用
-
创建网页文件,使用.html或.htm作为文件后缀
-
添加网页的基本结构
-
标签嵌套
在双标签中书写其他标签,称为标签嵌套
-
嵌套结构中,外层元素称为父元素,内层元素称为子元素;
-
多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素
-
平级结构互为兄弟元素
-
-
HTML语法规范
- 标签名不区分大小写,建议使用小写
- 调控台使用Ctrl加+号放大,-号缩小
- html文件中可用!号+table键补全,创建html框架
- 字体单位em,默认像素px,1em=16px
三、常用标签介绍
-
1. 基本结构解析
<title>first</title> <!-- 小图标 、路径或者图片以.ico结尾的矢量图,类型图片 --> <link rel="shortcut icon" href="web.ico" type="image/x-icon"> <!--h标签--> <h1>H标签my first web 中国</h1> <!--段落标签,字体默认大小16px--> <p>段落标签</p> <!--普通文本标签,行内标签--> <span>普通文本标签</span> <lebal>普通文本标签</lebal> <!--带有格式的标签 --> <b>加粗标签</b> <strong>加粗标签strong</strong> <!--换行标签--> <br/> <!--水平线标签--> <hr> <!--斜体 了解--> <i>斜体italic</i> <s>删除线</s> <u>下划线标签underline</u> <span> x <sub>1</sub> y <sup>2</sup> </span>
2. body中常用标签
文本标签
标题标签:自带加粗效果,从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的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
例:
使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用 在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"¥"
容器标签:
常用于页面结构划分,结合CSS实现网页布局
<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>
图片与超链接标签
图片标签 :用于在网页中插入一张图片。
- 属性 src 用于给出图片的URL,必填。
- 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
- 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
- 属性 alt 用于设置图片加载失败后的提示文本
语法:
<img src="" width="" height="" title="" alt="">
属性:src=文件路径、width=更改宽度,height=更改高度,title设置图片标题,鼠标停在图片上时显示,alt设置图片加载失败时显示提示文本;
代码如下:
<img src="mm.jpg" width="300px" height="200px" title="mm" alt="美女图片加载失败了">
超链接标签:用户可以点击超链接实现跳转至其他页面
- 属性 href 用于设置目标文件的URL,必填。
- 属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="rongrong.jpg" target="_blank">rongrong</a>
<a href="">href=""</a> 点击后页面刷新
<a href="#">链接地址为#</a> 点击后url后加#,称之为锚点,指定文件的指定位置
<a href="javascript:void(0)">阻止默认的跳转行为
</a>点击不刷新不加#, 一般使用在轮播图,购物车加减操作
图片超链接代码如下:
<a href="https://www.baidu.com">
<img src="rongrong.jpg" alt="">
</a>
属性:href="链接地址",target="_blank"开辟一个新的窗口,不写则默认在当前窗口上更换。
状态:超链接文本页面上文本下方自带下划线,字体蓝色表示未被访问,访问过后字体颜色为紫色,清除缓存可使字体恢复为蓝色,鼠标按住文本文件不抬起字体显示红色,表示激活状态。
超链接使用锚点使用
以#为锚点:
实现:在指定位置添加锚点
本地页面
<a name="top"></a>打个锚点记号
<a href="#top">回到顶部</a> 锚点
跳转到另外一个页面的锚点
<a name="bottom"></a>要跳转的指定页面位置做标记
<a href="day01容器标签pm.html#bottom">底部</a>在当前页面添加链接以#加锚点的位置。
参考代码:
<!--目录超链接-->
<a href="#one">1</a> 点击1跳转到1的位置
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="#last">5</a>点击5跳转到5的位置
<!--指定位置添加锚点-->
<a name="one"></a> 空标签,没有显示价值,用户看不到
<h1 style="height:300px;background:green;">1.早年经历</h1>
<h1 style="height:300px;background:green;">2.早年经历</h1>
<h1 style="height:300px;background:green;">3.早年经历</h1>
<h1 style="height:300px;background:green;">4.早年经历</h1>
<a name="last"></a>
<h1 style="height:300px;background:green;">5.早年经历</h1>
<a href="05_anchor.html#last">5号位置</a>跳转到其他页面指定位置,先写文件后加#last
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--目录超链接--> <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;">1.早年经历</h1> <h1 style="height:300px;background:green;">2.早年经历</h1> <h1 style="height:300px;background:green;">3.早年经历</h1> <h1 style="height:300px;background:green;">4.早年经历</h1> <a name="last"></a> <h1 style="height:300px;background:green;">5.早年经历</h1> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--插入图片--> <img src="happy.gif" width="500px" title="happy" alt="此处为图片"> <img src="rongron.jpg" style=" 300px;height:300px" alt="此处为蓉蓉"> <!--超链接:通过点击跳转到指定的目标文件--> <a href="02_tag.html" target="_blank">淘宝</a> <a href="http://www.taobao.com">买买买</a> <a href=""> <img src="" alt=""> </a> <a href="">链接地址为空</a> <!--#表示锚点,链接至指定文件的指定位置--> <a href="#">链接地址为#</a> <a href="05_anchor.html#last">5号位置</a> <a href="javascript:void(0)">阻止默认的跳转行为</a> </body> </html>
3. 常用结构标签
列表标签
无序列表(ordered list)默认使用阿拉伯数字标识每条数据
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>
有序列表(unordered list) 默认使用实心圆点标识列表项
<ul>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ul>
代码:
<!--列表标签有序列表-->
ol>
<li>风清扬</li>
<li>独孤九剑</li>
<li>独孤求败,只求一败</li>
</ol>
<!--无序列表-->
<ul>
<li>风清扬</li>
<li>独孤九剑</li>
<li>独孤求败,只求一败</li>
</ul>
注意:有序列表开头以阿拉伯数字作为标识,可以更改显示属性,type更改显示表头,从哪个位置开始用start方法,方法如<ol type="A" start="2">,有1,a,A,i,I等
无序的可以使用none,circle空心圆,square(实心方块)
列表嵌套
在已有列表中嵌套添加另一个列表,常见于下拉菜单,使用父子关系
<ol>
<li>
西游记
<ul>
<li>孙悟空</li>
<li>孙悟空</li>
<li>孙悟空</li>
</ul>
</li>
</ol>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--有序列表 ol中可以添加type属性设置项目符号, 取值"1"/"a"/"A"/"i"/"I", ul中可取:circle/square(实心方块)/none(取消项目符号)--> <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> </body> </html>
表格标签
表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下
<!-- 创建表格标签 -->此种表格没有线框
<table border="5px" cellspacing="0px" cellpadding="20px" width="500px" height="500px" bgcolor="red">
<!-- 创建行标签 -->
<tr bgcolor="yellow" align="left" valign="bottom">
<!-- 行中创建单元格以显示数据 -->
<th>姓名</th> th标签有加粗居中效果
<td>年龄</td>
<td>班级</td>
</tr>
<tr>
<td>迪丽热巴</td>
<td>20</td>
<td>002</td>
</tr>
</table>
- 其中table属性中border:表示边框,单元格也会自动添加1px边框,cellspacing表示内边框与外边框的距离,cellpadding表示内部字体与边框的距离。width:表示宽度,height:表示高度。bgcolor="red"表示边框的背景颜色;margin:表示边框与边框的调整,padding:表示内容与边框的距离.
- tr标签属性:bgcolor="yellow"设置行背景颜色;align="left"设置行中内容水平对齐方式,默认居左,可取left/center/right; valign="bottom"设置内容的垂直对齐方式,默认居中,可取top/middle/bottom
重点理解** 单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后需要删除被合并的单元格,保证表格结构完整**
| 单元格属性 | 作用 | 取值 |
| colspan | 跨列合并单元格(横向合并) | 无单位数值 |
| rowspan | 跨行合并单元格(纵向合并) | 无单位数值 |
<th colspan="3" align="center"valign="center">info</th>合并修改在th标签和td标签中使用
----------
注意:一旦发生单元格合并,需要删除多余的单元格,保证表格结构的统一
垮列合并:删除当前行中多余的单元格
跨行合并:删除其后行中多余的单元格
----------
- 行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px">
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
使用:
1、结构化的分组标签根据需要添加,不是必填项
2、默认所有行都会自动添加tbody中
3、推荐书写顺序 thead、tfoot、tbody,不影响表格的结构,优化加载速度
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table border="3px" width="300px" height="300px"> <tr> <!--th表示单元格,自带文本加粗和居中效果--> <!--跨列合并--> <th colspan="3">个人信息</th> <!--删除被合并的单元格--> <!--<th>年龄</th>--> <!--<th>班级</th>--> </tr> <tr> <td>老祁</td> <!--向下合并单元格(跨行合并)无单位数值--> <td rowspan="2">35</td> <td>001</td> </tr> <tr> <td width="200px" height="200px">小泽玛利亚</td> <!--删除被合并的单元格--> <td>002</td> </tr> </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> </body> </html>
表单标签 重点
表单用于采集用户的信息并提交给服务器,由表单元素和表单控件组成。表单元素form负责提交数据给服务器,表单控件负责收集数据。
-
- 表单使用
| 属性名 | 取值
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式,默认为get方式,可以设置为post |
| enctype | 设置数据的编码类型,涉及二进制数据提交(例如图片,文件,音视频等),必须设置数据的提交方式为post,编码类型为:
"multipart/form-data";
|如果使用get方式则提交的是文件名。
例如:
<form action="提交数据地址" method="方法get或post" enctype="编码类型,默认">
<!--此处为表单控件-->
</form>
表单控件使用(重点)
表单控件用于采集用户信息,可设置以下标签属性: |属性名|取值|
| type | 设置控件类型 |
| name | 设置控件名称,最终与值一并发送给服务器 |
| value | 设置控件的值 |
| placeholder | 设置输入框中的提示文本 |
| maxlength | 设置输入框中可输入的最大字符数 |
| checked | 设置单选按钮或复选按钮的默认选中 |
| selected | 设置下拉菜单的默认选中
设置账号和密码
<p> 用户名:<input type="text" name="username" maxlength="10" placeholder="由字母和数字组成"> </p>
<p> 密码:<input type="password" name="passwd"></p>
属性中: name控件的名称必填项,和输入值一起发送服务器
maxlength:允许输入的最大字符数值
placeholder="由字母和数字组成":文本进行用户提示。
用户性别选择:单选按钮属性使用radio
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="women" checked>女
说明:
1、按钮的控件名称必须保持一致
2、value属性必填,设置控件的值,最终发送给服务器
3、checked属性设置默认选中
多选框:属性使用checkbox
<input type="checkbox" name="hobby" value="music">lebal
<input type="checkbox" name="hobby" value="study">学习
<input type="checkbox" name="hobby" value="play">玩
说明:value必填
属性值和文本控件绑定在一起
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音乐</label>
步骤:
1、给“音乐”添加label标签,在标签内属性用for="music"
2、input标签内添加Id属性id="music"
隐藏域和文件选择
用户头像:
<input type="hidden" name="uid" value="001">
<input type="file" name="uimg" >
下拉菜单(了解)
<p>
选择城市:
<select name="city" >
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
<option value="nanjing">南京</option>
<option value="hangzhou" selected>杭州</option>
</select>
</p>
说明:select属性name必填写,option属性值value值必须填写,默认选择 在option属性中输入selected
多行文本域(了解 )
<p>
个人介绍:
<textarea name="userinfo" id="" cols="30" rows="10"></textarea>
</p>
多功能按钮:重点
1、提交按钮submit,重置按钮reset,普通按钮button需要结合js自定义处理
<p>
<!-- value用来设置按钮的显示文本 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="自定义">
</p>
注意:数据提交需要经过form表单
标签button
<button>提交</button>
用法:
1、使用在form内相当于submit
2、使用在form外的标签相当于botton
**<button onclick="alert('按钮被单击')">提交</button>**
相当于窗口提示框:alter为提示框信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <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> 用户性别: <!--一组按钮的控件名称必须保持一致--> <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"> <!--功能按钮--> <!--1.提交按钮,点击时提交数据到后台, 可以设置value属性,表示按钮的显示文本--> <input type="submit" value="注册"> <!--2.重置按钮,点击时将表单还原至初始状态--> <input type="reset" value="重填"> <!--3.普通按钮,需要自定义点击处理--> <input type="button" value="点击"> <!--button标签表示按钮,标签内容即为按钮显示文本 书写在form中,相当于submit提交按钮; 书写在表单外,相当于普通按钮,需要自定义点击操作--> <button>form内</button> </form> <button>form外</button> </body> </html>
**###其他属性方式****
1、对齐居中text-align=center; 向右对齐align=right;
文本居中对齐
<h1 align="center">H标签my first web 中国</h1>
文本向右对齐
<h1 align="right">H标签my first web 中国</h1>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <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> 用户性别: <!--一组按钮的控件名称必须保持一致--> <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"> <!--功能按钮--> <!--1.提交按钮,点击时提交数据到后台, 可以设置value属性,表示按钮的显示文本--> <input type="submit" value="注册"> <!--2.重置按钮,点击时将表单还原至初始状态--> <input type="reset" value="重填"> <!--3.普通按钮,需要自定义点击处理--> <input type="button" value="点击"> <!--button标签表示按钮,标签内容即为按钮显示文本 书写在form中,相当于submit提交按钮; 书写在表单外,相当于普通按钮,需要自定义点击操作--> <button>form内</button> </form> <button>form外</button> </body> </html>
其他:
运行结果: