HTML
1. 初识HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML命令可以说明文字，图形、动画、声音、表格、链接等
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
-
HTML 发展史
https://blog.csdn.net/grapelove01/article/details/80117384
-
HTML 的优势
- 世界知名浏览器厂商对HTML5的支持
- 微软
- 苹果
- Opera
- Mozilla
- 市场的需求
- 跨平台
- 世界知名浏览器厂商对HTML5的支持
-
W3C标准
-
World Wide Web Consortium(万维网联盟)
-
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
-
https://www.w3.org/
-
https://www.chinaw3c.org/
-
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
-
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
- …
-
HTML基本结构:
… 网页头部， … 主体部分 ...等成对出现的标签称为开放标签；有些单独出现的标签称为自闭和标签,如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个网页标签</title> </head> <body> 我的第一个网页 </body> </html> -
网页基本信息
-
DOCTYPE声明
-
<
>标签 - 标签
-
-
<!-- 注释信息 CTRL+/ --> <!-- DOCTYPE：告诉浏览器，我们使用何种规范 --> <!-- html所有内容必须在html标签内部，否咋无法显示 --> <!DOCTYPE html> <html lang="en"> <!--head 网页头部信息--> <head> <!-- meta 标签 ，描述性标签，用来描述我们网站的一些信息 --> <!-- meta 标签，一般用来做SEO --> <meta charset="UTF-8"> <meta name="keywords",content="我在摸鱼加学习"> <meta name="description",content="学好可以讨饭吃，没学好就去要饭"> <!-- title 网页标题 --> <title>我的第一个网页标签</title> </head> <!-- 网页主体部分 --> <body> Hello,world! 这是一个没内涵的网站！ </body> </html>
2. 网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号标签
<!DOCTYPE html>
<br lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<br>
<!--标题标签，-->
<!--在HTML中，一共有六级标题标签，h1~h6-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!--段落标签 p+tab键-->
<p>徘徊着的 在路上的</p>
<p>你要走吗 Via Via</p>
<p>
易碎的 骄傲着
</p>
<p>
那也曾是我的模样
</p>
<p>
沸腾着的 不安着的
</p>
<p>
你要去哪 Via Via
</p>
<!--水平线标签-->
<hr/>
不出意外，这里会有个水平线 <br>
<!--换行标签-->
平凡之路<br/>
平凡人生<br/>
易碎的<br/>
<!--字粗体，斜体-->
<h1>字体样式标签</h1>
粗体 <strong>i love you</strong>
斜体 <em>i love you</em>
<br/>
<!--特殊符号-->
空 格：<br/>
空 格:
<br/>
<!--大于号-->
>
<br/>
<!--小于号-->
<
<br/>
<!--版权符号-->
©版权所有
<br/>
<!--
特殊符号记忆方式
& ；
后面均有显示
也可通过度娘查询
-->
</body>
</html>
3. 图像、链接、超链接标签、网页布局
-
常见的图像格式
- JPG
- GIF
- PNG
- BMP 位图
- …
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <!-- img学习 src 图片地址(必填) 相对地址（推荐使用）和绝对地址， 一般不推荐使用绝对地址 ../ 上一级目录 各项之间不用加逗号，而是加空格 --> <img src="../source/image/双亲委派机制.jpg" alt="未找到图片" title="双亲委派机制" width="200" height="150"/> </body> </html> -
链接标签
- 文本超链接
- 图像超链接
-
超链接
- 页面间链接
- 从一个页面链接到另一个页面
- 锚链接
- 功能性链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <a name="top">顶部</a> <br/> <a name="down">down</a> <br/> <!-- 链接标签 a+tab键 href：必填，表示要跳转到那个页面 target: 表示窗口在哪里打开 _blank 在新标签中打开 _parent _self 在自己的页面打开 _top --> <a href="https://music.163.com/#/song?id=1878225963"target="_blank"> 点击我跳转到页面一</a> <br/> <a href="https://www.baidu.com"target="_parent">点击我跳转到页面2</a> <br/> <a href="https://www.bilibili.com/video/BV1Co4y1k7aC?spm_id_from=333.999.0.0"target="_self">点击我跳转到页面3</a> <br/> <a href="我的第一个网页标签.html"target="_top"> <img src="../source/image/双亲委派机制.jpg" alt="未找到图片" title="双亲委派机制" width="200" height="150"/> </a> <p> <a href="我的第一个网页标签.html"> <img src="../source/image/双亲委派机制.jpg" alt="未找到图片" title="双亲委派机制" width="200" height="150"/>"></a> </p> <p> <a href="我的第一个网页标签.html"> <img src="../source/image/双亲委派机制.jpg" alt="未找到图片" title="双亲委派机制" width="200" height="150"/>"></a> </p> <p> <a href="我的第一个网页标签.html"> <img src="../source/image/双亲委派机制.jpg" alt="未找到图片" title="双亲委派机制" width="200" height="150"/>"></a> </p> <p> <a href="我的第一个网页标签.html"> <img src="../source/image/双亲委派机制.jpg" alt="未找到图片" title="双亲委派机制" width="200" height="150"/>"></a> </p> <!-- 锚链接 --> <a href="#top">回到顶部</a> <!-- 功能性链接 邮件型链接 mailto: --> <a href="mailto:2811685943@qq.com">点击联系我</a> <br/> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/> </a> <br/> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2811685943&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:2811685943:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> <br/> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2811685943&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:2811685943:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </body> </html> - 页面间链接
-
行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- (p、h1-h6…)
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- (a . strong . em …)
- 块元素
4. 列表、表格、媒体标签
-
列表标签
- 什么是列表
- 列表就是西悉尼资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，一边浏览器能更快捷地获得相应的信息
- 列表的分类
- 无序列表
- 有序列表
- 定义列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!--无序列表 应用范围:导航、侧边栏........ --> <ul> <li>java</li> <li>python</li> <li>c</li> <li>c++</li> <li>c#</li> </ul> <hr/> <!--有序列表 应用范围： 试卷、问答...... --> <ol> <li>java</li> <li>python</li> <li>c</li> <li>c++</li> <li>c#</li> </ol> <hr/> <!--水平分割线--> <!--自定义列表 dl:标签 dt:列表标题 dd:列表内容 应用范围：公司网站底部 --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>python</dd> <dd>Linux</dd> <dd>c/c++</dd> <dd>c#</dd> <dt>位置</dt> <dd>西安</dd> <dd>上海</dd> <dd>北京</dd> <dd>深圳</dd> <dd>广州</dd> </dl> </body> </html> - 什么是列表
-
表格标签
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!--表格学习table 行标签：tr 列标签：td --> <table border="1"bgcolor="#a52a2a"> <tr> <td >id</td> <td>姓名</td> <td>年龄</td> <td>电话</td> </tr> <tr> <td>0001</td> <td>tom</td> <td>3</td> <td>1112</td> </tr> <tr> <td>0002</td> <td>jerry</td> <td>5</td> <td>18798765432</td> </tr> <tr> <!-- 跨列 colspan --> <td colspan="4">猫和老鼠 tom and jerry</td> </tr> <tr> <!-- 跨行 rowspan --> <td >id</td> <td>姓名</td> <td>年龄</td> <td>电话</td> </tr> <tr> <td rowspan="2">0001</td> <td>tom</td> <td>3</td> <td>1112</td> </tr> <tr> <td>jerry</td> <td>5</td> <td>18798765432</td> </tr> </table> </body> </html> - 为什么使用表格
-
视频和音频
- 视频元素
- video
- 音频元素
- audio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body> <!--音频和视频学习 src 资源路径 controls ：控制条 auto play 自动播放 --> <!--自动播放--> <audio controls autoplay> <source src="../source/audio/obj_w5rDlsOJwrLDjj7CmsOj_10852075909_6322_d9e8_5202_e21c5ad8d1ed39b82375a506a0dc9b10.m4a"> </audio> <hr/> <audio controls> <source src="../source/audio/obj_w5rDlsOJwrLDjj7CmsOj_10852075909_6322_d9e8_5202_e21c5ad8d1ed39b82375a506a0dc9b10.m4a"> </audio> <hr/> <video controls preload="auto" width="300" height="200"> <source src="../source/video/寄明月.mp4" > </video> </body> </html> - 视频元素
-
页面结构分析
元素名 描述 header 标题头部区域的内容(用于页面或页面中的一块区域) footer 标记脚部区域的内容(用于整个页面或页面中的而一块区域) section web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> </head> <body> <header> <h2>网页头部</h2> </header> <hr/> <section> ddknsk <hr/> dnknn </section> <hr/> <footer> <h2>网页脚部</h2> </footer> </body> </html> -
iframe 内联框架
<iframe src="path" name="mainFrame"> </！-- path 引用页面地址 mainFrame 框架标识名 --> </iframe><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe内联框架</title> </head> <body> <!-- iframe内联框架 src：必填属性 w-h 宽度和高度 --> <iframe src="//player.bilibili.com/player.html?aid=463018610&bvid=BV1YL411x7Y7&cid=411799499&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe内联框架</title> </head> <body> <!-- iframe内联框架 src：必填属性 w-h 宽度和高度 --> <iframe src="" name = "hello" frameborder="0" width="200px" height="100px"></iframe> <a href="我的第一个网页标签.html" target="hello">点击跳转</a> </body> </html>
5. 表单
5.1 表单语法,初始post和get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签post和get提交</title>
</head>
<body>
<h1>注册</h1>
<!--
表单form
action ：必填选项，表单提交的位置，可以是一个网站，也可以是一个请求处理地址
method：get,post表单的两种提交方式
get方式,我们可以在url中看到我们提交的信息,不安全,但高效
post方式,比较安全,可以传输大文件
-->
<form action="我的第一个网页标签.html" method="post">
<!-- 文本输入框 <input type="text"> -->
<p>名字：<input type="text" name="username"></p>
<!-- 密码框 <input type="password"name="psw"> -->
<p>密码: <input type="password"name="psw"> </p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
5.2 表单元素格式,文本框和单选框
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbook、radio、submit、reset、file、hidden、image和button，默认为text。 |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。但type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签post和get提交</title>
</head>
<body>
<h1>注册</h1>
<!--
表单form
action ：必填选项，表单提交的位置，可以是一个网站，也可以是一个请求处理地址
method：get,post表单的两种提交方式
get方式,我们可以在url中看到我们提交的信息,不安全,但高效
post方式,比较安全,可以传输大文件
-->
<form action="我的第一个网页标签.html" method="post">
<!-- 文本输入框 <input type="text">
value="好好学习" 默认初始值
maxlength="8" 最长能写几个字符
size="20" 文本框长度
-->
<p>名字：<input type="text" name="username" ></p>
<!-- 密码框 <input type="password"name="psw"> -->
<p>密码: <input type="password"name="psw"> </p>
<!-- 单选框
input type="radio"
value:单选框的值
name：表示组
-->
<p>性别:
<input type="radio"value="boy" name="sex" />男
<input type="radio"value="irl"name="sex"/> 女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
5.3 按钮和多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签post和get提交</title>
</head>
<body>
<h1>注册</h1>
<!--
表单form
action ：必填选项，表单提交的位置，可以是一个网站，也可以是一个请求处理地址
method：get,post表单的两种提交方式
get方式,我们可以在url中看到我们提交的信息,不安全,但高效
post方式,比较安全,可以传输大文件
-->
<form action="我的第一个网页标签.html" method="post">
<!-- 文本输入框 <input type="text">
value="好好学习" 默认初始值
maxlength="8" 最长能写几个字符
size="20" 文本框长度
-->
<p>名字：<input type="text" name="username" ></p>
<!-- 密码框 <input type="password"name="psw"> -->
<p>密码: <input type="password"name="psw"> </p>
<!-- 单选框
input type="radio"
value:单选框的值
name：表示组
-->
<p>性别:
<input type="radio"value="boy" name="sex" />男
<input type="radio"value="irl"name="sex"/> 女
</p>
<!-- 多选框
input type="checkbox"
-->
<p>爱好：
<input type="checkbox"value="足球"name="hobby">足球
<input type="checkbox"value="篮球"name="hobby">篮球
<input type="checkbox"value="乒乓球"name="hobby">乒乓球
<input type="checkbox"value="羽毛球"name="hobby">羽毛球
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图形按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮：
<input type="button"value="上学"name="btn1">
<input type="button"value="睡觉"name="btn2">
<input type="image"src="../source/image/双亲委派机制.jpg" width="10px"height="10px">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
5.4 列表框、文本框、文件域
<!-- 下拉框和列表框
默认选中 selected-->
<p>国家:
<select name="列表" >
<option value="CHN" >CHN </option>
<option value="US"> US </option>
<option value="UK"selected> UK</option>
<option value="RUS">RUS </option>
</select>
</p>
<!-- 文本域
cols="30" rows="10"
-->
<p>反馈：
<textarea name="textarea" id="" cols="30" rows="10">
文本框
</textarea>
</p>
<!-- 文件域
input type="file"name="myfiles"
-->
<p>文件域：
<input type="file"name="myfiles">
<input type="button"name="upload" value="上传">
</p>
5.5 搜索框滑块和简单验证
<!-- 邮件验证 -->
<p>邮箱：
<input type="email"name="email">
</p>
<!-- url验证 -->
<p>url:
<input type="url" name="url">
</p>
<!-- 数字验证 -->
<p>商品数量
<input type="number" name="num"max="100"min="0"step="1">
</p>
<!-- 滑块
input type="range"
-->
<p>滑块：
<input type="range"min="0"max="100"step="1"name="voice">
</p>
<!-- 搜索框 -->
<p>搜索框：
<input type="search"name="sear">
</p>
5.6 表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
<!-- 增强鼠标的可用性 -->
<label for="mark">点我锁定mark</label>
<input type="text",name="text"id="mark">
5.7 表单初级验证
-
常用方式
-
placeholder 提示信息，用在所有的输入框中
<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p> -
pattern 正则表达式
<!-- 常用正则表达式 https://blog.csdn.net/qianhaohong/article/details/53435253 --> <p>自定义邮箱： <input type="text"name="zidingyizzhengzebiaodashi"pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p> -
required 非空判断,用在所有的输入框中
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
-
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
