前端——HTML
凌逆战 人气:2HTML称为超文本标记语言,不属于编程语言的范畴,HTML使用标记标签来描述网页。HTML运行在浏览器上,由浏览器来解析。网页运行在浏览器上,是数据展示的载体。网页由浏览器、服务器和协议组成。
- 服务器:向服务器发送用户请求指令并接收和解析数据展示给用户。
- 服务器:存储数据,处理并响应请求。
- 协议:规范数据在传输过程中的打包方式
网页有两大优势即时响应和无需安装和更新。
- 即时响应:更新服务端页面即完成更新,客户端重新加载即兑现内容。
- 无需安装和更新:无需安装任何应用软件,只需要一个浏览器执行即可。
开发前的准备
- 运行环境:浏览器,默认选择chrome浏览器,作为网页文件的运行环境。
- 调试工具:浏览器自带的调试工具,使用快捷键"F12"或右键"检查"打开。
- 开发工具:不限,选用个人习惯的即可。(Sublime、VSCode、pycharm、EditPlus、Webstrom等)
语法介绍
HTML又称为超文本标记语言,超文本标记语言能够让浏览器识别和解析的语言,通过标签的形式构建页面结构和填充内容。HTML书写的网页文件使用.html或.htm作为文件后缀。
代码基本结构
每个网页基本的代码结构,都是由以下代码结构组成的。通过下面的代码可知,每个网页都是由HTML标签代码 + JS代码 + CSS样式代码 组成的。HTML代码不区分大小写,建议都小写。CSS、JS、HTML的注释语法都不同,其实注释语法不需要特别记忆,只需要ctrl+/ 快捷键就能自动注释(pycharm默认编辑器,点setting>Languages&Frameworks>python Template Languages>HTML>Template Languages>none)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*网页CSS样式代码*/ </style> </head> <body> <!-- HTML标签结构--> <script> // 网页事件,JS代码 </script> </body> </html>
代码解析:
<!DOCTYPE html>:这句话告诉浏览器,使用HTML5标准来解析这个网页
<html>:HTML文档开始的标志和文档结束标记
<head>:网页的头部,可在head中设置网页标题,还可以引入外部的资源文件
<title>:包含文档的标题
<body>:网页的身体,包含可见的页面内容
<!--注释-->:注释
<script>:网页的事件,包含Java Script代码
<style>:网页的样式,包含css代码
HTML标签
HTML标签也会成为标记或元素,用于网页中标记内容,是由< >包围的关键词成对出现的,标签名不区分大小写,推荐小写表示。标签对中第一个标签是开始标签,第二个标签是结束标签。
<标签>内容</标签>
标签分为行内标签(inline)和块标签(block)
- 行内元素:每个行内元素独占一行,高和外边距不可改变;宽度就是他的文字和图片宽度;内联元素只能容纳文本或者其他的内联元素。常用的行内元素有:<span>、<a>、<br>、<input>、<img>
- 块元素:块元素总是在新的一行上开始,且多个块元素能同时在一行;高度、行高以及内外边距都可以设置;宽度缺省是他的容器的100%,除非设定一个宽度。块元素可以容纳其他块元素和内联元素,p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素。常用的块元素有:<div>、<h1>~<h6>、<form>、<hn>、<ul>、<table>
HTML标签分为双标签和单标签
- 双标签:成对出现,包含开始标签和结束标签 <html></html>
- 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合,也可以不加“/”。<br>或者<br/>都可以
标签的属性:标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。
同一个标签中可以添加若干组标签属性,使用空格间隔。
<img src="imgs/img01.jpg" width="200px" height="200px">
标签嵌套:在双标签中书写其他标签,称为标签嵌套;
标签元素的嵌套关系:嵌套结构中,外层元素称为父元素,内层元素称为子元素;多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素;平级结构互为兄弟元素
常用标签
<!doctype html>:文档类型声明,便于浏览器正确解析标签及渲染样式
<!doctype html>
<html> </html>:HTML文档开始的标志和文档结束标记
<html> </html>
<head>头部元素
头部设置,可在head中设置网页标题,引入外部的资源文件
<head>元素中可以插入 <title>、<script>、<style>、<meta>、<link>、 <noscript>、<base>
<base> </base>:设置网页的默认URL,因此该网页的其他 src 可以使用相对路径。案例。
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head>
<link> </link>:定义了一个文档和外部资源之间的关系。通常用来链接样式
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<style> </style>:可以定义文档样式文件引用地址;也可以直接在<style>中添加样式
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
<meta>元素:定义基本的元数据,以供浏览器解析。
<meta>标签有以下作用:
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者
<meta name="author" content="Runoob">
每30秒刷新当前页面
<meta http-equiv="refresh" content="30">
设置网页字符编码,如果中文出现乱码,可以设置编码格式为utf-8,或者gbk。
<meta charset="utf-8">
<script> </script>:定义JavaScript脚本文件,或者写JS代码
通过 JavaScript 输出 "Hello world":
<head> <script> document.write("Hello World!") </script> </head>
<title> </title>:设置网页标题,显示在网页选项卡上方
<title>网页标题</title>
<body>主体元素
</body>网页主体部分,显示网页主要内容
<body> 网页主体内容 </body>
接下来连在一起窥探一下网页的基本结构框架。
<!-- HTML文档开始的标志 --> <html> <!-- 头部设置,可在head中设置网页标题,引入外部的资源文件 --> <head> <!-- 设置网页标题,显示在网页选项卡上方 --> <title>网页标题</title> <!-- 设置网页字符编码 --> <meta charset="utf-8"> </head> <!-- 网页主体部分,显示网页主要内容 --> <body> 网页主体内容 </body> </html><!-- 文档结束-->
文本标签
标题标签
自带加粗效果,从h1~h6字体大小逐级递减
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
段落标签<p></p>
<p>段落文本</p>
属性:
- title="文字":鼠标移上去显示的文字
- style="text-align:center":文本居中
文本格式化标签
<b>或<strong>:加粗文本
<i>或<em>:定义斜体文本
<u>或<del>:删除线
<ins>:下划线
<big> & <small>:放大字体 & 缩小字体
<sub> & <sup>:下标(块元素) & 上标(块元素)
<pre>:定义预格式文本,被包裹的文本 是什么格式就以什么格式输出
<address>:定义地址
<bdo>:定义文字方向,rtl:从右向左,ltr:从左向右
<span>:行分区,用于对特殊文本进行特殊处理
<br>:换行,单标签
<hr>:水平线,单标签
某些情况下,浏览器会将一些特殊字符按照 HTML 的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写。
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"¥"
区域块
块级元素在浏览器显示时,通常会以新行来开始。
块级容器 <div> </div>
<div>元素没有特定的含义,由于它是块级元素,浏览器会在其前后拆行,<div>元素常用于文档布局结构划分,结合CSS实现网页布局
快捷键: div#top
<div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div>
行内容器 <span> </span>
<span>元素没有特定的含义,由于它是内联元素,因此可以在同一行显示。
媒体标签
图片标签 <img>
<img src="" alt="">:用于在网页中插入一张图片
<img href="#top" src="" width="" height="" title="鼠标停留时显示" alt="图片加载失败">
属性:
- href:锚, 可以快速定位到锚所对应的位置.
- src:用于给出图片的URL,必填。
- alt:用于设置图片加载失败后的提示文本
- width/height:用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
- title:用于设置图片标题,鼠标悬停在图片上时显示
<map name=""></map>:定义图像地图,name值要等于<img>的usemap属性值。
<area></area>:定义图像地图中可点击的区域
属性
- coords:规定区域的坐标
- href:规定区域的目标 URL
- shape:规定区域的形状。default(默认)、rect(矩形)、circle(圆圈)、poly(连接线)
如果规定的区域是矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
如果规定的区域是园:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
合在一起使用
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
音频标签<audio>
<audio controls> <source src="horse.mp3" type="audio/mpeg"> </audio>
<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。
属性:
- autoplay:音频就绪后立马播放
- controls:显示音频控件(播放/暂停 按钮)
- src:规定音频文件的URL
- loop:循环播放
- muted:静音播放
视频 <video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。<video>分别支持MP4、WebM、Ogg格式的音频。<video> 元素支持多个 <source> 元素,<source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
<video width="320" height="240" controls> <!--浏览器将使用第一个可识别的格式--> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <!--提供给不支持 video 元素的浏览器显示的--> 您的浏览器不支持 HTML5 video 标签。 </video>
图形标签 <canvas> </canvas>
<canvas>标签用来定义图形容器,必须通过脚本(JavaScript)来绘制图形。
绘制画布
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Canvas 坐标
绘制正方形fillRect(x1,y1,x2,y2),使用JavaScript来绘制图像
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script> var c = document.getElementById("myCanvas"); //找到 <canvas> 元素对象 var ctx = c.getContext("2d"); //创建 context 对象 ctx.fillStyle = "#FF0000"; // ctx对象填充红色样式 ctx.fillRect(0, 0, 150, 75); //ctx对象填充正方形(x1,y1,x2,y2) </script>
注意:getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
Canvas 路径
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script> var c = document.getElementById("myCanvas");//找到 <canvas> 元素对象 var ctx = c.getContext("2d");//创建 context("2d") 对象 ctx.moveTo(0, 0); //定义线条开始坐标 ctx.lineTo(200, 100); //定义线条结束坐标 ctx.stroke(); //使用stroke()方法来绘制线条 </script>
Canvas 圆形
arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
Canvas 文本
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等,各种形状可以自己定义不同的颜色
- createLinearGradient(x, y, x1, y1) - 创建线条渐变
- createRadialGradient(x, y, r, x1, y1, r1) - 创建一个径向/圆渐变
- addColorStop()方法指定停止颜色,必须使用两种或两种以上停止颜色,参数使用坐标来描述,可以是0至1.
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 创建渐变 var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 填充渐变 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>
Canvas - 图像
drawImage(image, x, y)
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
超链接标签
用户可以点击超链接实现跳转至其他页面,默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a>
属性:
- href:锚,用于设置目标文件的URL,也可以指向某个id号属性的元素,必填。
- target:用于设置目标文件的打开方式,默认在当前窗口打开。
- target="_self":当前窗口打开
- target="_blank":新建窗口打开
- target="_top":回到网站首页
- target="_parent":回到上一界面
列表标签
无序列表 ul>li
默认用实心圆点标识列表项
快捷键: ul>li*3
<ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>
有序列表 ou>li
默认使使用阿拉伯数字标识每条数据,可以使用start属性设置起始的值,默认为1
<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
列表嵌套,在已有列表中嵌套添加另一个列表
<ol> <li> 西游记 <ul> <li>孙悟空</li> <li>猪八戒</li> <li>沙和尚</li> </ul> </li> </ol>
表格标签<table>
表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下:
<table></table>:创建表格
属性:
- border:规定单元格边框
<caption>表名</caption>:表名
<tr></tr>:行标签,创建一行
<td></td>:列标签,创建一列
<!-- 创建表格标签,宽度200个像素,表框1,表格间距0 --> <table width="200px" border="1" cellspacing="0">
<caption>表名</caption>
<!-- 创建行标签 --> <tr> <!-- 行中创建单元格以显示数据 --> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> <tr> <td>张三</td> <td>20</td> <td>一(1)班</td> </tr> </table>
单元格合并
用于调整表格结构,分为跨行合并 和 跨列合并,合并之后需要删除被合并的单元格,保证表格结构完整。
单元格属性 | 作用 | 取值 |
---|---|---|
colspan | 跨列合并单元格 | 无单位数值 |
rowspan | 跨行合并单元格 | 无单位数值 |
<table border="1"> <tr> <th>姓名</th> <td>李小明</td> </tr> <tr> <th rowspan="2">电话</th> <td>010-1234567</td> </tr> <tr> <td>13912321213</td> </tr> </table>
<table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> <!--跨越两列--> </tr> <tr> <td>李小明</td> <td>010-1234567</td> <td>13912321213</td> </tr> </table>
表单标签 <form> </form>
表单用于收集数据并提交给服务器,由表单元素和表单控件组成。表单元素允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单标签 使用<form> </from>来设置
属性:
- action:设置数据的提交地址
- method:设置数据的提交方式,默认为get方式,可以设置为post
- onsubmit:设置表单数据提交时的触发事件的执行函数(事件绑定中详细介绍)
<form action="" method="" onsubmit=""> <!--此处为表单控件--> </form>
输入元素 input
输入类型是由类型属性type定义。文本域的默认宽度是 20 个字符。
属性
- type:设置控件类型,如果值为"password"则表示密码不可见,如果为“text”则为普通文本
- text:普通文本
- password:密码,不可见
- radio:单选按钮
- checkbox:复选按钮
- submit / reset:提交和重置
- button:按钮
- color:选择颜色
- data:选择日期
- name:设置控件名称,最终与值一并发送给服务器
- value:设置控件的值
- placeholder:设置输入框中的提示文本
- maxlength:设置输入框中可输入的最大字符数
- checked:设置单选按钮或复选按钮的默认选中
- selected:设置下拉菜单的默认选中
- readonly:只读,就是不让输入
普通文本 type="text"
<label for="name">姓名:</label> <input type="text" id="name" readonly placeholder="请输入用户名" name="name">
密码 type="password"
<div> <label for="pass">密码:</label> <input type="password" id="pass" placeholder="请输入密码" name="pass"> </div>
单选按钮 type="radio"
<input type="radio" name="sex" value="1" checked readonly />男 <input type="radio" readonly name="sex" value="2" />女
复选按钮 type="checkbox"
<input type="checkbox" name="like" />编程 <input type="checkbox" name="like2" checked />游戏 <input type="checkbox" name="like3" />阅读
提交和重置 type="submit \ reset"
<input type="submit" value="注册" /> <input type="reset" disabled value="重置" />
按钮 type="button"
<input type="button" value="Hello world!">
输入多行文本内容
<textarea name="demo" id="demo" cols="30" rows="10"> 默认文本 </textarea>
下拉列表
下拉列表select,id要对应label的值
<option>中如果定义了selected属性,则会默认先选中它。
<select name="xl" id="xl"> <option value="1">大学</option> <option value="2">中学</option> <option value="3" selected>小学</option> </select>
最后融会贯通的运用一下表单元素
<!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> <form action="#"> <div> <label for="name">姓名:</label> <!-- 占位符 --> <input type="text" id="name" readonly placeholder="请输入用户名" name="name"> </div> <div> <label for="pass">密码:</label> <input type="password" id="pass" placeholder="请输入密码" name="pass"> </div> <div> <label for="xl">学历:</label> <!-- 下拉列表框元素 使用 option 设置列表项 value 是列表的值--> <select name="xl" id="xl"> <option value="1">大学</option> <option value="2">中学</option> <option value="3">小学</option> </select> </div> <div> <label for="sex">性别:</label> <!-- 单选按钮元素 相互排斥时,将 name 属性值设置为同一个--> <input type="radio" name="sex" value="1" checked readonly />男 <input type="radio" readonly name="sex" value="2" />女 </div> <div> <label for="like">爱好:</label> <input type="checkbox" name="like" />编程 <input type="checkbox" name="like2" checked />游戏 <input type="checkbox" name="like3" />阅读 </div> <div> <label for="demo">简介:</label> <!-- 输入多行多列文本内容 --> <textarea name="demo" id="demo" cols="30" rows="10"> </textarea> </div> <div> <input type="submit" value="注册" /> <input type="reset" disabled value="重置" /> </div> </form> </body> </html>
HTML属性
HTML可以设置属性,一般在开始标签中添加标签属性信息,属性总是以名称/值对的形式出现,比如:name="value"。
由于HTML每个标签都包含很多属性,菜鸟教程总结了常用标元素的属性 HTML 标签参考手册
在此列出用的最多的几个属性:
属性 | 描述 |
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(style) |
title | 描述了元素的额外信息(作为工具条使用) |
HTML全局属性
语义元素
语义元素能够清楚的描述其意义给浏览器和开发者。
许多现有网站都包含以下HTML代码: <div id="nav">,<div class="header">,或者 <div id="footer">,来指明导航链接,头部,以及尾部。
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
<header>元素:描述了文档的头部区域,在页面中可以使用多个<header>元素。
<nav>元素:定义页面导航链接
<article>元素:定义独立的内容,
<section>元素:定义文档中的节,比如章节、页眉、页脚或文档的其他部分。
<aside>元素:定义页面主区域之外的内容(比如侧边栏)
<footer>元素:描述了文档的底部区域
加载全部内容