前端基础：HTML-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端基础：HTML。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端基础：HTML

前言

即使再小的帆也能远航

一、初识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>1</h1>
<h6>6</h6>
<!--段落-->
<!--输入p，点击tab键，自动生成-->
<p>两只老虎</p>
<p>两只老虎</p>
<!--水平线-->
<hr />
<!--换行-->
跑得快<br />
跑得快<br/>
<!--字体样式-->
<strong>粗体</strong>
<em>斜体</em>
<br/>
<!--特殊符号-->
空    格
空&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
&copy;版权所有~兔兔
<!-- 特殊符号记忆方式  &  ; -->
</body>
</html>

三、图像、超链接、网页布局

1. 图像标签

img学习：
- src：图片地址
  相对地址（推荐使用），绝对地址
  …/ 上一级目录
- alt：加载失败时显示
- title：悬停文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!-- img学习：
src：图片地址
相对地址（推荐使用），绝对地址
../  --上一级目录
alt：加载失败时显示
title：悬停文字
-->
<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>
<!-- 使用name作为标记-->
<a name="top">top</a><br>
<!-- 锚链接
1. 需要一个锚标记
2. 跳转到标记
#
-->
<a href="#down">到底部</a><br>
<!-- a标签
href : 必填，表示要跳转到那个页面
target : 表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在自己的网页中打开
-->
<a href="path" target="目标窗口位置">链接的文本或图像</a>
<a href="1.我的第一个网页.html" target="_blank">点击跳转页面1</a><br>
<a href="1.我的第一个网页.html" target="_self">点击跳转页面1</a><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">down</a><br>
<!--邮件链接-->
<a href="mailto:2497502815@qq.com">点击联系我</a><br>
<!-- QQ推广-->
<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-->
<!--应用范围：试卷、问答...-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>c</li>
</ol>
<!--无序列表-->
<!-- ul、li-->
<!--应用范围：导航、侧边栏...-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>c</li>
</ul>
<!--自定义列表-->
<!--dl-->
<!--dt、dd-->
<!--应用范围：公司网站底部-->
<dl>
    <dt>列表名称</dt>
    <dd>fujian</dd>
    <dd>guangdong</dd>
    <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>
<!-- 音频和视频：
src : 资源路径
control : 控制条（有写就有）
autoplay : 自动播放
-->
<!--<video src="../resources/video/shipin.mp4" controls autoplay></video>-->
<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>
<!--readonly只读，disabled禁用，hidden隐藏-->
<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>
<!--文本框、密码、单选（需分组同组）、多选、按钮、下拉框、文本域、文件域-->
<!--常用方式：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="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. 表单应用