HTML学习笔记

最新推荐文章于 2024-07-25 11:52:08 发布

Bee_Darker

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量364

点赞数

分类专栏： HTML/CSS核心基础文章标签： html

本文链接：https://blog.csdn.net/Bee_Darker/article/details/116540005

版权

HTML/CSS核心基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基础知识，包括HTML的定义、发展史和优势。重点讲解了W3C标准及其组成部分，如HTML、XML、CSS和JavaScript。接着详细阐述了HTML的基本结构，网页标签如标题、段落、图像、链接、行内元素、块元素、列表、表格、媒体元素和表单，以及表单的提交方式和验证方法。内容适合HTML初学者，来源于B站UP主遇见狂神说的教程视频。

摘要由CSDN通过智能技术生成

初识HTML

什么是HTML

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

HTML发展史

在这里插入图片描述

HTML的优势

世界知名浏览器广商对HTML5的支持
市场的需求
跨平台

W3C标准

W3C

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

W3C标准包括

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

HTML基本结构

在这里插入图片描述

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

网页基本信息

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部-->
<head>
<!--    meta:用来描述网站的描述信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML,JAVA">
    <meta name="description" content="HTML,JAVA学习">
<!--    title网页标题-->
    <title>the first webpage</title>
</head>
Hello world
<!--body标签代表网页主体-->
<body>

</body>
</html>

网页基本标签

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

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

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<B>i like dog</B><br>
斜体：<I>what do you like</I>
<br>
粗体：<strong>i like dog</strong><br>
斜体：<em>what do you like</em>
<br>
<!--特殊符号-->

空  格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于号：&gt;
<br>
小于号：&lt;
<br>
版权符号：&copy;版权所有
<!--
特殊符号记忆方式
&  ；

-->

</body>
</html>

在这里插入图片描述

图像标签

常见图像格式：JPG、GIF、PNG、BMP······

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址(必填）
相对地址，绝对地址
../  --上一级目录
-->
<img src="../resourse/image/1.jpg" alt="图像" title="悬停文字" width="300" height="300">

</body>
</html>

链接标签

文本超链接
图像超链接
页面间链接
锚链接
功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签
href:必填，表示要跳到那个页面
target:表示窗口在哪里打开
        _blank:在新标签中打开
        _self:在自己的网页打开
-->
<a href="2.基本标签.html" target="_blank">点击我调转至页面2</a>
<br>
<a href="http://www.baidu.com" target="_self">点击我跳转至百度</a>
<br>
<a href="1.第一个网页.html">
    <img src="../resourse/image/1.jpg" alt="头像" height="300" width="400">
</a>
<p>
    <a href="1.第一个网页.html">
        <img src="../resourse/image/1.jpg" alt="头像" height="300" width="400">
    </a>
</p>

<!--段落标签-->
<p>静夜思</p>
<p>李白〔唐代]</p>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>



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

-->
<a href="#top">回到顶部</a>

<a name="down">down</a>
<!--
在其它页面调用的语句：
<a href="4.链接标签学习.html#top">回到顶部</a>
<a href="4.链接标签学习.html#down">回到页面4的底部</a>

-->
<!--功能性链接
邮件链接：mailto
QQ推广超链接
-->
<a href="mailto:2834660387@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::52" alt="你好，test" title="你好，test"/></a>


</body>
</html>

行内元素和块元素

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

列表

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答···
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>php</li>
    <li>C</li>
    <li>C++</li>
</ol>
<hr>
<br>
<!--无序列表
应用范围：导航，侧边栏···
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>php</li>
    <li>C</li>
    <li>C++</li>
</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>PHP</dd>
    <dd>Python</dd>

    <dt>位置</dt>
    <dd>地球</dd>
    <dd>亚洲</dd>
    <dd>中国</dd>
</dl>

</body>
</html>

表格

为什么使用表格:简单通用,结构稳定
基本结构
- 单元格:< table>< /table>
- 行:< tr>< /tr>
- 列:< td>< /td>
- 跨行:rowspan
- 跨列:colspan

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

<!--表格table
行   tr  rows
列   td

-->

<table border="1px">
    <tr>
        <!-- colspan 跨列       -->
        <td colspan="3" align="center">学生成绩</td>
<!--        <td></td>-->
<!--        <td></td>-->
    </tr>
    <tr>
        <!-- rowspan 跨行       -->
        <td rowspan="2">黎明</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
<!--        <td></td>-->
    </tr>
    <tr>
        <td rowspan="2">王敏</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
<!--        <td></td>-->
    </tr>
</table>
</body>
</html>

在这里插入图片描述

媒体元素

视频元素：video
音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频-->
<!--
src:资源路径
controls:控制条
autoplay:自动播放

-->
<video src="../resourse/video/1.mp4" controls autoplay>在下坂本，有何贵干视频</video>

<audio src="../resourse/audio/1.mp3" controls autoplay>在下坂本，有何贵干音频</audio>
</body>
</html>

在这里插入图片描述

页面结构分析

在这里插入图片描述 ```html

页面结构分析

网页头部

网页主体

```

iframe内联框架

在这里插入图片描述

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

<!--iframe内联框架
src:地址
width:宽度
height：高度

-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<!--<iframe src="//player.bilibili.com/player.html?aid=328560759&bvid=BV1ZA411v75Y&cid=204423004&page=1"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->

<a href="https://www.baidu.com" target="hello">点击跳转</a>

</body>
</html>

表单

get|post提交

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
        get方式：可以在url中看到提交的信息，不安全，但高效
        post方式：比较安全，可以提交大文件

-->
<form action="1.第一个网页.html" method="post">

<!--文本输入框：input type=”text“-->
    <p>名字：<input type="text" name="username"></p>
<!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

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

</form>


</body>
</html>

表单元素格式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
        get方式：可以在url中看到提交的信息，不安全，但高效
        post方式：比较安全，可以提交大文件

-->
<form action="1.第一个网页.html" method="get">

<!--文本输入框：input type=”text“
value="good name"----默认初始值
 maxlength="8"-----最长输入的字符个数
  size="30"------文本框长度
hidden
-->
    <p>名字：<input type="text" name="username" value="admin" readonly ></p>
<!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>

<!--    单选框标签
input type="radio"
value:单选框的值
name：表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
<!--    多选框
        input type="checkbox"
-->
    <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">游戏
    </p>
    
<!--    按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
-->
    <p>按钮
        <input type="button" name="btn1" value="点击游戏">
        <input type="image" src="../resourse/image/1.jpg">
    </p>

<!--    下拉框，列表框-->
    <p>下拉框：
        <select name="列表名称" id="">
            <option value="China" >中国</option>
            <option value="USA">美国</option>
            <option value="UK">英国</option>
            <option value="France"selected>法国</option>
        </select>
    </p>


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

<!--    文件域
input type="file" name="files"

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

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

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

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

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

    </p>
<!--    搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
<!--    增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
<!--    自定义邮箱验证

https://www.jb51.net/tools/regexsc.htm


-->
    <p>自定义邮箱:
        <input type="text" name="diymail" 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>

    
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>



</body>
</html>

表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证

常用方式
- placehoder 提示信息，用在输入框中
- required 元素不能为空
- pattern 正则表达式

【注】本文是根据B站UP主遇见狂神说的HTML5完整教学通俗易懂视频总结而来，在此表达感谢。

Bee_Darker

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

初识HTML什么是HTMLHTML发展史HTML的优势w3C标准w3cw3C标准包括HTML基本结构网页基本信息网页基本标签图像标签链接标签行内元素和块元素列表表格媒体元素页面结构分析网页头部网页脚步iframe内联框架表单get|post提交表单元素格式表单的应用表单初级验证
复制链接

扫一扫

专栏目录