1、初识HTML
2.、基本网页标签
3.、列表、表格和媒体元素
4、表单、表单验证

1、初识HTML

1.1 前端技术栈

HTML：超文本标记语言，网页里显示的图片、音频资源等都可以与html文本关联起来，浏览器通过渲染html文本给用户呈现网页；
CSS：通过CSS可以美化网页；
JavaScript：通过JS可以使我们的网页动起来，提升交互性；
JQuery：直接写JS比较麻烦，JQuery封装了JS；
Vue：前后端分离用的一个框架。

1.2 html概述

HTML全称Hyper Text Markup Language，是超文本标记语言，网页里显示的图片、音频资源等都可以与html文本关联起来，浏览器通过渲染html文本给用户呈现网页；
所谓的超文本，是指文字、图片、音频、视频、动画等资源；
目前HTML版本使用较多的是HTML5，CSS用的较多的是CSS3版本；

1.3 html基本结构

一个简单的demo：

DOCTYPE声明：告诉浏览器我们要是用什么规范，如这个例子是使用html规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="落风的落，个人博客，吴康">
    <meta name="description" content="吴康的个人博客，比较无聊。">
    <title>吴康的博客</title>
</head>
<body>
    今天晚上有点冷！
</body>
</html>

html注释写法，对应的快捷键：ctrl + /

1	<!-- 注释内容 -->

html文件的结构分为两部分：网页头部和主体部分。

网页头部

<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta 一般用来做seo   -->
    <meta charset="UTF-8">
    <meta name="keywords" content="落风的落，个人博客，吴康">
    <meta name="description" content="吴康的个人博客，比较无聊。">
    <!--  title网页标题，在浏览器标签上显示-->
    <title>吴康的博客</title>
</head>

主体部分

<body>
    <!-- body代表网页主体-->
    今天晚上有点冷！
</body>

2、基本网页标签

2.1基本标签

网页的内容是由以下几大类标签对应的内容组成的：标题标签、段落标签、换行标签、水平线标签、字体样式标签、注释和特殊符号。

html文本不识别换行符和空格符，如果想体现换行需要使用段落标签。

换行采用自闭和标签的形式，比段落标签行距更紧凑。

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>跑的快</p>
<p>很快</p>

<!--换行标签-->
跑的非常快<br/>
很快<br/>

<!--水平线标签-->
<hr/>

<!--粗体，斜体-->
<strong>粗体</strong>
<em>斜体</em>
<br/>

<!--特殊符号-->
空格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
<br/>
<p>大于号:&gt;</p>
<p>小于号:&lt;</p>
<p>版权符号:&copy;</p>吴康所有

图片标签

src是必选项，其他为可选项；
src建议使用相对路径；
除了alt、title等可选项外，还有很多其他可选项，输入空格有提示。

<body>
<!--img标签
src 图片地址 必填
alt 加载失败显示的文字 必填
title 悬停时显示的文字
title="悬停文字"
width="300"
height="300"
-->
<img src="../resource/images/类对象.png" alt="二营长" 
     title="悬停文字" width="300" height="300"/>

</body>

2.2 链接标签

1跳转到其他页面，也可以嵌套图片变成点击图片跳转：<a href="path" target="目标窗口位置">链接文本或图像</a>

href:必填，表示要跳转到那个页面
target:表示窗口在哪里打开
- _blank 在新标签中打开
- _self 在自己的网页中打开

2跳转到页面的某位置——锚链接

通过name做一个标记，如<a name="top">顶部</a>
使用超链接跳转，格式为#标记名如：<a href="#top">回到顶部</a>

3功能性链接

邮箱 <a href="mailto:951273629@qq.com">点击通过邮箱联系我</a>
qq小窗口

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--文字超链接-->
<a name="top_wukang">顶部</a>
<a href="https://www.baidu.com"target="_self">点我跳转到百度</a>
<a href="图像标签.html" target="_blank"> 点我跳转到图像页面</a>

<!--图像超链接-->
<br/>
<a href="https://www.baidu.com"target="_self">
    <img src="../resource/images/类对象.png" alt="加载失败" title="去百度"/>
</a>


<!--页面内的跳转 锚链接-->
<br/>
<a href="#top_wukang"> 回到本页顶部</a>
<!--页面外的跳转 锚链接-->
<br/>
<a href="网页02.html#down">回到网页02的底部</a>

<!--功能性链接
邮件链接:mailto:
-->
<br/>
<a href="mailto:951273629@qq.com">点击联系我</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=951273629&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:951273629:53" alt="点击这里QQ聊天" title="点击这里QQ聊天"/>
</a>
</body>
</html>

3、列表、表格和媒体元素

3.1 列表和表格

列表分为有序列表、无序列表、自定义列表。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表示意</title>
</head>
<body>
<!--有序列表 order list-->
<ol>
    <li> 数据结构</li>
    <li> 操作系统</li>
    <li> 计算机网络</li>

</ol>

<!--无序列表 unordered list-->
<ul>
    <li> 数据结构</li>
    <li> 操作系统</li>
    <li> 计算机网络</li>
</ul>

<!--自定义列表-->
<dl>
    <dt> java学习路线</dt>
    <dd> 数据结构</dd>
    <dd> 操作系统</dd>
    <dd> 计算机网络</dd>
</dl>

</body>
</html>

表格：table；行：tr；列：td；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--  表格table
   行 tr
   列 td
   border：加边框 宽度为1px
   colspan="3" 跨列 跨了三列
   rowspan="2" 跨行 跨了三行
-->
<table border="1px">
    <!-- 第一行-->
    <tr>
        <!--colspan夸列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <!-- 第二行-->
    <tr>
        <!--rowspan夸行-->
        <td rowspan="2"> </td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <!-- 第三行-->
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>

    <!-- 第四行-->
    <tr>
        <!--rowspan夸行-->
        <td rowspan="2">风清扬</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <!-- 第五行-->
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

</table>
</body>
</html>

3.2 视频、音频

音视频示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视频学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls自动播放
autoplay 自动播放
-->
<video src="../resource/video/GH012928.MP4" controls autoplay width="1000" height="800"></video>
<audio src="../resource/audio/失去爱情的摩托车手.mp3" controls></audio>
</body>
</html>

4、表单

4.1 表单语法

表单form参数

method: 规定如何发送表单数据常用值：get post。
- get方式可以在url中看到我们的提交信息，不安全,高效
post方式提交比较安全,可以传输大文件
- 在实际网页开发中通常采用post方式提交表单数据
action 表单提交的位置，可以是网站也可以是一个请求处理地址

input标签的参数

按钮标签

<input type=”button” 普通按钮
<input type=”image” 图片按钮
<input type=”submit” 提交按钮
<input type=”reset” 清空按钮

表单的语法

<form method="post" action="网页01.html">
    <p>名字：<input name="name" type="text" > </p>
    <p>密码：<input name="pass" type="password" > </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

4.2 13个表单元素

文本框

<!--文本输入框input type="text";value="大帅比" 默认值
maxlength="8" 最大输入字符长度;size="30" 文本框长度-->
<p>名字 
	<input type="text" name="username" value="大帅比" maxlength="8" size="30"/>
</p>

密码框

<!--    密码框 输入会出现圆黑点-->
<p>密码 
    <input type="password" name="password">
</p>

单选按钮

<!--单选框 input type="radio";value:单选框的值;name 表示组别-->
<p>性别
    <input type="radio"value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

多选框

<!--多选框 input type="checkbox"
name：复选框名称(必填)，一组的名称需要相同
checked：复选按钮选中状态
value：复选框的值 -->
<p>爱好
    <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>

下拉列表

<!-- 列表框下拉框-->
<!--option：选项-->
<p>下拉框
    <select name="列表名称" id="">
        <option value="china" >中国</option>
        <option value="india">印度</option>
        <option value="England" selected>英国</option>
        <option value="japan">日本</option>
    </select>
</p>

按钮

<!--  提交按钮-->
<p>
    普通按钮:<input type="button" name="btn1" value="点击变长"/>
    图片按钮<input type="image" src="../resource/images/类对象.png">
</p>
<p>
    提交按钮<input type="submit" value="注册">
    重置按钮<input type="reset" value="重新输入">
</p>

多行文本域

<!--textarea 文本域, cols 列字符, rows 行数-->
<p>反馈:
    <textarea name="textarea" cols="100" rows="10" >
        文本内容
    </textarea>
</p>

文件域

在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据
分为多部分提交。未来文件上传和下载会详细讲解，现在了解即可！enctype：表单编码属性

<form action="" method="post" enctype="multipart/form-data">
    <p>
    <!--type="file" 文件域-->
    <input type="file" name="files" />
    <input type="submit" name="upload" value="上传" />
    </p>
</form>

邮箱验证

会自动验证Email地址格式是否正确
1
邮箱:<input type="email" name="email"/>

网址验证

会自动验证URL地址格式是否正确

1	请输入你的网址:<input type="url" name="userUrl"/>

数字验证

<!--数字 min：最小值  max：最大值  step：步长-->
<p>数字:
    <input type="number" name="number" max="100" min="0" step="10"/>
</p>

滑块

<!--滑块 type值为range即为滑块-->
<p>音量滑块
    <input type="range" min="0" max="100" step="1" name="range">
</p>

搜索框

<!--搜索框-->
<p>搜索
    <input type="search" name="search" />
</p>

4.3 表单的初级验证

隐藏域只读禁用

在某些注册页面或本图片中订单信息页面，必须同意一些条款按钮才能使用等等。

隐藏：hidden在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
只读：readonly
禁用：disabled

<!--文本输入框 只读-->
<p>名字 <input type="text" name="username" value="吴康" maxlength="8" size="30" readonly/></p>
<!--密码框 隐藏-->
<p>密码 <input type="password" name="password" hidden/></p>
<!--提交按钮 禁用-->
<input type="submit" disabled value="保存" >

增强鼠标可用性

增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上。

<!--它的for属性对应的id与表单元素id一致-->
<p>
    <label for="only_wk">点击文本</label>
    <input type="text"  id="only_wk"/>
</p>

提示信息非空判断正则表达式

placeholder 提示语默认显示，当文本框中输入内容时提示语消失
required 规定文本框填写内容不能为空，否则不允许用户提交表单
pattern 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<form method="get" action="网页01.html">
    <!--提示信息 placeholder-->
    <p>
        姓名<input type="text" name="userName" placeholder="请输入姓名"/>
    </p>
    <!--要求不能为空 required-->
    <p>
        姓名<input type="text" name="username" required/>
    </p>
    <!--符合正则表达式 pattern 需要百度格式-->
    <p>
        文本<input type="text" name="tel" required pattern="^1[358]\d{9}" />
    </p>
    <p>
        <input type="submit"  name="Button" value="提交"/>
    </p>

</form>

4.4 表单验证的练习

人人网注册界面练习

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习 人人网</title>
</head>
<body>
    <form method="post" action="网页01.html">
        <p><strong>人人网界面练习</strong></p>
        <img src="../resource/images/人人网.png" alt="人人网图标"
             title="悬停" width="300" height="80"/><br/>
        <p>
            人人网，中国 &nbsp; <strong>最真实、最有效</strong>&nbsp;的社会平台，
            加入人人网，找回老朋友，结交新朋友。
        </p>
        电子邮箱：<input type="email" name="emil" maxlength="20" size="30" placeholder="请输入邮箱" required/><br/>
        设置密码：<input type="password" name="psw" maxlength="20" size="30" placeholder="请输入密码" required/><br/>
        真实姓名：<input type="text" name="userName" maxlength="10" size="30" placeholder="请输入姓名" required/><br/>
        性别：<input type="radio" value="boy1" name="sex1" />男
            <input type="radio" value="girl1" name="sex1"/>女<br/>
        生日：<select name="年">
                <option value="1991" selected>1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
            </select>年
        <select name="月">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11" selected>11</option>
            <option value="12">12</option>
        </select>月
        <select name="日">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">19</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30" selected>30</option>
        </select>日<br/>

        职业：<select name="职业">
            <option value="选择" disabled selected>请选择身份 </option>
            <option value="医生">医生</option>
            <option value="老师">老师</option>（非常重要）
        </select><br/>
        验证码：<input type="text" name="验证码" placeholder="请输入验证码" required/> <br/>
        <input type="submit" value="立即注册"><br/>
        
    </form>
</body>
</html>

落风的风

HTML5笔记（狂神）

1、初识HTML

1.1 前端技术栈

1.2 html概述

1.3 html基本结构

2、基本网页标签

2.1基本标签

2.2 链接标签

3、列表、表格和媒体元素

3.1 列表和表格

3.2 视频、音频

4、表单

4.1 表单语法

4.2 13个表单元素

4.3 表单的初级验证

隐藏域只读禁用

增强鼠标可用性

提示信息非空判断正则表达式

4.4 表单验证的练习

1、初识HTML

1.1 前端技术栈

1.2 html概述

1.3 html基本结构

2、基本网页标签

2.1基本标签

2.2 链接标签

3、列表、表格和媒体元素

3.1 列表和表格

3.2 视频、音频

4、表单

4.1 表单语法

4.2 13个表单元素

4.3 表单的初级验证

隐藏域 只读 禁用

增强鼠标可用性

提示信息 非空判断 正则表达式

4.4 表单验证的练习

隐藏域只读禁用

提示信息非空判断正则表达式