HTML概述
HTML ,CSS , JavaScript, JQuery, Vue 的关系
- HTML可以写一个简单的前端，但是很丑，所以需要CSS对HTML进行美化
- HTML是静态的。JavaScript可是使页面动起来，产生交互效果
- JavaScript原生代码写起来复杂。JQuery是封装JavaScript的库，把复杂的JavaScript封装，易于操作JavaScript
- Vue是主流的前端框架
学习HTML的重心是表单，不要搞混重心
我们一般在网页右键，选择【检查】，学习HTML
HTML的标准交给W3C来做
HTML结构
HTML基本信息
<!-- 段落标签，p按住tab键, -->
<p>The HTML <p> element defines a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!-- 换行<br> -->
<!-- 水平线标签 <hr> -->
<hr>
<!-- 字体样式标签 -->
粗体: <strong>i love you</strong>
斜体: <em>i love you</em>
<!-- 特殊符号，也就是转义符号 -->
图像标签
超链接标签以及应用
超链接可以从一个连接跳转到另一个连接，也可以作为锚链接，跳转到页面的特定地方，可以作为页面目录的标签
锚链接
锚链接
1. 需要一个锚标记 <a href="#top">跳转到name=top的页面</a>
2. 跳转到标记 <a name="top">顶部</a>
<!-- 使用a标签做了一个name标记,标记为top, 我们可以通过标记name中的top跳转页面 -->
<a name="top">顶部</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!--
锚链接
1. 需要一个锚标记 <a href="#top">跳转到name=top的页面</a>
2. 跳转到标记 <a name="top">顶部</a>
-->
<a href="#top">跳转到name=top的页面</a>
行元素与块元素
块元素是一个标签独占一行，比如标题和段落标签、
行元素，多个行元素在一行
列表标签
有序列表
<!--有序列表 order lists 也就是 ol 里面的标签都用list 也就是li-->
这是一个有序列表
<ol>
<li>苹果</li>
<li>华为</li>
<li>小米</li>
</ol>
无序列表
<!--无序列表 Unordered lists 也就是 ul 里面的标签都用list 也就是li-->
这是一个无序列表
<ul>
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
这是一个自定义列表
<!--自定义列表 Description Lists 也就是 dl -->
这是自定义列表
<dl>
<!-- Defines a term 定义项目（也就是题目） -->
<dt>学科</dt>
<dd>Java</dd>
<dd>C</dd>
<dd>C++</dd>
<dt>品牌</dt>
<dd>苹果</dd>
<dd>华为</dd>
<dd>小米</dd>
</dl>
表格
表格 table
行 table row tr
列 table data td
<!--表格 table
行 table row tr
列 table data td
-->
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨行 colspan
<table border="1px">
<tr>
<!-- 跨行 colspan -->
<td colspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
跨列 rowspan
<table border="1px">
<tr>
<!-- 跨列 rowspan -->
<td rowspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
视频和音频
音频和视频
进度条 controls
自动播放 autoplay
<!--
音频和视频
进度条 controls
自动播放 autoplay
-->
<audio src="resources/audio/L1朗读.mp3" controls ></audio>
<video src="resources/video/复习警告.flv" controls autoplay></video>
网页结构
比较重要是 头部header 脚部footer 侧边栏nav 其他作为了解
这样写结构更加明确，方便css进行标记
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
内联标签
内联网页就是在一个网页里面显示另一个网页，比如可以嵌入一个百度网页
<body>
内联网页就是在一个网页里面显示另一个网页，比如可以嵌入一个百度网页
<br>
<iframe src="https:baidu.com"></iframe>
</body>
表单
get方式提交：我们可以在url中看到我们提叫的的信息，不安全
post方式提交：比较安全，适合传输大文件
<!-- 表单form -->
<form action="html1-标记.html" method="get">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
</form>
表单的属性
type中 value是默认初始值
type中 maxlength 是最大长度
type中 文本框的大小
<form action="html1-标记.html" method="get">
<p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
</form>
单选框
单选框，注意单选框name相同才能多选一，默认选中写checked
input type="radio" value: 表示框的值
name: 表示分的组，注意，相同组选一个，不同组可以都选
<!-- 表单form -->
<form action="html1-标记.html" method="get">
<p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<!-- 单选框，注意单选框name相同才能多选一
input type="radio"
value: 表示框的值
name: 表示分的组，注意，相同组选一个，不同组可以都选
-->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
</form>
多选框
多选框，input type="checkbox" 默认选中写checked
<!-- 表单form -->
<form action="html1-标记.html" method="get">
<p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<!-- 单选框，注意单选框name相同才能多选一
input type="radio"
value: 表示框的值
name: 表示分的组，注意，相同组选一个，不同组可以都选
-->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!-- 多选框，input type="checkbox" -->
爱好：
<input type="checkbox" value="sleep" name="hobby" />睡觉
<input type="checkbox" value="code" name="hobby" />敲代码
<input type="checkbox" value="chat" name="hobby" />聊天
<input type="checkbox" value="game" name="hobby" />游戏
</p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
</form>
按钮
<input type="button" name="btn1" value="点击变帅">
<form action="html1-标记.html" method="get">
<p>用户名：<input type="text" name="username" value="zn" maxlength="8" size="12"></p>
<p>密码：<input type="password" name="password"></p>
<p>
<!-- 单选框，注意单选框name相同才能多选一
input type="radio"
value: 表示框的值
name: 表示分的组，注意，相同组选一个，不同组可以都选
-->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!-- 多选框，input type="checkbox" -->
爱好：
<input type="checkbox" value="sleep" name="hobby" />睡觉
<input type="checkbox" value="code" name="hobby" />敲代码
<input type="checkbox" value="chat" name="hobby" />聊天
<input type="checkbox" value="game" name="hobby" />游戏
</p>
<p>
<!-- 按键 -->
<input type="button" name="btn1" value="点击变帅">
</p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
</form>
图标按键
图片按钮,和submit的效果一样
<!-- 图片按钮,和submit的效果一样 -->
<input type="image" src="https://scpic.chinaz.net/Files/pic/icons128/7903/w4.png">
下拉框
下拉框select，中间的每一项是由option组成
<form action="html1-标记.html" method="get">
<p>
<!-- 下拉框select，中间的每一项是由option组成 -->
国家
<select name="列表名称">
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Japan">日本</option>
</select>
</p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
</form>
文本域
<p>
<!-- 文本域，cols能显示有多少列，rows表示显示的行数 -->
<textarea cols="30" rows="10">
这里是默认填入的内容
</textarea>
</p>
文件域
<p>
<!-- 文件域 -->
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
发现表单的东西都是需要name作为上传的键
邮箱
<p>
<!-- 邮箱验证 -->
邮箱：
<input type="email" name="email">
</p>
<p>
<!-- url -->
url:
<input type="url" name="url">
</p>
<p>
<!-- 数字 -->
商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<p>
<!-- 滑块 input type="range" -->
音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
<!-- 搜索框 -->
搜索：
<input type="search" name="search">
</p>
表单的应用
readonly 只读
disable 禁用
hidden 隐藏
表单的验证
为什么浏览器的表单需要验证
- 减轻服务器的压力
- 使表单数据安全
placeholder 用于提示
<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
required 说明元素不能为空，在提交时候弹出不能为空
<p>用户名：<input type="text" name="username" required></p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>
pattern正则表达式
用到正则可以取网上查，我自己找了一个github的https://github.com/cdoco/common-regex
<p>
正则表达式验证邮箱：
<input type="email" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>
<p>
<input type="submit" name="提交">
<input type="reset" name="清空">
</p>