18：HTML详解 || 前端的开始要更坚定的往下走啊

HTML详解

一、什么是HTML

1. HTML

  • Hyper Text Markup Language（超文本标记语言）
  • 超文本包括：文字、图片、音频、视频、动画等

前端调试界面，在该网站界面右键，选择审查元素，后续前端调试大多在该页面操作。

image-20220129183115307

  1. HTML代码：

    image-20220129183227054

  2. CSS样式代码：

    image-20220129183243437

2. HTML发展史

目前网页中常用：HTML 5 + CSS 3

image-20220129183354743

3. HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
  • 市场的需求
  • 跨平台

4. W3C标准

W3C

W3C标准包括：

  • 结构化标准语言：（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

5. 常见IDE

  1. 记事本
  2. Dreamweaver
  3. IDEA
  4. WebStorm
  5. ......

6. IDEA创建HTML

跟Java一样，创建后如下：

image-20220129184631324

删除src文件夹，创建html文件夹

image-20220129184741307

右键该文件夹，new一个html5文件

image-20220129184824716

image-20220129184911509

选择一个浏览器，就可以打开该网页：

image-20220129185007108

设置打开的默认浏览器：IDEA中点击setting，搜索web

image-20220129185128689

image-20220129185204833

可以将Path全部指向常用浏览器的路径，之后点击任意浏览器打开都会跳转常用浏览器。

7. HTML基本结构

image-20220129185452375

  • <body>、</body>等成对的标签，分别叫开放标签和闭合标签
  • 单独呈现的标签（空元素），如<hr/>；意为用/来关闭空元素，叫自闭合标签

8. 网页基本信息

HTML注释书写：<!-- --> 注释

  1. DOCTYPE声明

    文档类型：告诉浏览器要使用什么规范

    image-20220129185950067

  2. html标签：总的大标签，所有HTML代码都要写在这个标签之内

  3. head标签：代表网页头部

    • title标签：网页标题image-20220129190340432

    • meta标签：描述性标签，用来描述我们网站的一些信息，搜索引擎搜索到的原因，一般用来做SEO（搜索引擎优化）

      image-20220129190556648

  4. body标签：代表网页的主体

<!--文档类型：告诉浏览器要使用什么规范-->
<!DOCTYPE html>
<!--总的大标签，所有HTML代码都要写在这个标签之内-->
<html lang="en">
<!--代表网页头部-->
<head>
    <!--描述性标签，用来描述我们网站的一些信息，搜索引擎搜索到的原因-->
    <meta charset="UTF-8">
    <meta name="keywords" content="我的Java学习">
    <meta name="description" content="来学习Java吧">
    <!--网页标题-->
    <title>我的第一个网页</title>
</head>
<!--代表网页的主体-->
<body>
HelloWorld！
</body>
</html>

二、网页标签

1. 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<!--段落标签你无视自己敲击的空格和换行-->
<p>两只老虎，两只老虎，跑得快，跑得快</p>

<p>一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！</p>

<p>两只老虎，两只老虎，跑得快，跑得快</p>

<p>一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！</p>

<!--水平线标签-->
<!--根据浏览器大小可长可短-->
<hr/>

<!--换行标签-->
<!-- 一般来说，自闭合标签不需要 / 但是我们也会给加上 /  ，这里虽然换行了，但是这所有内容仍然是一个段落 -->
两只老虎，两只老虎，跑得快，跑得快 <br/>

一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！<br/>

两只老虎，两只老虎，跑得快，跑得快<br/>

一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！<br/>

<!--粗体和斜体-->
<hr>
<h4>字体样式标签</h4>
粗体：<strong>I Love You!</strong>
斜体：<em>I Love You!</em>

<!--特殊符号-->
<hr>
空&nbsp;&nbsp;&nbsp;格
<br/>
大于号：&gt;
<br/>
小于号：&lt;
<br/>
版权符号：&copy;版权所有：Laxsilence

<!--
特殊符号记忆方式：&开头，;结尾
直接在IDEA中输入&+字母会自动跳出，或者百度查询
-->
</body>
</html>

2. 图像标签

常见的图像格式

  • JPG
  • GIF
  • PNG
  • BMP
  • ......

image-20220130165501490

良好的编码规范：资源单独建立一个存放的目录：resources，里面有一个文件image存放图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--image标签学习
src：图片地址(必填)
    相对路径，绝对路径
    ../   表示上一级目录
alt：图片加载失败返回的信息（必填）
title：悬停文字（选填）
width和height：宽度和高度（选填）
...等等
-->
<img src="../resources/image/li.jpg" alt="阿离" title="这是悬停文字" width="300" height="800">
</body>
</html>

3. 链接标签

image-20220130172400966

  • 文本超链接
  • 图像超链接

超链接：

  1. 页面间链接

    从一个页面链接到另一个页面

  2. 锚链接

    还可以实现不同页面间的锚链接跳转

    <!--锚链接还可以实现不同页面的跳转-->
<a href="4.%20链接标签.html#down">点击调到链接标签的底部</a>

  3. 功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为锚标记-->
<a name="top">顶部</a>
<br>
<!--a标签学习
href:必填，表示要跳转到那个界面
target:表示窗口在哪里打开
    _blank 在新的页面打开
    _self  在自己的网页中打开

 -->
<a href="1.%20我的第一个网页.html" target="_blank">点我跳转到页面</a>
<br>
<a href="https://www.baidu.com">点我跳转到百度</a>
<br>

<p><a href="1.%20我的第一个网页.html">
    <img src="../resources/image/li.jpg" alt="阿离" title="点击跳转到我的第一个网页" width="20%">
</a></p>

<p><a href="1.%20我的第一个网页.html">
    <img src="../resources/image/li.jpg" alt="阿离" title="点击跳转到我的第一个网页" width="20%">
</a></p>

<p><a href="1.%20我的第一个网页.html">
    <img src="../resources/image/li.jpg" alt="阿离" title="点击跳转到我的第一个网页" width="20%">
</a></p>

<p><a href="1.%20我的第一个网页.html">
    <img src="../resources/image/li.jpg" alt="阿离" title="点击跳转到我的第一个网页" width="20%">
</a></p>

<p><a href="1.%20我的第一个网页.html">
    <img src="../resources/image/li.jpg" alt="阿离" title="点击跳转到我的第一个网页" width="20%">
</a></p>

<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
用#号表示
-->
<a href="#top">回到顶部</a>
<a name="down">我是链接标签的底部</a>

<!--功能性链接
邮件链接：mailto
QQ链接：搜索QQ推广进入官网 点击推广工具
-->
<a href="mailto:laxsilence@vip.qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1277017627:53" alt="你好，加我QQ私聊" title="你好，加我QQ私聊"/></a></body>
</html>

4. 行内元素和块元素

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

5. 列表标签

什么是列表

  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类：

  • 无序列表
  • 有序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷、问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>运维</li>
    <li>C++</li>
</ol>

<hr/>
<!--无序列表
应用范围：导航、侧边栏...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>前端</li>
    <li>运维</li>
    <li>C++</li>
</ul>

<hr/>
<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
应用范围：网站的底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>前端</dd>
    <dd>运维</dd>
    <dd>C++</dd>

    <dt>位置</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>广东</dd>
    <dd>西安</dd>
    <dd>南京</dd>

</dl>
</body>
</html>

6. 表格标签

为什么使用表格：

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

image-20220209173408440

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行  tr
列  td
-->
<table border="1px">
    <tr>
        <!-- colspan  跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

<hr/>

<table border="1px">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">刘英俊</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">Laxsilence</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

7. 媒体元素

视频和音频

  • 视频元素：

    video

  • 音频元素：

    audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
    1. src：资源路径
    2. controls：控制开关
    3. autoplay：自动播放
-->
<video src="../resources/video/DJI_20211128_071000_32_video.mp4" controls></video>
<audio src="../resources/audio/五级开场音乐(原版速度）.mp3" controls></audio>
</body>
</html>

三、页面结构分析

image-20220209175611488

<!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>

四、iframe内联框架

image-20220209180359411

image-20220209180248229

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>
<!--iframe 内联框架
src：地址
w-h：宽度和高度
-->
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="https://www.cnblogs.com/Laxsilence/" target="hello">点击跳转</a>
<hr/>
<iframe
        src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
<hr/>
<iframe src="https://www.bilibili.com" frameborder="0" width="1980px" height="600px"></iframe>
</body>
</html>

五、表单

1. 表单语法

image-20220209181309091

表单form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址

method：post get 提交方式

  • get 方式提交：能够在URL中看到我们提交的信息，不安全，高效，大文件不能传输

    image-20220209201215986

  • post 方式提交：比较安全，可以传输大文件

    但是可以在网页审查中查看

    image-20220209201616917

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post  get 提交方式
        get 方式提交：能够在URL中看到我们提交的信息，不安全，高效，大文件不能传输
        post 方式提交：比较安全，可以传输大文件
-->
<h1>注册</h1>
<form action="1.%20我的第一个网页.html" method="post">
    <!-- 文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"> </p>
    <!-- 密码输入框：input type="password"-->
    <p>密码：<input type="password" name="password"> </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

2. 表单元素格式

image-20220209201817766

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post  get 提交方式
        get 方式提交：能够在URL中看到我们提交的信息，不安全，高效，大文件不能传输
        post 方式提交：比较安全，可以传输大文件
-->
<h1>注册</h1>
<form action="1.%20我的第一个网页.html" method="get">
    <!-- 文本输入框：input type="text"
        value：初始值
        size：文本框长度的大小
        maxlength：最长能写几个字符
    -->
    <p>名字：<input type="text" name="username" value="刘英俊" maxlength="8" size="30"></p>
    <!-- 密码输入框：input type="password"-->
    <p>密码：<input type="password" name="password"></p>

    <!--单选框标签
        input type="radio"
        value：单选框的值
        name：表示是否属于这一组，同一个name为同一个组
        checked：默认选中
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女

    </p>

    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="girl" name="hobby">女孩子
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
    <p>按钮
        <input type="button" name="btn1" value="点击进入">
        <!-- 图片按钮有自动提交功能 -->
        <!--<input type="image" src="../resources/image/li.jpg">-->
    </p>

    <!--  下拉框  列表框
    option 选项
    selected 默认选择 -->
    <p>国家：
        <select name="国家">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="rs" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!-- 文本域 -->
    <p>反馈
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域
    input type="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证
    -->
    <p>
        邮箱：
        <input type="email" name="email">
    </p>

    <!--URL验证
   -->
    <p>
        URL:
        <input type="url" name="url">
    </p>

    <!--数字验证
   -->
    <p>
        商品数量：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

    <!--滑块
   -->
    <p>
        音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

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

    <!-- 提交和重置按钮 -->
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

image-20220209205040398

image-20220209205109149

3. 表单的应用

隐藏域：

  • hidden

只读：

  • readonly

禁用：

  • disabled

增强鼠标可用性（实现点击前边的文字，可以锁定后边的框）：

  • <label for="mark">你点我试试</label>
    <input type="text" id="mark">

4. 表单初级验证

思考？为什么要进行表单验证

  • 保证数据的安全性
  • 减轻服务器的压力

常用方式：

  • placeholder：提示信息，用在所有的输入框中，提示这里需要输入什么东西
  • required：要求元素不能为空
  • pattern：正则表达式（百度常用正则表达式）

5. 表单代码汇总

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post  get 提交方式
        get 方式提交：能够在URL中看到我们提交的信息，不安全，高效，大文件不能传输
        post 方式提交：比较安全，可以传输大文件
-->
<h1>注册</h1>
<form action="1.%20我的第一个网页.html" method="get">
    <!-- 文本输入框：input type="text"
        value：初始值
        size：文本框长度的大小
        maxlength：最长能写几个字符
    -->
    <p>名字：<input type="text" name="username" maxlength="8" size="30" readonly placeholder="请输入用户名"></p>
    <!-- 密码输入框：input type="password"-->
    <p>密码：<input type="password" name="password" value="123456" hidden></p>

    <!--单选框标签
        input type="radio"
        value：单选框的值
        name：表示是否属于这一组，同一个name为同一个组
        checked：默认选中
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女

    </p>

    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="girl" name="hobby">女孩子
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
    <p>按钮
        <input type="button" name="btn1" value="点击进入">
        <!-- 图片按钮有自动提交功能 -->
        <!--<input type="image" src="../resources/image/li.jpg">-->
    </p>

    <!--  下拉框  列表框
    option 选项
    selected 默认选择 -->
    <p>国家：
        <select name="国家">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="rs" selected>瑞士</option>
            <option value="india">印度</option>
        </select>
    </p>

    <!-- 文本域 -->
    <p>反馈
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域
    input type="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证
    -->
    <p>
        邮箱：
        <input type="email" name="email" required>
    </p>

    <!-- 自定义邮箱 -->
    <p>自定义邮箱：
        <input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
            /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

    <!--URL验证
   -->
    <p>
        URL:
        <input type="url" name="url">
    </p>

    <!--数字验证
   -->
    <p>
        商品数量：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

    <!--滑块
   -->
    <p>
        音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

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

    <!--  增强鼠标可用性
     实现点击前边的文字，可以锁定后边的框
     -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>


    <!-- 提交和重置按钮 -->
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>

六、HTML总结

posted @ 2022-02-09 21:26  Laxsilence  阅读(273)  评论(1)    收藏  举报