1. 初识HTML

1.1 What is HTML

  • HTML
    • Hyper Text Markup Language(超文本标记语言)
  • 优势
    • 世界知名浏览器厂商对HTML5的支持
      • 微软
      • Google
      • 苹果
      • Opera
      • Mozilla
    • 市场需求
    • 跨平台
  • W3C标准
    • W3C
    • W3C标准包括
      • 结构化标准语言(HTML、XML)
      • 表现标准语言(CSS)
      • 行为标准(DOM、ECMAScript)
  • 常见的IDE
    • 记事本
    • DreamWeaver
    • IDEA
    • WebStorm
    • Visual Studio Code

1.2 网页的基本信息

  • DOCTYPE声明
    • 告诉浏览器,我们要是用什么规范
    • <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
    • <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    • 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
    • HTML5 不基于 SGML,所以不需要引用 DTD。
    • **提示:**请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。
  • <html>标签
    • 此元素可告知浏览器其自身是一个 HTML 文档。所有内容都应该包含其中
  • <head>标签
    • <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
    • 文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
    • 下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
    • <title> 定义文档的标题,它是 head 部分中唯一必需的元素。
  • <title>标签
    • <title> 元素可定义文档的标题。
    • 浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
  • <meta>标签
    • 元数据(Metadata)是数据的数据信息。
    • <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
    • META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
    • 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
  • <body>标签
    • body 元素定义文档的主体。
    • body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。

2. 标签

2.1 网页基本标签

  • 标题标签
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 段落标签
<!-- 段落标签 -->
<p>1111 1</p>
<p>222 2</p>
  • 换行标签
<!-- 换行标签 -->
1111 1<br/>
222 2<br/>
  • 水平线标签
<!-- 水平线标签 -->
<hr/>
  • 字体样式标签
<!-- 字体样式标签 -->
粗体:<strong>I Love You</strong>
斜体:<em>I Love You</em>
  • 特殊符号
<!-- 特殊符号 -->
空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权归SolitudeAlma所有

2.2 图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • ...
<!-- img标签学习
src: 图片地址
    相对路径(推荐),绝对路径
    ../ 上一级目录
title: 鼠标悬停显示的文字
alt: 找不到路径时的替代文字
-->
<img src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" alt="美女不见了" title="色图" width="1510" height="700">

2.3 链接标签

  • 文本超链接
  • 图像超链接
<a id="top">顶部</a>
<a href="#bottom">回到底部</a>

<!-- a标签
href:必填,表示要跳转的地址
target:表示窗口在哪里打开
    _blank  在新标签中打开
    _self   在本页面打开
-->

<!-- 文本超链接 -->
<a href="./基本标签.html">click</a>
<a href="https://www.baidu.com">click</a>

<!-- 图像超链接 -->
<a href="./图像标签.html">
    <img src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" alt="美女不见了" title="色图" width="1510" height="700">
</a>

<!-- 锚链接
 1.需要一个锚标记 #
 2.跳转到标记-->

<a href="#top">回到顶部</a>
<a id="bottom">底部</a>

<!-- 功能性标签
邮件标签: mailto:
qq链接:
-->

<a href="mailto:[email protected]">邮我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2241141629&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2241141629:51" alt="联系我,领取小电影" title="联系我,领取小电影"/>
</a>
<!-- 跳转的另一页面的指定位置 -->
<a href="./链接标签.html#bottom">跳转另一页面指定位置</a>

2.4 行内元素和块元素

  • 块元素
    • 无论内容多少,该元素独占一行
    • (p、h1-h6...)
  • 行内元素
    • 内容撑开宽度,左右都是行内元素的可以排在一起
    • (a、strong、em...)

2.5 列表标签

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快地获得相应地信息
  • 列表的分类
    • 无序列表
    • 有序列表
    • 定义列表
<!-- 有序列表 -->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ol>

<hr/>

<!-- 无序列表
应用范围:导航,侧边栏。。
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ul>

<hr/>

<!-- 自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围:公司网站底部
-->

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>C/C++</dd>

    <dt>位置</dt>
    <dd>广东</dd>
    <dd>福建 </dd>
</dl>

2.6 表格标签

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 跨行
    • 跨列
<!-- 表格table
行 tr
列 td
-->

<table border="1" style="text-align: center">
    <!-- colspan跨列 -->
    <tr >
        <td colspan="3">成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
    </tr>

    <tr>
        <td rowspan="2">小红</td>
        <td>语文</td>
        <td>英语</td>
    </tr>

    <tr>
        <td>100</td>
        <td>100</td>
    </tr>
</table>

2.7 媒体标签

  • 视频标签
    • video
  • 音频标签
    • audio
<!-- 音频视频
controls 控件
autoplay 自动播放
-->
<video src="../resources/video/bandicam%202021-07-04%2022-10-15-035.mp4" controls="controls" autoplay="autoplay"></video>
<audio src="../resources/audio/The%20Weepies%20-%20Gotta%20Have%20You.mp3" controls="controls" autoplay="autoplay"></audio>

3. 页面结构分析

元素名描述
header标题头部区域的内容(用于页面或页面地一块区域
footer标题底部区域的内容(用于整个页面或页面的一块区域)
sectionweb页面中的一块独立区域
article独立文章内容
aside相关内容或应用(常用于侧边栏)
nav导航类辅助内容
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页底部</h2>
</footer>

4. iframe内联框架

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

<!-- iframe
src:引用地址
name:框架标识名
-->
<iframe src="//player.bilibili.com/player.html?aid=630832946&bvid=BV1Mb4y1Z7Pc&cid=344048459&page=1" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

5. 表单

HTML 表单用于收集用户输入。
HTML表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<h1>注册</h1>
<!-- 表单form
action:表单提交的地址,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
    get提交方式可以在url中看到提交的信息,不安全但高效
    post提交方式比较安全,传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框:input type="text" -->
    <label>用户名:
        <input type="text" name="username" />
    </label>
    <br/>
    <!-- 密码输入框:input type="password" -->
    <label>密码:
        <input type="password" name="password" />
    </label>

    <input type="submit" />
    <input type="reset" />
</form>

5.1 文本框单选框

  • 表单元素格式(input标签)
属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlengthtype为text或password时,输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否被选中
<h1>注册</h1>
<!-- 表单form
action:表单提交的地址,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
    get提交方式可以在url中看到提交的信息,不安全但高效
    post提交方式比较安全,传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框:input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名:
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框:input type="password" -->
    <label>密码:
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value :从单选框获取到的值
    name :分组名称,同一组才能不同时选中
    -->
    <label>
        <input type="radio" value="male" name="sex"/>男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>
    <input type="submit" />
    <input type="reset" />
</form>

5.2 按钮和多选框

<h1>注册</h1>
<!-- 表单form
action:表单提交的地址,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
    get提交方式可以在url中看到提交的信息,不安全但高效
    post提交方式比较安全,传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框:input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名:
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框:input type="password" -->
    <label>密码:
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value :从单选框获取到的值
    name :分组名称,同一组才能不同时选中
    -->
    <label>
        <input type="radio" value="male" name="sex"/>男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>

    <!-- 多选框
    input type="checkbox"
    -->
    <label>
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </label>
    <label>
        <input type="checkbox" value="code" name="hobby">敲代码
    </label>
    <label>
        <input type="checkbox" value="chat" name="hobby">聊天
    </label>
    <label>
        <input type="checkbox" value="game" name="hobby">游戏
    </label>
    <!-- 按钮
    input type="submit"     提交按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="reset"      重置按钮
    -->
    <label>
        <input type="button" name="xxButton" value="点击变长"/>
        <input type="image" src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" />
    </label>
    <input type="submit" />
    <input type="reset" />
</form>

5.3 列表框文本框和文件域

<h1>注册</h1>
<!-- 表单form
action:表单提交的地址,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
    get提交方式可以在url中看到提交的信息,不安全但高效
    post提交方式比较安全,传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框:input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名:
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框:input type="password" -->
    <label>密码:
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value :从单选框获取到的值
    name :分组名称,同一组才能不同时选中
    checked:默认选中
    -->
    <label>
        <input type="radio" value="male" name="sex" checked="checked" />男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>

    <!-- 多选框
    input type="checkbox"
    checked:默认选中
    -->
    <label>
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </label>
    <label>
        <input type="checkbox" value="code" name="hobby" checked="checked">敲代码
    </label>
    <label>
        <input type="checkbox" value="chat" name="hobby">聊天
    </label>
    <label>
        <input type="checkbox" value="game" name="hobby">游戏
    </label>
    <!-- 按钮
    input type="submit"     提交按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="reset"      重置按钮
    -->
    <label>
        <input type="button" name="xxButton" value="点击变长"/>
        <input type="image" src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" />
    </label>
    <input type="submit" />
    <input type="reset" />

    <!-- 下拉框,列表框
    -->
    <label>
        <select name="列表名称">
            <option value="China" selected="selected">中国</option>
            <option value="India">印度</option>
            <option value="America">美国</option>
            <option value="Switzerland">瑞士</option>
        </select>
    </label>

    <!-- 文本域
    cols="20" 行数
    rows="10" 列数
    -->
    <label>
        <textarea name="textarea" cols="20" rows="10">请输入内容</textarea>
    </label>

    <!-- 文件域
    type="file"
    name="uploadFile"
    -->
    <label>
        <input type="file" name="uploadFile">
        <input type="button" value="上传" name="uploadButton">
    </label>
</form>

5.4 搜索框滑块和简单验证

<h1>注册</h1>
<!-- 表单form
action:表单提交的地址,可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
    get提交方式可以在url中看到提交的信息,不安全但高效
    post提交方式比较安全,传输大文件
-->
<form action="./图像标签.html" method="get">
    <!-- 文本输入框:input type="text" -->
    <!-- value="SolitudeAlma" 默认初始值
         size="30"            文本框的长度
         maxlength="8"        最多容纳几个字符
    -->
    <label>用户名:
        <input type="text" name="username" value="SolitudeAlma" size="30" maxlength="8"/>
    </label>
    <br/>
    <!-- 密码输入框:input type="password" -->
    <label>密码:
        <input type="password" name="password" />
    </label>

    <!-- 单选框标签
    input type="radio"
    value :从单选框获取到的值
    name :分组名称,同一组才能不同时选中
    checked:默认选中
    -->
    <label>
        <input type="radio" value="male" name="sex" checked="checked" />男
    </label>
    <label>
        <input type="radio" value="female" name="sex"/>女
    </label>

    <!-- 多选框
    input type="checkbox"
    checked:默认选中
    -->
    <label>
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </label>
    <label>
        <input type="checkbox" value="code" name="hobby" checked="checked">敲代码
    </label>
    <label>
        <input type="checkbox" value="chat" name="hobby">聊天
    </label>
    <label>
        <input type="checkbox" value="game" name="hobby">游戏
    </label>
    <!-- 按钮
    input type="submit"     提交按钮
    input type="button"     普通按钮
    input type="image"      图像按钮
    input type="reset"      重置按钮
    -->
    <label>
        <input type="button" name="xxButton" value="点击变长"/>
        <input type="image" src="../resources/image/214d533c880611ebb6edd017c2d2eca2.png" />
    </label>
    <input type="submit" />
    <input type="reset" />

    <!-- 下拉框,列表框
    -->
    <label>
        <select name="列表名称">
            <option value="China" selected="selected">中国</option>
            <option value="India">印度</option>
            <option value="America">美国</option>
            <option value="Switzerland">瑞士</option>
        </select>
    </label>

    <!-- 文本域
    cols="20" 行数
    rows="10" 列数
    -->
    <label>
        <textarea name="textarea" cols="20" rows="10">请输入内容</textarea>
    </label>

    <!-- 文件域
    type="file"
    name="uploadFile"
    -->
    <label>
        <input type="file" name="uploadFile">
        <input type="button" value="上传" name="uploadButton">
    </label>

    <!-- 邮件验证 -->
    <label>
        邮箱:
        <input type="email" name="email" />
    </label>
    <!-- url验证 -->
    <label>
        <input type="url" name="url" />
    </label>
    <!-- 数字验证 -->
    <label>
        <input type="number" name="number" max="10" min="0" step="1"/>
    </label>
    <!-- 滑块 -->
    <label>
        <input type="range" name="volume" max="100" min="0" step="2"/>
    </label>
    <!-- 搜索框 -->
    <label>
        <input type="search" name="search" />
    </label>
</form>

5.5 表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disable
  • 增强鼠标的可用性
    • 被label包围的标签可以通过点击文字来选中它(绑定),或者是通过label中的for属性与标签的id属性对应

5.6 表单的初级验证

  • 为什么要进行验证
    • 避免直接让后端校验,减轻服务器压力
    • 增加安全性
  • 常用方式
    • placeholder 提示信息
    • required 非空判断
    • pattern 正则表达式

附属代码
所有资源来源于狂神说的B站投稿视频

Q.E.D.


都懂一点,不是很懂的小捞仔