HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_18835405/article/details/121116366

1、初识HTML

1.1、什么是HTML

Hyper Text Markup Language（超文本编辑语言），超文本包括：文字、图片、音频、视频、动画等
在这里插入图片描述

1.2、HTML发展史

在这里插入图片描述

1.3、HTML5优势

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

1.4、W3C标准

1.W3C

World Wide Web Consortium（万维网联盟）
成立于1994年，web技术领域最权威和具有影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/

W3C标准包括
- 结构化标准语言（HTNL、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

1.5、常见IDE

记事本
Dreamweaver
IDEA
WebStorm
…

1.6、HTML基本结构

在这里插入图片描述

2、网页基本信息

DOCTYPE声明
title标签
meta标签

2.1、代码

<!--告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<!--网页的所有内容都要写在html标签内-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO也就是网页优化-->
    <meta charset="UTF-8">
    <meta name="keywords" content="ys,宝藏男孩一枚">
    <meta name="description" content="正在好好学习html">
    <!--title标签网页标题-->
    <title>这是我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>

3、网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

3.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>
<p>哎呀    我地小鼻子变呀变了样</p>
<p>我要把那新房子刷得更漂亮</p>

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

<!-- 换行标签-->
我是一个粉刷匠粉刷本领强<br/>
我要把那新房子刷得更漂亮<br/>
刷了房顶又刷墙刷子象飞一样<br/>
哎呀    我地小鼻子变呀变了样<br/>

<!-- 粗体 斜体-->
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>

<!-- 特殊符号 -->
空                              格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有ys
<!--根据提示来
特殊符号记忆方式
&  ;
-->
</body>
</html>

4、网页特殊标签

4.1、图像标签

JPG
GIF
PNG
BMP（位图）
…

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
img学习：
（必填）src：图片地址
            相对地址 ../(推荐使用),绝对地址
（必填）alt：图片名字
-->
<img src="../resources/image/1.jpeg" alt="ys头像" title="悬停文字" width="300" height="300">
</body>
</html>

4.2、链接标签

在这里插入图片描述

4.2.1、代码

4.链接标签.html⬇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--锚标记-->
<a name="top">顶部</a>
<!--
a标签：
（必填）href:表示要跳转到的页面
 target:表示窗体在哪里打开
        _blank 在新标签中打开
        _self 在当前标签下打开（默认）
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转</a>
<a href="https://www.baidu.com" target="_self">点我跳转百度</a>

<br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpeg" alt="ys头像" title="悬停文字" width="300" height="300">
</a>

<!--
锚链接：
1.需要一个锚标记
2.跳转到猫标记
-->
<a href="#top">回到顶部</a>

<!--
功能性链接：
邮件链接：mailto
QQ链接：百度搜索qq推广->推广工具->生成代码
-->
<a href="mailto:360239086@qq.com">联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="领取小电影" title="领取小电影"/>
</a>
    
<!--锚标记-->
<br/><a name="down">底部</a>
</body>
</html>

另一个网页的锚链接可跳转到⬆网页的底部位置
<a href="4.链接标签.html#down">跳转到链接标签页面的底部</a>

4.3、列表

4.3.1、什么是列表

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

4.3.2 、列表的分类

无序列表
有序列表
定义列表

4.3.2.1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!-- 有序列表 -->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>C/C++</li>
</ol>

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

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

    <dt>学科</dt>

    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C</dd>

    <dt>地点</dt>

    <dd>济南</dd>
    <dd>潍坊</dd>
    <dd>青岛</dd>
    
</dl>

</body>
</html>

4.4 、表格

4.4.1、为什么使用表格

简单通用
结构稳定

4.4.2、基本结构

单元格
行
列
跨行
跨列

4.4.3 、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
<br/>
<table border="1px">
    <!--跨列 colspan-->
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <!--跨行 rowspan-->
    <tr>
        <td rowspan="3">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>
    <tr>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
    <tr>
        <td>5-1</td>
        <td>5-2</td>
        <td>5-3</td>
        <td>5-4</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

4.5、视频和音频

视频元素
- video
音频元素
- audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!-- 音频和视频
（必填）src 视频地址
controls 控制条
✳ html5_video&audio的autoplay属性失效的解决方法
参考博客：https://www.cnblogs.com/isXianYue/p/13554254.html
    标签定义为静音(muted: true)才可以自动播放
-->

<!--<video src="../resources/video/1.mp4" muted autoplay controls></video>-->
<!-- muted 音频自动播放还是不好使 -->
<audio src="../resources/audio/1.wav" muted autoplay controls></audio>
</body>
</html>

5、网页的一些概念

5.1、行内元素和块元素

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

5.2、页面结构分析

在这里插入图片描述

5.3、iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>

<!-- bibi分享视频 -->
<!-- <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> -->

<!-- iframe 内联框架
    src: 地址

跨域问题解决，请求头加上 X-Frame-Options属性设置为SAMEORIGIN：页面只能被本站页面嵌入到iframe或者frame中。
后端解决跨域可参考https://blog.youkuaiyun.com/weixin_40910372/article/details/100068498
 -->
<!-- <iframe src="http://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe> -->

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点我跳转</a>

</body>
</html>

6、表单相关

6.1、初识post和get请求

在这里插入图片描述

<!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.我的第一个网页.html" method="get">
    <!-- 文本输入框：input type="text" -->
    <p>名字：<input type="text" name="username"></p>
    <!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"></p>

    <p><input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置"></p>
</form>
</body>
</html>

6.2、表单元素

6.2.1 文本框属性

在这里插入图片描述

6.2.1.1、文本框和单选框

    <!-- 文本输入框：input type="text"
        value="帅" 默认初始值
        maxlength="8" 最长能写几个字符
        size="30" 文本框的长度-->
    <p>名字：<input type="text" name="username" value="帅" maxlength="8" size="30"></p>
    <!-- 密码框：input type="password" -->
    <p>密码：<input type="password" name="pwd"></p>

    <!--单选框标签
     value 单选框的值
     ✳name 一个组，值要相同要不就不是单选效果了
     -->
    <p>性别：
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>

6.2.1.2、多选框和按钮

<!--多选框标签
    checkbox
     -->
    <p>爱好：
        <input type="checkbox" name="hobby" value="shopping">买买买
        <input type="checkbox" name="hobby" value="coding">码代码
        <input type="checkbox" name="hobby" value="movie">看电影
        <input type="checkbox" name="hobby" value="money">钱
    </p>


    <!--按钮
    input type="button"
    input type="image" 提交
    input type="submit" 提交
    input type="reset"
     -->
    <p>
        <input type="button" name="button" value="按钮">
        <input type="image" src="../resources/image/1.jpeg" value="image">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>

6.2.1.3 、文件域

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

6.2.1.4、简单验证滑块搜索框

<!-- 邮箱 -->
    <p>
        邮箱：
        <input type="email" name="mail">
    </p>
    <!-- URL-->
    <p>
        URL：
        <input type="url" name="url">
    </p>
    <!-- 数字-->
    <p>
        商品数量：
        <input type="number" name="number" max="100" min="1" step="1">
    </p>

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

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

6.2.3、列表框和文本域

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

    <!-- 下拉框或列表框 -->
    <p>
        国家：
        <select name="country">
            <option value="China">中国</option>
            <option value="English" selected>英国</option>
            <option value="UK">美国</option>
        </select>
    </p>

6.3、表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

    <!-- 增强鼠标可用性：点击文字自动跳转到输入框 -->
    <p>
        <label for="mark">点我跳转输入框</label>
        <input type="text" id="mark">
    </p>

6.4、表单初级验证

6.4.1、why表单验证？

减小后端请求的压力
提高安全性

6.4.2、常用方式

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

    <p>
        名字：
        <input type="text" name="username" maxlength="8" size="30" placeholder="请填写用户名" required>
    </p>
    <!-- 自定义邮箱，正则表达式验证 
    https://blog.youkuaiyun.com/qianhaohong/article/details/53435253-->
    <p>
        自定义邮箱：
        <input type="text" name="diymail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>