HTML5学习

最新推荐文章于 2024-08-20 19:23:57 发布
最新推荐文章于 2024-08-20 19:23:57 发布
阅读量54 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wtyv3164/article/details/127454075
版权

第一天

  1. 注释 (快捷键 ctrl+/ )

  2. 在这里插入图片描述

  3. 基本标签

    习惯性写自闭合标签/ eg: 

    <!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>
    <p>因为黑夜太难熬</p>
    <p>总以为哭过就好</p>
    <p>梦和现实对调</p>
    <p>穿越了城市的喧闹</p>
    <p>夜太深 心跳呢</p>
    <p>已经遗失了 不见了</p>
    <p>爱上你 心跳呢</p>
    <p>慢慢 停止了 不爱了</p>
    <p>你紧紧拥抱我入睡</p>
    <p>曾经是永恒的画面</p>

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

    <!-- 换行标签 -->
    回忆上了发条<br/>
    总准时报到<br/>
    我让日夜颠倒<br/>
    因为黑夜太难熬<br/>
    总以为哭过就好<br/>
    梦和现实对调<br/>
    穿越了城市的喧闹<br/>
    夜太深 心跳呢<br/>
    已经遗失了 不见了<br/>
    爱上你 心跳呢<br/>
    慢慢 停止了 不爱了<br/>
    你紧紧拥抱我入睡<br/>
    曾经是永恒的画面<br/>


    <!--粗体，斜体  -->
    <h1>字体样式标签</h1>

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

    <!-- 特殊符号 -->
    <br/>

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



    
    
    
    
    
</body>
</html>

  4. 图像标签

    存放resources(eg:images,videos)的文件夹，想用相对路径打开，应与html同级，以便于用…/(返回上一级)

    <!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>
    <!-- img学习
     src : 图片地址  (必填)
           相对路径 ，绝对路径
           ../  --上一级目录

     alt : 图片名字 (必填)
     title ： 鼠标悬停文字 
     width ： 图片宽度
     height : 图片高度     

    
    
    -->
<img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">    
    
</body>
</html>

    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>
    
    <!-- 使用name作为标记 -->
    <a name="top">顶部</a>

    
    
<!-- ||页面间链接，从一个页面链接到另一个页面|| -->
    <!-- a标签
    href :必填，表示要跳转到那个页面
    target : 表示窗口在哪里打开
         _blank : 在新标签中打开
         _self : 在自己的网页中打开
    
    -->
    <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
    <a href="2.基本标签.html" target="_self">点击我跳转到页面二</a>
    <a href="https://www.baidu.com">点击我跳转到百度</a>

    <br>

    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>        
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    
<p>
    <a href="1.我的第一个网页.html">
        <!-- 可以用图片跳转到页面 -->
        <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600">
    </a>

</p>    







<!-- 锚链接
 1.需要一个锚标记
 2.跳转到标记 (通过a href 跳转) 
 #+标记名字
 3.name在哪里跳转到哪里


-->

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

<a name="down">down</a>



<!-- 功能性链接
邮件链接 ： mailto

-->
<a href="mailto:2980419362@qq.com">点击联系我</a>



    
</body>
</html>

第二天

  1. 在这里插入图片描述

  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>

    <!-- 有序列表(ordered list)
        应用范围 ： 试卷 ， 问答
     -->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol> 

<hr/>

<!-- 无序列表(unordered list)
应用范围 ： 导航 ， 侧边栏
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<hr>

<!-- 自定义列表
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>

    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>

<!-- 表格table
行 ： tr
列 ： td
border : 边框   
    -->

<table border="1px">
    <tr>
        <!-- colspan 跨列 -->
        <!-- align="center" 居中 -->
        <td colspan="4" align="center">1-1</td>
        
    </tr>
    <tr>
        <!-- rowspan跨行 -->
        <td rowspan="2">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>
        
    </tr>
</table>     
    
</body>
</html>

    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>

<!-- 音频(audio)和视频(video)
src : 资源路径
controls ： 控制条
autoplay ： 自动播放(chorme禁止了自动播放，需在src前加muted)
    
    
-->

    <video muted src="../video/1..mp4" controls autoplay></video>
    <br>
    <audio src="../w-audio/▶ Tik Tok - 2PM&尹恩惠.mp3" controls></audio> 

    
</body>
</html>

  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>
    <header>
         <h2>网页头部</h2>
         </header>
    <section>
         <h2>网页主题</h2>
         </section>
    <footer>
         <h2>网页脚部</h2>
         </footer>
</body>
</html>

  1. 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>Title</title>
</head>
<body>
    <!-- iframe内联框架
        src : 地址
        w-h :宽度高度


-->

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

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






    <!-- 嵌入代码若转载失败，记得加https: -->
    <!-- <iframe src="http://player.bilibili.com/player.html?aid=689105858&bvid=BV1Rm4y1A77J&cid=861814023&page=1"  -->
    <!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> -->
 <!-- </iframe> -->
</body>
</html>

在这里插入图片描述

  1. 学习表单

    a. 登录注册

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

在这里插入图片描述

在这里插入图片描述

text:文本框， password:密码框，checkbox:多选框，radio：单选框

<!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" method="get">
        <!-- 文本输入框 ： input type="text"
            value="柒柒"  默认初始值
            maxlength="8"  最长能写几个字符
            size="30"  文本框的长度
         
        -->
        <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">男
            <input type="radio" value="girl" name="sex">女

        
        
        </p>

         <!--多选框
            input type="checkbox"
v        -->
        <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="../images/1.jpg">
            

        </p>

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









     </form>

    
</body>
</html>
今夕是何夕O_o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
Web前端基础Html5学习笔记详细（2）
Fightingdddd的博客
06-29 4707
阿树想说 挺困的，，Html 换个方式记单词，还好阿树的词汇量自我感觉不错，对学习英语的兴趣也依然不减。 总结了一些比较重要的也是需要记的东西。资料源网，我比较喜欢用自己比较记得住的方式整理。 Html5学习笔记（1） ...
HTML5 学习准备
Dunkle.T的博客
11-08 6758
HTML5 学习准备 要点：   学习HTML5需要用到的有：     1.测试代码，观看页面的浏览器。     2. 编程使用的编码工具。     3. 记录学习心得，重难点的记录方式。 1、浏览器选择   Chrome谷歌浏览器   这里就不过多的介绍支持HTML5的浏览器了，目前绝大多数浏览器都支持HTML5。但是Chrome浏览器对于HTML5的支持是最好的，用户基数更大，建议直接使用Chrome。 2、开发工具   Sublime Text 3   开发工具我们使用的是 Sublime Text
html自学哪些网站免费,精选13个HTML5学习必备网站
weixin_39554775的博客
05-30 3742
最近项目原因接触到html5，发现里面需要了解的事情蛮多的，所以做了一些整理。给大家学习研究HTML5的时候提供一些便利和参考，有学习需求的同学，也可以根据这个对html5的学习和研究。PM需要了解的HTML5基础知识站1.W3C HTML 5 权威教程，学习HTML5的各种标签，查询参考手册，以及运行效果，建议大家从起步了解。链接2.一个HTML 5的文档资料网站，做得很出色。介绍的图片全是用...
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 9485
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
HTML5学习之路（电影影评网）
qq_44023710的博客
03-15 6100
HTML5学习之路 首先了解一下HTML的特性： 1.良好的语义特性；增加了各种元素赋予网页更好的意义和结构，使文档更加清晰明确，新增的如header，article，nav,main,aside,footer等。 2.强大的绘图功能：HTML5之前的版本没有绘图功能，在网页只能显示已有的图片，在HTML5中可以通过CanvansAPI动态绘图，也可以通过SVG绘制可伸缩矢量图形。 3.增加音视频播放和控制功能；新增audio和video元素，可以不依赖插件播放音频和视频。 4.HTML5的数据存储和数据处
HTML5学习资料推荐
勿忘初心
08-17 2657
1、Html 5文档 2、Html 5中国 3、HTML5中文网 4、Html 5研究小组
WebStorm 初步使用 & HTML5 学习报告
热门推荐
weixin_38057349的博客
04-15 5万+
WebStorm 初步使用WebStorm介绍WebStorm是Jetbrains公司旗下的一款JavaScript开发工具，因其界面简洁，操作方便，被广大国内JS开发者誉为“Web前端开发神器”。WebStorm具有智能代码补全、代码格式化、html提示、联想查询、代码调试等多种优势功能，其对业界最新技术提供支持，支持流行的版本控制系统，为前端开发人员提供了极大的方便。WebStorm安装到官网...
HTML5学习笔记-01-html语义化标签
欢迎访问我的主页：https://www.bookbook.cc
06-30 8711
一、URl 二、网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别 2.1 声明英文网站 2.2 声明中文网站 三、meta 3.1 keyword 表示搜索关键字 3.2 description 网站摘要 3.3 Viewport 响应式声明 四、语义化标签 4.1 header 头部区域 4.2 footer 尾部区域 4.3 nav 导航区域 4.4 article(文章) 主内容区域 4.5 section(部分) 定义文档中相似的区域 4.6 asi
用HTML5实现灯笼效果
cnds123的专栏
02-08 4156
用HTML5实现灯笼效果
HTML5学习资料
03-25
包含了：HTML5 AND CSS3 SECOND EDITION.pdf、HTML5 in Action .pdf、HTML5与CSS3权威指南 .pdf、Mobile First Design with HTML5 and CSS3 .pdf、Moblile HTML5 .pdf
html 5学习.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML5学习手册
09-04
HTML5学习手册，资源来自学习过程中收集，CHM文件简单方便，包括所有HTML5相关知识，标签等。希望对大家有帮助！
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 486
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
JS（三）——更改html内数据
初叙
08-15 356
JavaScript更改html内数据
Java学习Day32：HTML 第二章：黑风山
最新发布
weixin_51721783的博客
08-20 664
我是儿子</a> <p> <a href="#">我是孙子
Vue插值：双大括号标签、v-text、v-html、v-bind 指令
pan_junbiao的博客
08-20 394
创建应用程序实例后，需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动进行更新。这样就无须手动获取 DOM 的值，使代码更加简洁，提高了开发效率。文本插值是数据绑定最基本的形式，使用的是双大括号标签。它会自动将绑定的事件实时显示出来。
Javaweb学习之HTML（二）
2301_80841939的博客
08-17 646
TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。
HTML多媒体元素
2301_79155654的博客
08-15 1240
控制iframe中可以使用的功能，一般包括自动播放（autoplay）、加速计（accelerometer）、剪贴板写入（clipboard-write）、加密媒体（encrypted-media）、陀螺仪（gyroscope）和画中画（picture-in-picture）。为了确保音频和视频内容能够在所有浏览器中正常播放，通常需要提供多种格式的音频和视频文件，并在。这使得我们可以在网页的一个部分显示来自其他来源的内容，而无需将这些内容直接存储在服务器上。在给出的分享选项中，选择嵌入。
HTML5学习精华：新特性与标签解析
"HTML5学习.pptx" HTML5是现代网页开发的核心标准，它整合了HTML、CSS3和JavaScript，并引入了一系列新API，旨在提升用户体验和开发者效率。HTML5的标准改变体现在多个方面，首先，它不再基于SGML或XML，而是以更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值