web前端篇:html基础知识
1.web前端:
-
什么是web?
web 就是网页,是一种基于b/s的应用程序 b:browser浏览器 s:server服务器
-
web组成?
浏览器:代替用户向服务器发送请求 服务器:接收用户请求并响应 通信协议:规范数据在网络中是如何打包传送的。 http(hypertext transfer protocal):超文本传输协议
-
web服务器
作用: 接收用户请求并左幅响应 存储web信息 具备安全性能
-
web浏览器
产品: apache tomcat iis nginx 作用: 代替用户向服务器发送请求 做为响应数据的解释引擎,向用户呈现界面 主流浏览器产品: 根据浏览器的内核、引擎进行划分 1. microsoft ie 2.google chrome 3.mozilla firefox 4.apple safari 5.apple safari 浏览器引擎: 渲染:解析html,css控制页面渲染效果 js引擎:解释网页脚本文件 前端开发技术 html,css,javascript
2.html概述
2.1html介绍
- 什么是html?
hypertext markup language 超文本 标记 语言 作用:书写网页结构
- 标记
也叫标签,主要用来标记网页中的内容,以实现网页的布局和js操作
2.2html在计算机中如何表现
- 所有的网页文件在计算机中以.html或。htm文件存储。
- 开发工具:
1.记事本 2.editplus pycharm 3.sublime webstorm vscode atom...
- 运行工具:
- chrome 浏览器
- firefox 浏览器
- 调试方法:f12打开网页源码。
3.html基础语法
3.1.标签/标记
在网页中具有特殊功能的符号,html中所有的标签都以<>为标志,作用区分普通文本。
-
标签分类
1.双标签
成对出现,有开始有结束。
eg:
<开始标签> 标签内容 </结束标签>
2.单标签
只有开始标签,没有结束标签,可以手动添加、表示结束。
eg:
<标签名>
-
标签嵌套
在成对的标签中出现其他标签。
-
嵌套结构中,外层元素程为父元素,内层元素称为子元素
<a> <b>你好</b> </a> <!--a标签是超链接标签--> <!--b标签是文本加粗标签-->
-
书写规范
- html不区分大小写,保持适当缩进增强代码可读性
3.2 标签属性
- 标签的属性主要用于修饰标签的显示效果。
- 相关语法:
- 属性由属性名和属性值组成:属性名="属性值"
- 属性的声明必须写在开始标签中:..开始标签>
- 每个标签都可以设置多个属性,属性之间使用空格隔开:..开始标签>
3.3 html注释
- 注释语句:
- 注意:
- 注释不能卸载标签里,如<p >
- 注释不能嵌套
3.4html结构组成
-
文档的类型声明方式:开头第一行<!doctype html> html5声明方式
- 作用 :告诉浏览器当前使用的html版本,以便浏览器能正确解析html标签和渲染样式。
- 书写位置:文档最开始位置。
-
文档的开始和结束
-
在文档类型声明之后,使用一对
标签标示文档的开始和结束 -
在html标签中,包含两对子元素
<html> <head></head> <body></body> </html> <head>标签标示网页的头部信息,包含网页的标题,选项卡的图标,网页的关键字,作者,描述等信息,还可以引入外部的资源文件 <body>标签表示网页的主体信息,网页所呈现的内容都要写在body里
-
<head>
标签中包含的子元素- 设置网页的标题
<title></title>
- 设置网页的字符编码
<meta charset="utf-8">
- 设置网页的标题
-
3.5文本标签
3.5.1.字符实体(具有特殊意义的符号)
-
表示一个空格 -
<
表示小于号 < -
>
表示大于号 > - '© ;' 表示版权符号
-
¥
表示人民币符号¥
3.5.2.文本样式
-
<i></i>
斜体显示文本 -
<u></u>
文本添加下划线 -
<b></b>
文本加粗效果 -
<s></s>
文本添加删除线 -
<sup></sup>
上标显示文本 -
<sub></sub>
下标显示文本 - 特点:这些标签可以与其他的标签或文本共行显示
3.5.3.标题标签
以不同的文字大小和加粗方式显示文本
-
语法:
<hn></hn>
n取值 1- 6,字体大小是逐级递减的<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6>
-
特点:
- 会改变文字的大小并且具有加粗效果
- 每个标题都会具备垂直的空白距离
- 每个标题都独占一行,不与其他元素共行显示
- 每个标题都可以添加属性 align
- 取值:left / center / right
- 设置文本的水平对齐方式,默认居左对齐
<h1 align="center">一级标题<h1>
3.5.4.段落标签
- 作用:突出显示一段文本,每段文本都独占一行或一块,不予其他元素共行显示,并且也具备垂直的空白距离
- 语法:
<p></p>
- 属性:align 设置文本的水平对齐方式
- 取值: left / center / right
3.5.5.格式标签
- 换行标签:
<br>
- 水平线标签:
<hr>
3.5.6.分区标签
- 块分区
<div></div>
- 作用:划分页面结构,配合css实现网页布局
- 特点:独占一块显示
- 行分区元素
<span></span>
- 作用:设置同一行文本的不同样式,结合css
- 特点:可以与其他元素或文本共行显示,允许在一行文本中使用多个span
3.5.7.标签分类
- 块级元素
- 只要在网页中独占一行,不予其他元素共行显示的元素都是块级元素。
- 作用:都网页可以做布局
- 特点:都添加align属性,设置内容水平对齐方式
- eg:h1~h6,ul,ol,li,form,table,tr,p,div
- 行内元素/内联元素
- 可以与其他元素共行显示。
- eg:i b strong sub sup span
3.6 列表标签
作用:按照从上到下的方式来排列数据
-
列表的组成:
-
有序列表
<ol><ol>
- 默认是按照数字排序
-
无序列表
<ul></ul>
- 默认以实心原点作为标识
-
列表项
- 列表中的每一条数据都是一个列表项
- 语法 :
- 注意 :列表项要嵌套在列表标签中使用
-
-
列表属性
-
有序列表--ol
- type属性:设置项目符号
1 :按照数字排列显示,默认值 a : 按照小写字母顺序排列 a :按照大写字母排列 i : 按照罗马数字排列 i : 按照罗马数字排列
- start属性:设置从第几个字符开始排序
- 取值:数字
-
无序列表--ul
-
type属性:设置项目符号
disc 实心圆点(默认) circle 空心圆点 square 实心方块 none 不显示项目符号
-
-
-
列表嵌套
-
在一个列表中出现其他列表。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <ul type="circle"> <li>山东 <ol type="i"> <li>德州</li> <li>青岛</li> <li>济南</li> <li>淄博</li> </ol> </li> <li>吉林 <ol type="i"> <li>长春</li> <li>吉林</li> <li>白城</li> <li>敦化</li> </ol> </li> <li>北京 <ol type="i"> <li>朝阳</li> <li>昌平</li> <li>西城</li> <li>东城</li> </ol> </li> </ul> </body> </html>
-
3.7 图像与超链接标签
- url
- 统一资源定位符 :用来标识网络中资源的位置,俗称路径url 组成 :协议 域名 文件目录及文件名。
- url分类:
- 绝对路经:
- 从根目录开始查找,常用于网络文件路经。
- 相对路经:
- 从当前文件所在的文件夹开始查找
- 根相对路径 (了解):
- 从web程序所在的根目录开始查找资源文件
- 注意:网络url中不能出现中文,url是严格区分大小写的。
- 绝对路经:
- 图像标签
- 在网页中插入一张图片
- 语法 :
- 属性 :
- src :指定要显示的图片路径
- width :设置图片的宽度,以像素px为单位,也可以省略单位
- height :设置图片的高度
注意 : src 为必填属性,宽高可以省略,省略宽高的话,图片将以原始尺寸显示在网页中 - title :用来设置图片的标题,当鼠标悬停在图片上方时出现
- alt : 用来设置图片加载失败之后的提示文本
3.8超链接标签
-
什么是超链接标签
- 能够实现从当前文件跳转到其他文件的标签
-
语法:
<a></a>
-
标签属性:
- href :必填属性,指定链接地址,以路径形式给出,#表示当前页,不会发生页面刷新操作,如果属性为"",也表示当前页,但是包含了网络请求,相当于刷新页面。
- target :可选属性,设置目标文件的打开方式。
- _self :默认值,表示在当前窗口打开
- _blank:表示新建窗口打开
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <a href="https://www.baidu.com/">百度一下</a> <a href="">回到顶部</a> </body> </html>
-
锚点链接
-
链接到当前文件的指定位置
1. 设置锚点<a name="anchor1"></a> 2. 设置跳转<a href="#anchor1">早年经历</a> <body> <a href="https://www.baidu.com/" name="ac1">百度一下</a> <a href="#ac1">回到顶部</a> </body>
-
3.9 表格
3.9.1 标签介绍:
表格标签:
<table></table>
行标签:
<tr></tr>
单元格标签:
<td></td>
-
创建顺序:
- 在表格标签中嵌套行标签,每一个 tr 就代表一行
- 在行标签中创建单元格标签,用来存放数据
<table> <tr><!--代表一行--> <td>id</td><!--代表单元格--> <td>name</td> <td>age</td> </tr> <tr> <td>1</td> <td>xjk</td> <td>18</td> </tr> <tr> <td>2</td> <td>half</td> <td>15</td> </tr> </table>
3.9.2标签属性
- table 属性
- border :设置边框,取值以px为单位的数值(px可以省略)
- width :设置宽度
- height :设置高度
- align :设置表格在其父元素中的水平对齐方式
- cellpadding : 设置单元格的内边距(内容与边框之间的距离),取值为px单位的数值
- cellspacing : 设置单元格的外边距(单元格与单元格之间的距离,或者单元格与表格边框之间的距离),取值像素为单位的数值
- bgcolor : 设置表格的背景颜色,取值可以是英文的颜色名称
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <a href="https://www.baidu.com/" name="ac1">百度一下</a> <a href="#ac1">回到顶部</a> <table border="1" align="center" cellpadding="10" cellspacing="1" bgcolor="red"> <tr> <td>hello</td> <td>html</td> </tr> </table> </body> </html>
- tr 属性
- bgcolor : 设置当前行的背景颜色
- align :设置当前行中内容的水平对齐方式
取值 : left / center / right - valign :设置当前行内容的垂直对齐方式
取值 :top / middle / bottom,默认垂直居中。
- td属性
- width 设置单元格的宽度
- height 设置单元格的高度
- align 单元格内容的水平对齐方式
- valign 单元格内容的垂直对齐方式
- bgcolor 单元格的背景颜色
- 单元格的合并
- 单元格独有的属性 colspan rowspan
- 单元格的跨列合并
- 从当前单元格的位置开始,横向向右合并几个单元格colspan = "3" ->跨3列进行合并(包含自身)
- 单元格的跨行合并
- 从当前的单元格开始,纵向向下合并单元格rowspan = "3" ->向下跨3行合并单元格
- 注意:一旦发生单元格合并,跨列合并,要删除当前行中多余的单元格跨行合并,要删除其后行中多余的单元格始终保持表格结构完整。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <table border="1" cellspacing="0" width="400" height="400"> <tr> <td colspan="2" bgcolor="red"></td> <!--<td>2</td>--> <td rowspan="2" bgcolor="#00008b"></td> </tr> <tr> <td rowspan="2" bgcolor="#663399"></td> <td bgcolor="#ff1493"></td> <!--<td>6</td>--> </tr> <tr> <!--<td>7</td>--> <td colspan="2" bgcolor="#adff2f"></td> <!--<td>9</td>--> </tr> </table> </body> </html>
-
行分组
允许将表格中的一行或者是若干行划分为一组,便于管理。
-
语法
1. 表头行分组 <thead> <tr> <td></td> </tr> </thead> 2. 表尾行分组 <tfoot> <tr> <td></td> </tr> </tfoot> 3. 表主体信息 <tbody> <tr> <td></td> </tr> </tbody
3.10.表单
3.10.1.用于接收用户的数据并且提交给服务器
- 表单2个要素
- form表单元素
- 表单控件
- 提供了能够跟用户交互的可视化组件
3.10.2.form元素
注意:form元素本身是不可见的,却不能省略,因为数据的提交功能要由 form 元素完成
语法:
<form></form>
-
form标签属性
- action
- 指定数据提交的目的地址
- method
- 数据请求方式 get /post (默认get)
- get
- 通常用于向服务器端获取数据
- 特点:
- 提交的数据会以参数的形式拼接在url后面
- 安全性较低
- 提交数据最大2kb
- post
- 将数据提交给服务器处理
- 特点:
- 隐式提交,看不到提交数据
- 安全性较高
- 没有数据大小限制
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <form action=""> <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit" value="提交"> </form> </body> </html> ################################################################################## file:///d:/code/day43.html file:///d:/code/day43.html?user=alex&pwd=123
- action
3.10.3.表单控件
作用:提供与用户交互可视化组件(这里注意只有放在表单元素中的表单控件才允许被提交)
-
分类:
-
文本框与密码框
-
语法:
- 文本框:
<input type="text">
- 密码框:
<input type="password">
- 文本框:
-
属性:
-
name 属性 定义当前控件的名称,缺少的话无法提交。
name = "uname"
value 属性,要提交给服务器的值,同时也是默认显示在控件上的值。
maxlength 用来限制用户输入最大字符串。
placeholder 用户输入之前显示在框中的提示文本。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <input type="text" name="user" maxlength="5" placeholder="输入至少5位数字"> <input type="password" name="pwd" maxlength="10" placeholder="输入至少10位的密码"> </body> </html>
-
-
-
单选框和复选框
单选按钮
<input type="radio">
复选框
<input type="checkbox">
-
属性:
- name 定义控件名称,还起到分组的作用,一组中的按钮名称必须保持一致。
- value 属性 设置当前控件的值,最终提交给服务器。
- checked 属性 设置预选中状态 可以省略属性值,也可以使用"checked" 作为值。
<!--单选框--> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 </body> </html> <!--多选框--> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <input type="checkbox">抽烟 <input type="checkbox">喝酒 <input type="checkbox">烫头 </body> </html>
-
隐藏域和文件选择框
-
隐藏域
- 作用:需要提交给服务器但是却不需要呈现给用户的数据,都可以放在隐藏域中。
- 语法:
<input type='hidden'>
- 属性:
- name 控件名称
- value 控件的值
-
文件选择框
作用:选择文件上传,发送给服务器
语法:
<input type="file">
属性:name 定义控件名称。
-
-
下拉选择框
-
<select name="province">
- 属性:
- multiple 可进行多选(ctrl+鼠标左键)
<select name="pro" id="" multiple> <option value="hebei">河北</option> <option value="heilongjiang">黑龙江</option> <option value="hunan">湖南</option> </select>
- 属性:
-
-
文本域
支持用户多行文本
语法:
<textarea></textarea>
-
属性:
- name 控件名称
- cols 指定文本默认显示的列数,一行中能显示的英文字符量,中文减半
- rows 指定文本域能够显示的行数
-
注意:文本域可以由用户调整大小
<textarea name="wenben" id="123" cols="30" rows="10"></textarea>
-
按钮
-
提交按钮
<input name='' id='' type="submit">
-
重置按钮
<form action=""> <input type="text" name="123"> <input name='' id='' type="reset" value="重置按钮"> </form>
-
普通按钮
<input type="button" value="点击">
-
按钮显示文本
<button>按钮显示文本</button>
- 注意:
- 按钮标签可以在任何地方使用,不局限在form表单中使用
- 按钮标签使用在form中,默认具有提交功能,等同于input submit
- 可以添加属性type 取值 submit/reset/button 进行区分(非必填)
- 在表单外做为普通按钮使用时,需要通过js,动态绑定事件
- 注意:
-
-
label特殊方法
-
使用label标签包裹表单控件要显示的文本信息,为label标签添加for属性,属性值与所要绑定的表单控件的id属性值保持一致,实现文本与控件的绑定。
<label for="male">男</label> <input type="radio" name="gender" value="male" id="male">
-
-
4.练习题:
1.字体标签包含哪些?
2.超链接标签a标签中href属性有什么用?
3.img中标签中src和alt属性有什么?
4.如何创建一个简易的有边框的表格?
5.form 标签中的action属性和method属性的作用?
6.在form标签中表单控件input中type类型有哪些?并分别说明他们代指的含义
7.表单控件中的name属性和value属性有什么意义?
8.用socket 开启一个服务端,客户端访问服务器?
9.在一行内显示的标签有哪些?
10.独占一行的标签有哪些?
上一篇: vue-devtools安装成功之后控制台没有解决方法
下一篇: Data.URI.scheme