HTML学习笔记

最新推荐文章于 2024-06-24 22:03:08 发布
最新推荐文章于 2024-06-24 22:03:08 发布
阅读量200 收藏 5
点赞数 4
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43760651/article/details/115188152
版权

1、初识HTML

HTML(Hyper Text Markup language):超文本标记语言

超文本包括：文字、图片、音频、动画等

W3C：World wide Web Consortium（万维网联盟）：W3C

IDE工具:记事本、Dreamweaver、IDEA、WebStorm

在这里插入图片描述

2、网页基本信息

在这里插入图片描述

3、网页基本标签

3.1 标题标签

<!--标题标签  快捷键 h1+Tab-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

3.2 段落标签

<!--段落标签 快捷键 p+Tab-->
<p>春晓</p>
<p>[唐] 孟浩然</p>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>

3.3 换行标签

<!--换行标签-->
春晓<br/>
[唐] 孟浩然<br/>
春眠不觉晓，处处闻啼鸟。<br/>
夜来风雨声，花落知多少。<br/>

3.4 水平线标签

<hr/>

3.5 字体样式标签

<!--字体样式标签-->
粗体：<strong>Hello,你好啊</strong>
斜体：<em>Hello,你好啊</em>

3.6 注释和特殊符号

空格：&nbsp;>
大于号>：&gt;<br/>
小于号<：&lt;<br/>
版权符号：&copy;清华大学出版社

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>

<!--标题标签  快捷键 h1+Tab-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<hr/>
<!--段落标签 快捷键 p+Tab-->
<p>春晓</p>
<p>[唐] 孟浩然</p>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>

<!--水平线标签-->
<hr/>
<!--换行标签-->
春晓<br/>
[唐] 孟浩然<br/>
春眠不觉晓，处处闻啼鸟。<br/>
夜来风雨声，花落知多少。<br/>
<hr/>
<!--字体样式标签-->
粗体：<strong>Hello,你好啊</strong><br/>
斜体：<em>Hello,你好啊</em>
<hr/>
<!--特殊符号-->
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格<br/>
大于号>：&gt;<br/>
小于号<：&lt;<br/>
版权符号：&copy;清华大学出版社
</body>
</html>

效果图

在这里插入图片描述

3.7 图像标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<img src="../resource/壁纸.jpg" alt="桌面壁纸" title="图片上悬停的文字" width="800" height="600"/>
</body>
</html>

3.8 超链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a name="top">顶部</a><br/>
<!--href:必填，表示要跳转的页面
targe：表示窗口打开的位置
_blank：在新标签页打开
_self：当前页面打开
-->
<a href="我的第一个网页.html" target="_self">跳转到我的第一个页面</a><br/>
<a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
<hr/>
图片跳转到链接:<br/>
<a href="我的第一个网页.html">
    <img src="../resource/壁纸.jpg" alt="桌面壁纸" title="图片上悬停的文字" width="800" height="600"/>
</a>

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

<!--功能性链接
邮件链接：mailto
QQ链接-->
<a href="mailto:2351654897@qq.con">点击联系我</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::53" alt="你好啊" title="你好啊"/>
</a>
</body>
</html>

3.9 块元素和行内元素

在这里插入图片描述

3.10 列表标签

在这里插入图片描述

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

    <ol>
        <li>
            <a href="https://www.baidu.com/" target="_blank">
                百度
            </a>
        </li>
        <li>B站</li>
        <li>中国MOOC</li>
        <li>菜鸟教程</li>
    </ol>
<hr/>
<!--无序列表-->
<ul>
    <li>Java学习</li>
    <li>C语言</li>
    <li>C++课程设计</li>
    <li>C#课程设计</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt“列表名称
dd：列表内容-->
<dl>
    <dt>学科</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>物理</dd>

    <dt>姓名</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
    <dd>赵六</dd>
</dl>
</body>
</html>

在这里插入图片描述

3.11 表格标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格标签
行：tr
列：td
显示边框：border
跨列：colspan
跨行：rowspan-->
<table border="1px" width="200" >
    <tr>
        <td colspan="3" align="center">学习成绩</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>96</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

3.12 媒体元素

视频元素
<video src=""></video>
音频元素
<audio src=""></audio>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放-->
<video src="../resource/沙雕小故事.mp4" controls width="800" height="500"></video>
<hr/>
<audio src="../resource/昨日青空.mp3" controls autoplay></audio>
</body>
</html>

4、页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h1>网页的头部</h1>
</header>

<section>
    <h1>网页的主体</h1>
</section>

<footer>
    <h1>网页的脚部</h1>
</footer>
</body>
</html>

5、iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内敛框架</title>
</head>
<body>
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.bilibili.com" target="hello">点击跳转</a>
</body>
</html>

6、表单

表单标签查询：​菜鸟教程

在这里插入图片描述

在这里插入图片描述

6.1 文本框、单选框、多选框、下拉列表

<!--文本输入框：input type="text"-->
<p>用户：<input type="text" name="username" value="wangliyang" maxlength="10" readonly></p>
<!-- 密码框：input type="password"-->
<p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>

    <!-- 单选按钮：input type="radio"
    value：元素的初始值
    默认选中：checked
    name：相同的为同一个组-->
    <p>单选：
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
    </p>

    <!--复选框：input type="checkbox"
    默认选中：checked-->
    多选框：
    <p>
        <input type="checkbox" name="学科" value="语文">语文
        <input type="checkbox" name="学科" value="数学" checked>数学
        <input type="checkbox" name="学科" value="英语">英语
    </p>

<!--下拉列表：select
    option：定义下拉列表的选项
    selected：默认初始值-->
    下拉列表：
    <p>
        <select name="选修学科">
            <option value="物理">物理</option>
            <option value="化学" selected>化学</option>
            <option value="生物">生物</option>
        </select>
    </p>

6.2 按钮、提交、重置

<!--按钮
    input type="button：创建按钮
    input type="button" name:图片按钮-->
    按钮:
    <p>
        <input type="button" name="button1" value="文科">
        <input type="button" name="button1" value="理科">
    </p>

<!--提交和重置
    input type="submit"：提交按钮
    input type="reset"：重置按钮-->
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>

6.3 文本域和文件域

<!--文本域
    行：cols="50"
    列rows="10"-->
    文本域：
    <p>
        <textarea name="textarea" cols="50" rows="10">默认显示内容</textarea>
    </p>

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

6.4 邮箱验证、滑块、搜索框

<!--邮箱验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
    <!--url(网址验证)-->
    <p>url:
        <input type="url" name="url">
    </p>
    <!--数字验证
    step:增加量-->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <!--滑块-->
    <p>滑块:
        <input type="range" name="range" max="100" min="0" step="2">
    </p>
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search" >
    </p>

<!--    增强鼠标可用性-->
    <p>
        <label for="mark">跳到框内</label>
        <input type="text" id="mark">
    </p>

6.5 表单验证

在这里插入图片描述

代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!--表单
action：表单提交的位置
method：post，get 提交方式
get方式提交：可以在url中看到提交的信息，不安全，但是高效,默认时候get
post方式提交：比较安全，可以传输大文件-->
<form action="我的第一个网页.html" method="post">
    <!--文本输入框：input type="text"
    value：元素的初始值
     maxlength：text输入的最大字符数
     size：文本框的长度
     readonly：只读
     disabled：禁用
     hidden：隐藏
     placeholder="请输入密码"：提示信息
     required：非空判断
     pattern：正则表达式-->
    <p>用户：<input type="text" name="username" value="wangliyang" maxlength="10" readonly></p>
    <!-- 密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>

    <!-- 单选按钮：input type="radio"
    value：元素的初始值
    默认选中：checked
    name：相同的为同一个组-->
    <p>单选：
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
    </p>

    <!--复选框：input type="checkbox"
    默认选中：checked-->
    多选框：
    <p>
        <input type="checkbox" name="学科" value="语文">语文
        <input type="checkbox" name="学科" value="数学" checked>数学
        <input type="checkbox" name="学科" value="英语">英语
    </p>

    <!--按钮
    input type="button：创建按钮
    input type="button" name:图片按钮-->
    按钮:
    <p>
        <input type="button" name="button1" value="文科">
        <input type="button" name="button1" value="理科">
    </p>

    <!--下拉列表：select
    option：定义下拉列表的选项
    selected：默认初始值-->
    下拉列表：
    <p>
        <select name="选修学科">
            <option value="物理">物理</option>
            <option value="化学" selected>化学</option>
            <option value="生物">生物</option>
        </select>
    </p>

    <!--提交和重置
    input type="submit"：提交按钮
    input type="reset"：重置按钮-->
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>

    <!--文本域
    行：cols="50"
    列rows="10"-->
    文本域：
    <p>
        <textarea name="textarea" cols="50" rows="10">默认显示内容</textarea>
    </p>

    <!--文件域-->
    文件域：
    <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>
    <!--数字验证
    step:增加量-->
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <!--滑块-->
    <p>滑块:
        <input type="range" name="range" max="100" min="0" step="2">
    </p>
    <!--搜索框-->
    <p>搜索:
        <input type="search" name="search" >
    </p>

<!--    增强鼠标可用性-->
    <p>
        <label for="mark">跳到框内</label>
        <input type="text" id="mark">
    </p>
</form>
</body>
</html>
运行效果

在这里插入图片描述

一天到晚写BUG
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
HTML学习笔记(全)
weixin_63676550的博客
01-12 5520
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
html学习笔记
06-22
1.属性，hidden 属性是布尔属性。 注释：在 XHTML 中，属性简写是禁止的，hidden 属性必须定义为 。2.事件
Html学习笔记
10-29
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。
HTML(9)——字体修饰
m0_74386799的博客
06-19 748
如果一组当中两个数是一样的，可以简写为一位数：例如#00ffcc简写为#0fc。font-family属性值可以书写多个字体名用逗号隔开，依次从左到右查找。单行文字想要垂直居中时，可以设置行高属性值与盒子高度属性值一致。想让图片居中，可以给图片加一个父级标签例如<div>设置居中。属性的简写方式，一个属性对应多个值的写法，各个属性值之间用。测量方法：从一行文字的最顶端到下一行文字的最顶端。属性名：text-decoration。属性名：text-indent。属性名：text-align。
前端HTML/CSS知识点系列
weixin_43811753的博客
06-24 691
前端html/css相关常用知识点
HTML【重点标签】
尽欢的博客
06-24 392
相比于有序和无序，它提供了更简洁和带缩进的选择自定义列表的标题—表示自定义列表的整体，用于包裹dt和dd标签自定义列表一行的内容，默认不缩进----示自定义列表的每一项,用于包含一行的内容自定义列表一行的内容，默认缩进----表示自定义列表的每一项,用于包含一行的内容兄弟级别：语义：构建自定义列表特点：dd前会默认显示缩进效果dl标签只允许包含dt和dd标签dt/dd标签可以包含任何内容< dl > 你需要？
HTML静态网页成品作业(HTML+CSS)——新媒体专业介绍介绍网页(1个页面)
weixin_42283461的博客
06-18 313
HTML静态网页成品作业(HTML+CSS)——新媒体专业介绍介绍网页(1个页面)
HTML、JavaScript连接MySQL数据库以及对数据库的表进行修改
最新发布
qq_63170044的博客
06-24 585
要使用HTML和JavaScript连接到MySQL数据库并进行表的修改，通常需要使用一个后端服务器来处理数据库的连接和操作，因为HTML和JavaScript在浏览器中运行，不适合直接连接数据库。常用的后端服务器语言包括Node.js、PHP、Python等。这里我们将使用Node.js作为后端服务器来实现这一功能。
【html】用html5+css3+JavaScript制作一个计数器
weixin_56334307的博客
06-17 507
文件，你应该就能看到一个简单的计数器，每次点击按钮时，计数就会加一。将这三个文件放在同一个文件夹中，并在浏览器中打开。
HTML中有哪些属于表单元素?那些属于表格元素?请分别列举5个并说明用途？
qq_60504665的博客
06-21 397
在HTML中，表单元素和表格元素分别用于不同的目的。
html做一个画柱形图的软件
weixin_47634487的博客
06-20 922
你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见，我们可以使用一个流行的 JavaScript 图表库，比如 Chart.js，它能够简化创建和操作图表的过程。以下是一个完整的示例，展示如何使用 HTML 和 Chart.js 创建一个柱形图绘制工具。
HTML总结
m0_47449012的博客
06-19 803
链接样式表的基本语法： <link rel="stylesheet" href="URL">。<meta http-equiv="refresh" content="30" url="网址参数"> 用于规定页面刷新时间为30s。<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>、<table>、<form>等。<a>、<img>、<input>、<span>、<strong>、<button>等。<meta name="author" content="信息参数"> 用于描述网页作者。
封装vuetify3中v-time-picker组件，并解决使用时分秒类型只能在修改秒之后v-model才会同步更新的问题
OnismYY的博客
06-24 111
封装vuetify3中v-time-picker组件，并解决使用时分秒类型只能在修改秒之后v-model才会同步更新的问题
Html集成 vue3,js文件访问vue内的方法和属性
qq_44871531的博客
06-21 242
1.我们首先需要把 let vm = app.mount(‘#app’);的vm传到js文件中,这样才能访问vue中定义的元素和函数。如下代码,假设index.js文件中有个 getUserInfo函数,2.vue中定义的函数需要return出去才能在js文件中调用。3.js文件中,调用vue中的函数作为参数即可传参到vue中。
黑马html学习笔记
09-15
以下是一些HTML学习笔记的内容： 1. HTML的全称是超文本标记语言，它用于创建网页和网页应用程序的结构。 2. HTML使用标签来定义页面的不同元素。例如，标签用于定义一个标题，标签用于定义一个段落等。 3. HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值