HTML5学习笔记

最新推荐文章于 2024-11-09 22:25:43 发布
最新推荐文章于 2024-11-09 22:25:43 发布
阅读量65 收藏
点赞数
文章标签： html5 vscode html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48040227/article/details/120270857
版权
本文详细介绍了HTML的基础标签，包括标题、段落、换行、图像、链接、列表、表格、媒体元素等，同时讲解了VSCode常用插件如openinbrowser、AutoRenameTag等，以及页面结构元素如header、footer、section等。此外，还探讨了表单的基本语法和验证方法，以及如何使用内联框架iframe。
摘要由CSDN通过智能技术生成

1、VSCode常用插件：

open in browser右键选择浏览器打开html文件
Auto Rename Tag自动重命名配对的html/xml标签
Chinese (Simplified) Language Pack for Visual Studio Code中文（简体）语言包
CSS Peek追踪至样式

2、网页标签

2.1.基本标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本标签学习</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    
    <!-- 段落标签 -->
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>

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

    <!-- 换行标签 -->
    第一段<br/>
    第二段<br/>
    第三段<br/>

    <!-- 粗体，斜体 -->
    <h1>字体样式标签</h1>
    <strong>粗体：I love you</strong>
    <em>斜体：I love you</em>

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

    <!-- 特殊符号记忆方式
    &；
    -->
   
</body>
</html>

2.2.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签学习</title>
</head>
<body>
    <!-- src:图片地址
        相对地址（推荐），绝对地址
        ../ --上一级目录

        alt:图片名字（必填）
    -->
    <img src="1.jpg" alt="头像" title="悬停文字" width="300" height="300">
</body>
</html>

2.3.链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签学习</title>
</head>
<body>
    <!-- 使用name作为标记 -->
    <a name="top">顶部</a>


    <!-- 
        a标签
        href:必填，表示要跳转到哪个页面
        target:表示窗口在哪里打开
        _blank:在新标签中打开
        _self:在自己的网页中打开（不设置target时，默认为self）
    -->
    <a href="1.我的第一个html文件.html" target="_blank">点击我跳转到页面</a>
    <a href="https://wwww.baidu.com" target="_self">点击我跳转到百度</a>

    <br/>

    <p>
        <a href="1.我的第一个html文件.html">
            <img src="1.jpg" alt="头像" title="悬停文字" width="300" height="300"/>
        </a>
    </p>
    <p>
        <a href="1.我的第一个html文件.html">
            <img src="1.jpg" alt="头像" title="悬停文字" width="300" height="300"/>
        </a>
    </p>
    <p>
        <a href="1.我的第一个html文件.html">
            <img src="1.jpg" alt="头像" title="悬停文字" width="300" height="300"/>
        </a>
    </p>
    <p>
        <a href="1.我的第一个html文件.html">
            <img src="1.jpg" alt="头像" title="悬停文字" width="300" height="300"/>
        </a>
    </p>
    <p>
        <a href="1.我的第一个html文件.html">
            <img src="1.jpg" alt="头像" title="悬停文字" width="300" height="300"/>
        </a>
    </p>


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

    <a href="down"></a>


    <!-- 
        功能性链接
        邮件链接：mailto
        QQ链接：
     -->
     <a href="mailto:15463860@qq.com">点击联系我</a>
     <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=15463860&site=qq&menu=yes">
        <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我领取小电影" title="你好，加我领取小电影"/>
    </a>
    
</body>
</html>

2.4.列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表学习</title>
</head>
<body>

    <!-- 有序列表
    应用范围：试卷、问答...
    -->
    <ol>
        <li>Java</li>
        <li>python</li>
        <li>运维</li>
        <li>前端</li>
        <li>C/C++</li>
    </ol>

<hr/>

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

    <!-- 自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
    -->
    <dl>
        <dt>学科</dt>

        <dd>Java</dd>
        <dd>python</dd>
        <dd>Linux</dd>
        <dd>C</dd>

        <dt>位置</dt>

        <dd>西安</dd>
        <dd>重庆</dd>
        <dd>武汉</dd>
        
    </dl>
</body>
</html>

2.5.表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 表格table
    行  tr
    列  td
    -->
    <table border="1px">
        <tr>
            <!-- colspan 跨列 -->
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <!-- rowspan 跨行 -->
            <td rowspan="2">小明</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="2">大明</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

2.6.媒体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体元素学习</title>
</head>
<body>
    <!-- 音频和视频
    v
    src：资源路径
    controls：控制条
    autoplay：自动播放
    -->
    <audio src="龙卷风.mp3" controls autoplay></audio>
    
    <video src="龙卷风.mp4" controls autoplay></video>
</body>
</html>

3.页面结构分析

元素名描述
header标题头部
footer标题脚部
sectionWeb页面中一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类复制内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面结构分析</title>
</head>
<body>
    <header>
        <h2>网页头部</h2>
    </header>

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

    <footer>
        <h2>网页脚部</h2>
    </footer>
</body>
</html>

4.iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- iframe内联框架
        src：地址
        w-h：宽度高度

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

5.表单

5.1.基本语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆注册</title>
</head>

<body>

    <h1>注册</h1>
    <!-- 表单form
        action：表单提交的位置可以是网站，也可以是一个请求处理地址
        method：post，get提交方式
            get：我们可以在url中看到我们提交的信息，不安全，高效
            post：比较安全，传输大文件
    -->

    <form action="1.我的第一个html文件.html" method="POST">
        <!-- 文本输入框：input type="text"
            value：默认初始值
            maxlength：最长能写几个字符
            size：文本框的长度
        -->
        <p>名字：<input type="text" name="username"></p>
        <!-- 密码框：input type="password" -->
        <p>密码：<input type="password" name="pwd"></p>

        <!-- 单选框标签
            input type="radio"
            value：单选框的值
            name：表示组，组一样则只能选一个
        -->
        <p>
            <input type="radio" value="boy" name="sex" checked />男
            <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">敲代码
            <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="1.jpg">
        <p>


        <p>国家
            <select name="列表名称">
                <option value="china">中国</option>
                <option value="us">美国</option>
                <option value="eth">瑞士</option>
                <option value="yingguo">英国</option>
            </select>
        </p>

        <!-- 文本域
             cols="50" rows="10"
        -->
        <p>
            <textarea name="textarea" 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"/>
        </p>

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

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

        <!-- 滑块
            input type="range"
        -->
        <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">
        </p>
    </form>
</body>

</html>

5.2.表单的应用

隐藏域hidden
只读readonly
禁用disabled
增强鼠标可用性label

5.3.表单初级验证

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

weixin_48040227
关注
Web前端基础Html5学习笔记详细（2）
Fightingdddd的博客
06-29 4750
阿树想说 挺困的，，Html 换个方式记单词，还好阿树的词汇量自我感觉不错，对学习英语的兴趣也依然不减。 总结了一些比较重要的也是需要记的东西。资料源网，我比较喜欢用自己比较记得住的方式整理。 Html5学习笔记（1） ...
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2366
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
html5——前端笔记
qq_48721706的博客
09-02 2908
html笔记
html5+css3学习笔记（持续更新
flyffffly的博客
03-17 1156
其实我早在之前就学过，只不过当时并没有记录下来，也没有理解其底层原理，所以现在再次学习一遍，本文将记录我二次学习的过程。
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
HTML5学习笔记-02-表单属性
欢迎访问我的主页：https://www.bookbook.cc
07-01 8297
文章目录一、fieldset + legend二、必须输入required 输入提示placeholder三、input 类型3.1 password3.2 email3.3 url3.4 tel四、其他属性4.1 maxlength 限制最大输入字符4.2 readonly 只读4.3 disabled 禁用 一、fieldset + legend <body> <form action="get" action="1.php"> <fieldset&
html学习笔记
liyi67的博客
11-19 8548
#第一周学习笔记 ##11月15日 第一个自己的网页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
前端之HTML学习笔记一
m0_53211178的博客
02-28 8268
目录 1.网页 1.1网页的概念 1.2HTML的概念 1.3网页的形成 2.常用的浏览器 3.web标准 3.1为什么需要web标准 3.2web标准的构成（重点） 1.网页 1.网页 1.1网页的概念 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
HTML5学习笔记之html5与传统html区别
12-14
HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下： 1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。 2.HTML5中，刻意不使用版本声明，一份文档将会适用于所有...
HTML5学习笔记（总结提炼版）——001
03-14
本学习笔记将聚焦于HTML5的基础知识，包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签：HTML5引入了新的语义化标签，如、、、和等，这些标签有助于更好地组织内容，提高可读性和可访问性。 2. ...
web前端HTML5学习笔记
09-07
前端笔记HTML5部分
HTML5的文本样式
2302_79986066的博客
11-05 1106
2 再设置一个position:relative top:元素本身高度的一半。2 再设置一个position:relative top:元素本身高度的一半。1如果确定了高度 行高 == 父元素的高度。1如果确定了高度 行高 == 父元素的高度。/*HTML标签 font-size=16px*/font-family: "楷体";3 字体粗细 font-weight:px。font-style: "楷体";2 字体大小 font-size:px。2 字体大小 font-size:px。
vscode的一些使用心得
masteryi-0018的博客
10-30 1135
vscode的一些使用心得
利用 Screen 保持 VSCode 连接远程任务持续运行
一只通信仔的博客
11-09 180
使用 VSCode 连接 AutoDL 等远程服务器时，SSH 断开会导致任务中断。本文介绍了如何利用 screen 命令保持进程持续运行，即使断开连接也能继续执行，并支持随时恢复查看，帮助用户轻松管理和终止远程任务。
VSCode设置长行自动折行
最新发布
荷塘月色
11-09 61
有时候一行代码或者是注释会比较长，为了方便阅读，习惯让它折行显示；而VSCode在默认情况下，是不会自动折行的，这不利于阅读，我们可以通过设置来达到折行的效果。
VSCode进阶之路
欢迎来到我的博客，希望你能有所收获！
10-31 2009
VSCode进阶之路。
vscode摸鱼学习插件开发
weixin_44012931的博客
10-31 1948
不知道大家在摸鱼的时候，会不会想要学习？或者有没有考公人，下班要学习的？上班时间摸鱼，下班时间不够学习？为此，我决定开发一个vscode插件，来刷粉笔题粉笔插件名称：Fenbi Toolsvscode扩展可搜索安装摸鱼插件：Fish Tools。
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值