前端基础：HTML
前端基础：HTML
文章目录
- 前言
- 一、初识html
-
- 1. 课程先导
- 2. 课程目录
- 3. html5优势
- 4. W3C标准
- 5. 标签（超文本标记语言）
- 2. 网页基本信息
-
- 1. HTML基本结构
- 2. 我的第一个网页
- 二、网页基本标签
- 三、图像、超链接、网页布局
-
- 1. 图像标签
- 2. 超链接标签及应用
- 3. 行内元素和块元素
- 四、列表、表格、媒体元素
-
- 1. 列表标签
- 2. 表格标签
- 3. 媒体元素
- 4. 页面结构分析
- 5. iframe内联框架
- 五、表单及表单应用
-
- 1. 初识表单post和get提交
-
- 文本框、密码框、隐藏文本框、label标签、（圆形）单选框、（方形）多选框、按钮
- 2. 文本框和单选框
- 3. 按钮和多选框
- 4. 列表框、文本域和文件域
- 5. 搜索框、滑块和简单验证
- 6. 表单的应用
- 六、表单初级验证
-
-
- 小总结
-
- HTML总结
-
- 1. html的基本结构
- 2. 网页的基本标签
- 3. 图像标签
- +
- 5. 行内元素和块元素
- 6. 列表
- 7. 表格
- 8. 媒体元素
- 9. 网页的简单布局
- 10. 内联框架
- 11. 表单
- 12. 表单应用
- 13. 表单的初级验证
前言
即使再小的帆也能远航
一、初识html
1. 课程先导
前后端分离
html网页基本结构
css美化网页
js让网页动起来，实现交互行为
jQuery一个封装库
vue当下一种主流框架
2. 课程目录
- 初识HTML
- 网页基本标签
- 图像、超链接、网页布局
- 列表、表格、媒体元素
- 表单及表单应用
- 表单初级验证
3. html5优势
浏览器支持
市场需求
跨平台
4. W3C标准
- W3C
- 万维网联盟
- 国际中立性技术标准机构
- W3C标准包括
- 结构化标准语言：HTML、XML
- 表现标准语言：CSS
- 行为标准：DOM、ECMAScript
5. 标签（超文本标记语言）
成对：开放标签、闭合~~
单独：自闭合标签
2. 网页基本信息
- DOYTYPE声明
- title标签
- meta标签
1. HTML基本结构
html大标签内写代码
head头部
body主体
meta描述语言
title网页标题
2. 我的第一个网页
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head网页头部-->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来作SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="狂神说，西部开源">
<meta name="description" content="来这个地方可以学习Java">
<!-- title网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello world!
</body>
</html>
二、网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习title>
head>
<body>
<h1>1h1>
<h6>6h6>
<p>两只老虎p>
<p>两只老虎p>
<hr />
跑得快<br />
跑得快<br/>
<strong>粗体strong>
<em>斜体em>
<br/>
空 格
空 格
<br/>
>
<br/>
<
©版权所有~兔兔
body>
html>
三、图像、超链接、网页布局
1. 图像标签
- img学习：
- src：图片地址
相对地址（推荐使用），绝对地址
…/ 上一级目录 - alt：加载失败时显示
- title：悬停文字
- src：图片地址
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习title>
head>
<body>
<img src="../resources/image/1.jpg" alt="加载失败时显示" title="悬停文字" width="300" height="300">
body>
html>
2. 超链接标签及应用
- 文本超链接
- 图片超链接
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习title>
head>
<body>
<a name="top">topa><br>
<a href="#down">到底部a><br>
<a href="path" target="目标窗口位置">链接的文本或图像a>
<a href="1.我的第一个网页.html" target="_blank">点击跳转页面1a><br>
<a href="1.我的第一个网页.html" target="_self">点击跳转页面1a><br>
<a href="1.我的第一个网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="加载失败时显示" title="悬停文字" width="300" height="300">
a><br>
<a href="#top" >回到顶部a><br>
<a name="down">downa><br>
<a href="mailto:[email protected]">点击联系我a><br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2497502815&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2497502815:53" alt="你好，加我领取可爱小兔" title="你好，加我领取大巴掌"/>
a>
body>
html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚链接的使用</title>
</head>
<body>
<!-- 锚链接的使用-->
<a href="4.链接标签.html#down">到页面4底部</a>
</body>
</html>
- 页面间链接
- 从一个页面链接到另一个页面
- 锚链接
- 功能性链接
3. 行内元素和块元素
也叫行内标签（a、strong、em、img…）、块标签（p、h1-h6…）
四、列表、表格、媒体元素
1. 列表标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习title>
head>
<body>
<ol>
<li>Javali>
<li>Pythonli>
<li>cli>
ol>
<ul>
<li>Javali>
<li>Pythonli>
<li>cli>
ul>
<dl>
<dt>列表名称dt>
<dd>fujiandd>
<dd>guangdongdd>
<dt>位置dt>
<dd>福建dd>
<dd>广东dd>
dl>
body>
html>
2. 表格标签
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!-- 表格：
tr row,
th head,
td data
-->
<!--
rowspan 跨行（行合并）
colspan 跨列（列合并）
-->
<table border="1px">
<th>0</th><th>0</th><th>0</th><th>0</th>
<tr>
<th>1</th>
<td>1 1</td>
<td rowspan="2">1 2</td>
<td>1 3</td>
</tr>
<tr>
<th>2</th>
<td>2 1</td>
<!-- <td>2 2</td>-->
<td>2 3</td>
</tr>
<tr>
<th>3</th>
<td>3 1</td>
<td colspan="2">3 2</td>
<!-- <td>3 3</td>-->
</tr>
</table>
</body>
</html>
3. 媒体元素
- 视频video
- 音频audio
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习title>
head>
<body>
<audio src="../resources/audio/yinyue.mp3" controls >audio>
body>
html>
4. 页面结构分析
- header 头部
- footer 底部
- section 一块独立区域
- article 独立的文章内容
- aside 相关内容或应用（常用于侧边栏）
- nav 导航栏辅助内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析title>
head>
<body>
<header><h2>网页头部h2>header>
<section><h2>网页主体h2>section>
<footer><h2>网页底部h2>footer>
body>
html>
5. iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- iframe内联框架：
src : 引用页面地址
name : 框架标识名
w-h : 宽度高度
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
-->
<!--<iframe src="path" name="mainFrame"></iframe>-->
<iframe src="//player.bilibili.com/player.html?aid=725972711&bvid=BV13S4y1a7Bp&cid=583754239&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="" name="hello" frameborder="0" width="500px" height="300px"></iframe>
<a href="7.媒体元素.html" target="hello">点击跳转</a>
</body>
</html>
五、表单及表单应用
1. 初识表单post和get提交
<!-- method : 规定如何发送表单数据（提交方式）：post(较安全)|get-->
<!-- action : 表单提交的位置，可以是网站，也可以是一个请求处理地址-->
<!-- method -->
<form method="post" action="result.html">
</form>
文本框、密码框、隐藏文本框、label标签、（圆形）单选框、（方形）多选框、按钮
2. 文本框和单选框
<p>名字：<input type="text" name="username" placeholder="请输入用户名（提示信息）" required></p>
<p>密码：<input type="password" name="pwd"></p>
<p>隐藏的密码：<input type="password" hidden name="mima"></p>
<p>隐藏框：<input type="hidden" value="123456"></p>
<p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>性别：
<input type="radio" value="boy" name="sex" >男
<input type="radio" value="girl" name="sex" checked disabled>女
</p>
3. 按钮和多选框
<p>爱好：
<input type="checkbox" value="eat" name="hobby">吃
<input type="checkbox" value="drink" name="hobby">喝
<input type="checkbox" value="sleep" name="hobby" checked>睡
</p>
<p>按钮：
<input type="button" name="btn1" value="点击按钮">
<input type="image" src="../resources/image/1.jpg">
</p>
<p>
<input type="submit" value="准备提交">
<input type="reset" value="表单重置">
</p>
4. 列表框、文本域和文件域
<p>下拉框：
<select name="列表名称">
<option value="fj">福建option>
<option value="gd" selected>广东option>
<option value="nj">南京option>
select>
p>
<p>反馈（文本域）：
<textarea name="textarea" cols="30" rows="10">textarea>
p>
<p>文件域：
<input type="file" name="files">
<input type="button" value="上传文件" name="upload">
p>
<p>
<input type="submit" value="准备提交">
<input type="reset" value="表单重置">
p>
form>
5. 搜索框、滑块和简单验证
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册title>
head>
<body>
<form action="1.我的第一个网页.html" method="get">
<p>邮箱（邮件验证）：
<input type="email" name="email" >
p>
<p>URL:
<input type="url" name="url">
p>
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="10">
p>
<p>音量控制：
<input type="range" name="voice" min="0" max="100" step="20" >
p>
<p>搜索框：
<input type="search" name="search">
p>
form>
body>
html>
6. 表单的应用
readonly只读
disabled禁用
hidden隐藏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册title>
head>
<body>
<form action="1.我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username" value="qiaqia" maxlength="8" size="30" readonly>p>
<p>
<label for="pwd">密码：label>
<input type="password" name="pwd" id="pwd">
p>
<p>隐藏的密码：<input type="password" hidden name="mima">p>
<p>隐藏框：<input type="hidden" value="123456">p>
<p>
<label for="mark">你点我试试label>
<input type="text" id="mark">
p>
<p>
<label for="sex">性别：label>
<input type="radio" value="boy" name="sex" id="sex">男
<input type="radio" value="girl" name="sex" id="sex" checked disabled>女
p>
form>
body>
html>
六、表单初级验证
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册title>
head>
<body>
<form action="1.我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username" placeholder="请输入用户名（提示信息）" required>p>
<p>
<input type="submit" value="准备提交">
<input type="reset" value="表单重置">
p>
<p>正规邮箱：
<input type="email" name="fm_email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
p>
form>
body>
html>
小总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<!-- 表单form：
method : 规定如何发送表单数据（提交方式）：post(较安全)|get
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
-->
<!--文本框、密码、单选（需分组同组）、多选、按钮、下拉框、文本域、文件域-->
<!-- 文本输入框：input type="text"
value="" 默认初始值
maxlength="" 最长能写几个字符
size="" 文本框的长度
-->
<!-- 密码框 password-->
<!-- 单选框标签 radio
value 单选框的值
name 表示组
-->
<!-- 多选框 checkbox-->
<!-- -->
<!--readonly只读，disabled禁用，hidden隐藏-->
<!--placeholder输入框提示信息，required非空判断，pattern正则表达式-->
<form action="1.我的第一个网页.html" method="get">
<!-- value="qiaqia" maxlength="8" size="30" readonly-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名（提示信息）" required></p>
<p>密码：<input type="password" name="pwd"></p>
<p>隐藏的密码：<input type="password" hidden name="mima"></p>
<p>隐藏框：<input type="hidden" value="123456"></p>
<p>
<!--增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>性别：
<input type="radio" value="boy" name="sex" >男
<input type="radio" value="girl" name="sex" checked disabled>女
</p>
<p>爱好：
<input type="checkbox" value="eat" name="hobby">吃
<input type="checkbox" value="drink" name="hobby">喝
<input type="checkbox" value="sleep" name="hobby" checked>睡
</p>
<p>按钮：
<input type="button" name="btn1" value="点击按钮">
<input type="image" src="../resources/image/1.jpg">
</p>
<p>下拉框：
<select name="列表名称">
<option value="fj">福建</option>
<option value="gd" selected>广东</option>
<option value="nj">南京</option>
</select>
</p>
<p>反馈（文本域）：
<textarea name="textarea" cols="30" rows="10"></textarea>
</p>
<p>文件域：
<input type="file" name="files">
<input type="button" value="上传文件" name="upload">
</p>
<p>
<input type="submit" value="准备提交">
<input type="reset" value="表单重置">
</p>
<p>正规邮箱：
<input type="email" name="fm_email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>邮箱（邮件验证）：
<input type="email" name="email" >
</p>
<p>URL:
<input type="url" name="url">
</p>
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>音量控制：
<input type="range" name="voice" min="0" max="100" step="20" >
</p>
<p>搜索框：
<input type="search" name="search">
</p>
</form>
</body>
</html>
HTML总结
1. html的基本结构
2. 网页的基本标签
标题标签
段落
换行
水平线
注释
特殊符号
3. 图像标签
img
+
- 超链接
锚链接
功能性链接：邮箱、qq
5. 行内元素和块元素
6. 列表
有序列表
无序
自定义
7. 表格
th
tr行
td列
rowspan行合并（跨行）
colspan列合并（跨列）
8. 媒体元素
音频
视频
9. 网页的简单布局
头部
脚部
主体
10. 内联框架
iframe
11. 表单
form
文本框
密码框
单选框
多选框
按钮
下拉框
滑块
…
文本域、文件域
12. 表单应用
readonly只读
disabled禁用
hidden隐藏
13. 表单的初级验证
placeholder输入框提示信息
required非空判断
pattern正则表达式