哎,我服了,明明之前学了html的,但时间一长我就忘记了,本来flask学到视图了,但涉及到了html我觉得还是需要重新回顾一下,,,,,,
web开发技术栈一共有3门语言。分别是:
HTML:译作超文本标记语言,负责通过标签来表达网页的页面结构。
开发者要遵循结构标准,就需要使用HTML来开发网页的内容与结构,需要遵循HTML语法。
CSS:译作层叠样式表标记语言,负责通过属性标记来表达网页的外观效果。
开发者要遵循外观标准,就需要使用CSS来设计或修改网页的外观效果,需要遵循CSS语法。
javascript: 简称js,负责通过编程代码来表达网页的行为特效。
开发者要遵循行为标准,就需要使用javascript来编写网页的动态特效以及数据交互能力,需要遵循javascript ECMA语法。
HTML网页的基本结构
<!DOCTYPE html>--表示接下来的内容都是html的内容,让浏览器按html语法进行解析
<html lang="en">--整个网页的标签,代表网页的开始
<head> --head代表网页的头部
<title>我的网页标题</title>
<meta charset="utf-8">
</head>
<body>--这里是网页的主体,允许用户进行查看
</body>
</html> --网页的结尾
标签名 | 类型 | 描述 |
---|---|---|
<!DOCTYPE html> | 单标签 | 告诉浏览器接下来所有的内容是HTML代码, 需要使用HTML解析器来识别。 |
<html></html> | 双标签 | 告诉浏览器,这对html标签里面的内容就是网页内容。 |
<head></head> | 双标签 | 告诉浏览器,这是html网页的头部信息,例如:网页标题,编码类型,网页关键字等.... |
<body></body> | 双标签 | 告诉浏览器,这是html网页的正文内容。 |
<title></title> | 双标签 | 属于head的子标签,告诉浏览器,这是html网页的网页标题。 |
<meta charset="UTF-8" /> | 单标签 | 告诉浏览器,这是一个utf-8编码的网页。 |
语法
HTML中的语法有2种:标签、注释。
注释
不会被用户所看到,但是可以在浏览器中,通过鼠标右键->查看网页源代码,让开发人员查看
<!--这就是注释,哎,前面那个我嫌麻烦就没这样子做-->
标签
标签[Tag],表示HTML网页内容的一个最基本的组织单元,类似语文里面的标点符号,标签的作用就是告诉浏览器当前标签中的内容是有什么作用,要以什么格式进行展示的。
标签从书写结构上分2种:
- 单标签,格式:
<标签名>
或者<标签名 />
。 - 双标签。格式:
<标签名>标签内容</标签名>
。
标签从组织结构上分2种:内容标签和结构标签。
- 内容标签:主要包含和展示内容的,部分标签可以包含其他的内容标签。
- 结构标签:主要用于包含其他标签,一般结构标签内部不会直接包含网页内容[文本、图片、视频、音频等]。
单标签
只有1个标签名的标签,就是单标签。书写格式:
<标签名>
<标签名 />
<标签名 属性名="属性值"/>
常见的单标签
标签名 | 描述 |
---|---|
<meta> | 元信息标签 |
<link> | css外观样式的外链引入标签,类似python中的import |
<img> | 图片标签 |
<input> | 输入框标签 |
<br/> | 换行标签,浏览器默认是不识别HTML源码文件中的换行与空格的,所以需要使用br标签告诉浏览器在什么位置需要换行。 |
<hr> | 分割线标签,代表分割内容的一条横线,代表前面的内容已经结束了,横线下方的内容与上方内容没有关联。 |
双标签
<标签名></标签名>
<标签名 属性名="属性值" 属性名></标签名>
常见的双标签
标签名 | 描述 |
---|---|
<h1></h1> | 网页的一级标题 |
<h2></h2> | 网页的二级标题 |
... | |
<h6></h6> | 网页的六级标题 |
<p></p> | 网页的段落 |
<a></a> | 网页超链接 |
<div></div> | 块级结构标签 |
<span></span> | 行级结构标签 |
<form></form> | 表单标签,表示网页的一个提供给用户输入数据的表单 |
<ul></ul> | 无序列表结构标签,表示网页的一个内容列表 |
<li></li> | 列表项目标签 |
<table></table> | 表格标签,表示网页的一个表格 |
常见标签使用
标题和段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- HTML中的标签是HTML语法提供的,所以每一个标签都是固定标签名 -->
<h1>h1标题:常用于网站的logo,网站标题</h1>
<h2>h2标题:常用于网站的板块标题、栏目标题</h2>
<h3>h3标题:常用于网站的板块标题、栏目标题</h3>
<h4>h4标题:常用于网站的附加板块标题,或者文章的标题</h4>
<h5>h5标题:更小级别的标题,基本用不到</h5>
<h6>h6标题:更小级别的标题,基本用不到</h6>
<p>p->段落:Hyper Text Markup Language</p>
</body>
</html>
标签的属性
标签的作用就是用于展示内容,但是内容有时候并非文本,而且文本的展示需要附加一些额外效果时,就需要使用标签的属性来声明。不管是什么标签,都有属性[Attribute]。标签的属性有两种:
-
普通属性:
属性与属性值使用 = 号关联 ,属性值使用单引号或双引号圈住,建议使用双引号。
-
布尔属性:
只有属性名,没有属性值。当标签里面写上这个属性名,则其值就是True,标签没有属性名,则为False
<!DOCTYPE html>
<html lang="en"> <!-- lang 就是HTML标签的属性,代表当前网页的默认语言language:en表示 english -->
<head>
<meta charset="UTF-8"> <!-- charset,是meta元信息标签的属性,表示当前网页的编码是utf-8 -->
<title>Title_python学习网页</title>
</head>
<body>
<!-- 双标签的属性 -->
<!--
align:文本的水平对齐方式:left左[默认值],center中,right右
title:表示当前标签的补充提示,当用户把鼠标放在当前标签上方则自动title属性的值
-->
<h1 align="left" title="提示文本">h1标题:常用于网站的logo,网站标题</h1>
<h2 align="center" title="用于提示而已">h2标题:常用于网站的板块标题</h2>
<h3 align="right">h3标题:常用于网站的板块标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
<p align="center" title="用于提示而已">p->段落:Hyper Text Markup Language</p>
<!-- 单标签的属性:单标签是没有内容的,所以需要依赖于属性来展示对应的内容 -->
<img src="./goods.png"> <!-- src就是用于展示图片的内容 -->
<input type="number"> <!-- 输入框标签[数值输入框],number表示只允许当前输入框中只能输入数值 -->
<input type="password"> <!-- 输入框标签[密码输入框],password表示当前输入任何内容都是密码,所以不会展示出来 -->
<input type="text"> <!-- 输入框标签[单行文本输入框],text表示只允许用于输入一行内容内容,不能回车换行 -->
<input type="datetime-local"> <!-- 时间输入框,只需要用户输入时间日期 -->
</body>
</html>
换行、分割、超链接
<!DOCTYPE html>
<html lang="en"> <!-- lang 就是HTML标签的属性,代表当前网页的默认语言language:en表示 english -->
<head>
<meta charset="UTF-8"> <!-- charset,是meta元信息标签的属性,表示当前网页的编码是utf-8 -->
<title>Title_python学习网页</title>
</head>
<body>
<h1>将进酒</h1>
<a href="https://baike.baidu.com/item/将进酒">李白</a>
<p>君不见黄河之水天上来,奔流到海不复回。<br>
君不见高堂明镜悲白发,朝如青丝暮成雪。<br><br>
人生得意须尽欢,莫使金樽空对月。</p>
<hr>
<h2>译文</h2>
<p>你难道没有看见吗?那黄河之水犹如从天上倾泻而来,波涛翻滚直奔大海从来不会再往回流。<br>
你难道没有看见,在高堂上面对明镜,深沉悲叹那一头白发?早晨还是黑发到了傍晚却变得如雪一般。<br>
人生得意之时就要尽情的享受欢乐,不要让金杯无酒空对皎洁的明月</p>
</body>
</html>
超链接用法
超链接有2种常用用法:页面跳转、下载文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--页面跳转: 如果href的值是网络地址,可以跳转到跳转到指定的网页-->
<a href="http://www.baidu.com">跳转到百度</a>
<!--页面跳转: 如果href的值是本地地址,则可以跳转到本地的内部网页 -->
<a href="ces.html">跳转到本地页面</a>
<!-- 下载资源:当href的值是一个浏览器无法直接展示的内容格式时,浏览器会自动下载当前路径对应的内容 -->
<a href="./html.chm">点击下载手册</a>
<!-- 下载资源:当href的值是一个浏览器可以直接识别并展示的内容格式时,用户可以鼠标右键,对当前href的数值的内容进行另存为下载 -->
<a href="./goods.png">点击下载图片[鼠标右键,另存为]</a>
</body>
</html>
实际上页面跳转也是属于下载文件。因为用户能在浏览器里面看到的所有内容,实际上都是经过浏览器下载到本地,用户才能看到的。我们可以通过 F12 -> 打开开发者工具 -> network(网络) 或者右键检查找到网络也可以进行查看
列表标签
列表是一种结构标签,可以让网页的内容形成列表格式。
列表标签在HTML中提供提供了4种:
-
无序列表(UnorderList,ul)就是没有序号的,内容不分先后的列表。
-
有序列表(OrderList,ol)
-
定义列表(DefineList,dl)
-
菜单列表(Menu)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
无序列表, unordered list,简写: ul
列表的单项 list item 简写:li
-->
<ul type="circle">
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ul>
<!--
有序列表, ordered list,简写:ol
列表的单项 list item li
-->
<ol>
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ol>
<!--
和任何一个双标签一样,标签内部可以嵌套的标签来使用。
-->
<ul>
<li>
<p>第一章:开端</p>
<ul>
<li>第一节:下山</li>
<li>第二节:命案</li>
<li>第三节:奇遇</li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<dl>
<dt>赵本山</dt>
<dd>春晚常驻选手,国内一线大品牌</dd>
<dd>乡村爱情故事,二人转,小品</dd>
<dt>小明</dt>
<dd>国内所有小朋友的同学,每次都从教室里面滚出去的哪一个。</dd>
</dl>
<menu>
<li>首页</li>
<li>商品分类</li>
<li>购物狂欢节</li>
<li>会员中心</li>
</menu>
</body>
</html>
几种列表标签中最常用的只有**ul
**,当然也有新版本的menu标签。其他的2种标签(ol与dl),基本不使用。
表单标签
是HTML中最终的标签之一,主要是提供了输入框或按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定服务端程序中进行数据处理。
form标签
属性 | 描述 |
---|---|
action | 设置当前表单的表单数据处理应用程序的url地址,默认值是当前url地址。 |
method | 设置当前表单的HTTP提供方式,默认是get。 get,以查询字符串的格式,把表单数据附加在url地址栏上提交数据 post,以数据包格式,把表单数据附在HTTP网络请求体中提交数据 |
enctype | 设置当前表单提交的数据格式,默认值是application/x-www-form-urlencoded。 |
表单项标签
类型 | 用法 | 描述 |
---|---|---|
单行文本框 | <input type="text" name="" value="" placeholder=""> | name:设置输入框的值的变量名称,用于服务端接受数据。 value:设置输入框的默认值。 placeholder:设置输入框的提示内容。 |
密码框 | <input type="password" name="" value="" placeholder=""> | 只允许输入单行密码,属性描述同上 |
单行文本框(数值框) | <input type="number" name="" value="" placeholder=""> | 只允许输入数值内容,属性描述同上。 就版本浏览器中不支持时会被默认为text单行文本框。 |
单行文本框(日期输入框) | <input type="date" name=""> | 只允许输入日期格式内容,属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。 |
单行文本框(时间输入框) | <input type="time" name=""> | 只允许输入时间格式内容,属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。 |
单行文本框(日期时间输入框) | <input type="datetime-local" name=""> | 只允许输入日期时间格式内容,属性描述同上。 低版本浏览器中不支持时,会被默认为text单行文本框。 |
文件上传框 | <input type="file" multiple name=""> | multiple:布尔属性,允许一次性上传多个文件。 其他属性描述同上。 |
单选框 | <input type="radio" name="" value=""> | 用于提供一组多个选择让用户选一个选项的按钮组。 多个单选框必须name值相同才能为一组。 同一组单选框中的value值必填,而且值要唯一。 |
多选框 | <input type="checkbox" name="fav" value="1"> | 用于提供一组多个选择让用户选多个选项的按钮组。 多个多选框必须name值相同才能为一组。 同一组多选框中的value值必填,而且值要唯一。 |
下拉列表框 | <select name=""> <option value="选项1值">选项1</option> <option value="选项2值">选项2</option> <option value="...">...</option> <option value="选项n值">选项n</option> </select> | 属性描述同上。 |
多行文本框/文本域 | <textarea name="" cols="" rows=""></textarea> | cols:设置多行文本框默认列数[宽度] rows:设置多行文本框默认行数[高度] 注意:多行文本框标签中的任意内容都会被原样记录。 |
提交按钮 | <input type="submit" value="提交"> | value:表示当前按钮的提示文本。 用于提交表单数据到action属性对应的地址中。 |
普通按钮 | <input type="button" value=""> | 属性描述同上,主要用于配合js完成网页特效。 |
普通按钮 | <button></button> | 普通按钮,中间可以显示图片或文本。 主要用于配合js完成网页特效。 |
重置按钮 | <input type="reset" value="重置"> | 点击以后,会把当前表单中用户输入的所有内容进行还原到页面刚刷新状态。 |
隐藏域输入框 | <input type="hidden" name="" value=""> | 隐藏域输入框的作用是附带一些默认数据提交给服务端,但是不希望用户看到。 |
表单项常用属性
属性名 | 描述 |
---|---|
name | 表示当前表单项的值的变量名,用于提供服务端获取本次提交的数据项。 |
value | 表示当前表单项的值,如果值在代码中提前设置了,则为默认值 |
type | 表示input框的类型 |
disabled | 布尔属性,设置当前输入框是否被禁用 |
maxlength | 设置当前输入框[textarea,input]中最大输入内容的长度。 |
multiple | 设置允许文件上传框选择上传多个文件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 表单/
<form> 表单标签,告诉浏览器,form内部的所有输入标签都是表单的内容,后面一并提交。
action 表单数据提交的服务器地址
<input> 输入标签/输入框/输入按钮
type 设置输入框的类型
text 告诉浏览器,当前input属于单行文本框
password 告诉浏览器,当前input属于密码框
file 告诉浏览器,当前input属于上传文件框
submit 告诉浏览器,当前input输入提交表单的提交按钮
radio 告诉浏览器,当前input属于单选框
checkbox 告诉浏览器,当前input属于多选框
reset 告诉浏览器,重置当前表单的数据
<select> 下拉列表
option 告诉浏览器,这是下拉列表中的其中一个选项
textarea 多行文本框
cols 设置框的列数[宽度]
rows 设置框的行数[高度]
-->
<h2>登录表单</h2>
<form action="">
登录帐号:<input type="text"><br><br>
登录密码:<input type="password"><br><br>
<input type="submit" value="登录">
</form>
<h2>百度搜索</h2>
<form action="http://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
<h2>注册表单</h2>
<form action="">
账户:<input type="text" name="username"><br><br>
密码:<input type="password" name="password"><br><br>
邮箱:<input type="emai" name="email"><br><br>
姓别:<label><input type="radio" name="sex" value="1">男</label>
<label><input type="radio" name="sex" value="0">女</label> <br><br>
爱好:
<label><input type="checkbox" name="lve" value="swimming">游泳</label>
<label><input type="checkbox" name="lve" value="pc_game">电脑游戏</label>
<label><input type="checkbox" name="lve" value="card">卡牌游戏</label>
<label><input type="checkbox" name="lve" value="wark">爬山</label>
<br><br>
所在城市:
<select name="province">
<option value="">广东</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>
<option value="">上海</option>
</select>
<select name="city">
<option value="">广州</option>
<option value="">佛山</option>
<option value="">深圳</option>
</select>
<br><br>
备注:<br>
<textarea name="remark" cols="60" rows="10"></textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
表格标签
表格系列标签主要是可以数据以表格的格式展示出来。但是现在table表格已经很少使用了,而是改成div+css实现更漂亮的表格。
标签 | 描述 |
---|---|
<table></table> | 表示网页的一个表格,内部一般直接嵌套的是tr标签。 |
<tr></tr> | 表示表格的一行,内部直接嵌套的只能是td或者th标签。 |
<td></td> | 表示表格的一个单元格,也可以是一列,可以包含其他标签或内容。 |
<th></th> | 表示表格的表头的一个单元格,可以包含其他标签或内容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--基础单元格-->
<table border="1">
<tr>
<td>1行1列</td>
</tr>
</table>
<!-- 第二个:多行的表格 -->
<table border="">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>
<!-- 第三个:有表头的表格 -->
<table border="0" align="center" width="300px;">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>001</td>
<td>小龟龟</td>
<td rowspan="2">13</td>
<td>男</td>
</tr>
<tr>
<td>002</td>
<td>小红红</td>
<td>女</td>
</tr>
<tr>
<td>003</td>
<td colspan="3">17的小男孩</td>
</tr>
</table>
</body>
</html>
合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="800" border="1">
<tr>
<!-- colspan 表示当前单元格[td,th]占据2列 -->
<th colspan="2">form标签属性说明</th>
</tr>
<!-- tr>th*2 -->
<tr>
<th>属性</th>
<th>描述</th>
</tr>
<tr>
<td>action</td>
<td>设置当前表单的表单数据处理应用程序的url地址,默认值是当前url地址。</td>
</tr>
<!-- tr>td*2 -->
<tr>
<!--设置当前单元格,占据3行的空间 -->
<td rowspan="3">method</td>
<td>设置当前表单的HTTP提供方式,默认是get。</td>
</tr>
<tr>
<td>get,以<b>查询字符串</b>的格式,把表单数据附加在url地址栏上提交数据</td>
</tr>
<tr>
<td>post,以<b>数据包</b>格式,把表单数据附在HTTP网络请求体中提交数据</td>
</tr>
<tr>
<td rowspan="4">enctype</td>
<td>设置当前表单提交的数据格式</td>
</tr>
<tr>
<td>application/x-www-form-urlencoded:默认值,以普通表达数据格式提交</td>
</tr>
<tr>
<td><b>multipart/form-data</b>:以多种数据格式提交</td>
</tr>
<tr>
<td>text/plain:以纯文本数据格式提交</td>
</tr>
</table>
</body>
</html>
表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="1680" align="center">
<tr>
<td>
<table align="center" width="1024">
<tr>
<td><a href="">奥运首页</a></td>
<td><a href="">中国军团</a></td>
<td><a href="">赛程赛果</a></td>
<td><a href="">奖牌榜</a></td>
<td><a href="">诸强</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1">
<tr>
<td width="300">
<table>
<tr>
<td>全部赛程</td>
<td width="20%">更多 > </td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>中国对日本</li>
<li>韩国对日本</li>
<li>朝鲜对日本</li>
<li>俄罗斯对日本</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<img src="goods.png" width="100%" height="250" alt="">
</td>
<td width="450">右</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
媒体标签
img 图片
audio 音频
video 视频
标签 | 常见格式 | 描述 |
---|---|---|
<img src="" alt=""> | png ,jpg/jpeg ,gif (动态图片格式),svg ,webp ,tiff | 图片 |
<audio controls autoplay> <source src=""> </audio> | mp3 ,mpeg ,ogg ,wma,aac ,ogv | 音频 |
<video width="" controls autoplay src=""></video> | mp4 ,mpeg ,ogg ,ogv,mov ,flv, | 视频 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页标题</title>
</head>
<body>
<!-- 图片 -->
<img src="../素材/1.png" width="400px" height="400px">
<!-- 音频-->
<audio controls>
<source src="../素材/horse.ogv" type="audio/ogg">
</audio>
<!-- 视频 -->
<video width="600px" controls autoplay src="../素材/movie.ogv"></video>
</body>
</html>