HTML5简单入门

最新推荐文章于 2021-06-07 13:26:18 发布
最新推荐文章于 2021-06-07 13:26:18 发布
阅读量141 收藏
点赞数
分类专栏： 笔记 Html5 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43529244/article/details/110120472
版权

  1. 我的第一个网页

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

<!--head标签代表网页的头部-->
<head>
<!--    描述性标签，他们是描述我们网站的一些信息-->
<!--    meta一般来做seo-->
    <meta charset="UTF-8">
    <meta name ="keyword" content="我是廿六啊">
    <meta name ="description" content="这是我学习HTML5的一个网站">

    <!-- title   网页标题-->
    <title>Title</title>
</head>

<!--body代表网页主体-->
<body>

Weclome to my home!!!
</body>
</html>

  2. 基本标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>

<!--段落标签-->
<p></p>

<!--换行标签-->
<br/>


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

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

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

空格：空 &nbsp;格
<br>
大于号：&gt;
<br>
小于号：&lt;
&copy;版权所有


<!--特殊符号记忆方式-->

<!--块元素：无论内容 多少，该元素独占一行
    p h1-h6

 行内元素：内容撑开宽度左右都是行内元素的可以排在一排
 a strong em-->



</body>
</html>

  3. 图像标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--img学习
src:图片地址
    相对地址，绝对地址
    ../   上一级目录-->
<img src="../resources/image/1.jpg" alt="没找到！！！"title ="小丑可还行"width="600"height="400">

<a href="4.链接标签.html#down">跳转</a>
</body>
</html>

  4. 链接标签

    <!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="https://blog.csdn.net/qq_33369905"target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com"target="_self">点击我跳转到百度</a>


<!--嵌套超链接-->
<a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a>



<!--锚链接-->

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>
<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>
<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>

<p><a href="3.图像标签.html">
    <img src="../resources/image/3.jpg" alt="我这张照片好看吗？"width="100"height="100">
</a></p>



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

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


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

    QQ:QQ链接
    -->
<a href="mailto:834747989@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="加我领取夜里资源，你懂的" title="加我领取夜里资源，你懂的"/></a>

</body>
</html>

  5. 列表

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
    应用范围：试卷 问答、、、-->

<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<hr>
<!--无序列表
    应用范围：导航 侧边栏-->

<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>运维</dd>
    <dd>前端</dd>

    <dt>位置</dt>
    <dd>大连</dd>
    <dd>庄河</dd>
    <dd>沈阳</dd>
    <dd>北京</dd>
</dl>
</body>
</html>

  6. 表格标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格的特点：简单通用，结构稳定-->
<!--基本结构：单元格 行列 -->

<!--行：tr
    列：td-->
<table border="1px">
    <tr>
<!--        colspan:跨行-->
        <td colspan="4">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>

  7. 视频和音频

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频音频学习</title>
</head>
<body>
<!--src:资源选项
    controls：控制条
    autoplay：自动播放-->

<video src="../resources/video/邓园长_敏感.mp4"controls autoplay>小视频</video>
<audio src="../resources/audio/句号%20-%20G.E.M.%20邓紫棋.flac" controls autoplay>邓紫棋</audio>
</body>
</html>

  8. 页面结构

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习</title>
</head>
<body>
<!--headr头部
    footer脚部
    section一块独立的区域-->
<headr><h2>网页头部</h2></headr>

<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>

  9. iframe内联框架

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<iframe src="" name ="hello" frameborder="0" width="800px" height="1000px"></iframe>

<a href="https://mkplayer.hwkxk.cn/" target="hello">点击跳转</a>
</body>
</html>

  10. 表单语法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法学习</title>
</head>
<body>
<h1>注册</h1>

<!--表单
    action：可以是网站 也可以是请求处理地址
    method:post get 提交方式
    <input type="text"> 输入框

    get 方式提交：我们可以在URL中看到我们提交的信息 不安全 高效
    post 方式提交：比较安全 传输大文件
-->
<form action="1.我的第一个网页.html" method="get">

<!--    value="我是廿六 默认
        readonly    只读
        hidden   隐藏域
        maxlength="8"   最长字符
        size="30"   文本框最长长度
        placeholder="请输入账号   提示信息
        required   非空判断
        -->

    <p>名字: <input type="text" name="usename" placeholder="请输入账号：" required></p>

<!--    密码框 <p>密码: <input type="password" name="pwd"></p>-->

    <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 ="check box"
        checked 默认选择
        disabled 禁用
        -->
    <p>爱好：
        <input type="checkbox" value="sleep" name ="hobby" disabled>睡觉
        <input type="checkbox" value="code" name ="hobby">写代码
        <input type="checkbox" value="chat" name ="hobby" checked>聊天
    </p>

<!--    按钮
        input type="button" 普通按钮
        input type="image"  图片按钮-->
    <input type="button" name="btn1" value="点击变长">
<!--    <input type="image" src="../resources/image/1.jpg">-->

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

<!--    下拉框 列表框-->
    <p>下拉框：
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">瑞士</option>
            <option value="选项的值" selected>印度</option>
        </select>

    </p>

<!--    文本域
cols="40" rows="20"行和列-->
    <p>反馈：
        <textarea name="textarea" id="" cols="40" rows="20">文本内容</textarea>
    </p>
    
    
<!--    文件域-->
    <input type="file" name="files">
    <input type="button" value="上传" name ="upload">



<!--    邮件验证-->
    <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="10" step="10"></p>


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

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

<!--    增强鼠标可用性
        指向 一个位置-->
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
<!--pattern  正则表达式-->
    <p>自定义邮箱：
        <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
</form>
</body>
</html>
我是廿六啊
关注
专栏目录
简单的html5页面
11-30
简单的html5页面
HTML5简单入门系列（一）
weixin_30569033的博客
03-31 102
前言 随着HTML5的流行，LZ作为一个web开发者，也决定学习一下前端前沿技术。 HTML5 是下一代的HTML，它将成为 HTML、XHTML 以及 HTML DOM 的新标准。它是W3C（ World Wide Web Consortium）和WHATWG（Web Hypertext Application Technology Working Group）合作的结果，在2014年10月...
HTML5简单概述
gaolele1118的博客
11-14 510
HTML5 是继 HTML4.01 和 XHTML1.0 之后的超文本标记语言的最新版本。它是由一群 自由思想者组成的团队设计出来，并最终实现多媒体支持、交互性、更加智能的表单，以及 更好 的语义化标记。 HTML5 并不仅仅是 HTML 规范的最新版本，而是一系列用来制作现代富 Web 内容的 相关技术的总称，其中最重要的三项技术分别为：HTML5核心规范（标签元素）、CSS（层 叠样式表第三代...
简单的html5,简单的HTML5初步入门教程
weixin_29571873的博客
06-07 344
HTML5 代表未来；W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML，从而使 HTML5 成为正式标准并得到认可。HTML5 是下一代的 HTML。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用(RIA)对Flash、Silverli...
html5-简单知识
Chujianlong321的博客
05-22 171
<!--字体倾斜--> <i>中国</i> <!--字体加粗--> <b>中国</b> <!--下划线--> <u>中国</u> <!--字体删除线--> <del>中国</del> <!--上标--> 3<sup&gt...
HTML5从入门到精通
10-28
本教程《HTML5从入门到精通》旨在帮助初学者快速掌握这一重要的前端技术。 一、HTML5基础知识 HTML5的基本结构包括文档类型声明（<!DOCTYPE html>）、html标签、head标签和body标签。它们构成了一个基本的HTML页面...
HTML5 从入门到精通PDF版本下载.txt
07-17
根据提供的文件信息，本文将对《HTML5 从入门到精通》这一主题进行详细的知识点梳理，以便读者能够更好地理解HTML5的基础与高级应用。 ### 一、HTML5概述 HTML5是超文本标记语言（HyperText Markup Language）的第...
html5+css3从入门到精通
09-07
2. **媒体元素**：HTML5的和标签使得直接在网页中嵌入音频和视频变得简单，不再依赖Flash等插件。 3. **离线存储**：通过离线存储（Offline Storage，如localStorage和sessionStorage），HTML5允许网页在用户离线时...
HTML5+CSS3从入门到精通 源码和示例
09-25
本书“HTML5+CSS3从入门到精通”由Terry Felke-Morris撰写，旨在帮助初学者和有经验的开发者深入理解和掌握这两种技术。 HTML5作为第五代超文本标记语言，其主要改进包括： 1. 新增语义化标签：如、、、等，提高了...
html5入门教程附源码
09-02
这个"html5入门教程附源码"是针对初学者设计的，旨在帮助他们快速掌握HTML5的基础知识并实践编程。 HTML5的主要改进包括： 1. **语义化标签**：HTML5引入了一系列新的语义元素，如、、、、和等，这些标签让网页...
一个简单的HTML5小例子
07-25
对于一个初学者来说，最消耗时间的地方就是基础，因此希望通过此例子的一些注释讲解能让初学者更快的了解html5
html5最简单的例子
03-27
html5最简单的例子,通过这个例子可以进一步了解html5，让你喜欢上html5。
HTMl5简单例子
09-13
HTMl5兴起之后,其许多绚丽的效果让好多网站开发者欣喜.本例是基于HTMl5的基础做了一些示例,展示文稿也采用网页展示,其中大量用了Jquery动画,不足之处,请大家指正,一起进步.由于HTML5大多数浏览器支持的还不是很好,建议使用chrome浏览器.
HTML5简单学习
qq_40043345的博客
04-07 168
HTML5 一、基本标签学习： 文件标签：构成html最基本的标签 html:html文档的根标签 head：头标签。用于指定html文档的一些属性。引入外部的资源 title：标题标签。 body：体标签 ：html5中定义该文档是html文档 文本标签：和文本有关的标签 注释： h1 to h6：标题标签 h1~h6:字体大小逐渐递减 p：段落标签 br：换行标签 hr：展示一条水平线 属性： color：颜色 width：宽度 size：高度 align
简单解释HTML5
一风
04-25 630
第一章、HTML5篇一、介绍HTML51、介绍：​ 其是一种由标签组成的超文本标记语言，而非编程语言，一个html5文档就是一个网页。2、特点​ a、html文档描述网页 b、包含标签和纯文本 c、浏览器不会显示HTML标签，而是使用标签解释页面内容​ d、标签不会在区分大小写​ e、允许属性值不加引号​ f、允许部分属性的属性值省略二、基本的HTML5文档 &lt;!do...
HTML5简单介绍
小白初见
08-05 372
HTML5部分基础标签 < head > < /head > 定义了文档的各种属性和信息 < body >< /body > 负责页面显示的内容 < h > < /h >标题标签： 标题标签一共有六级,分别为：h1,h2,h3,h4,h5,h6。字体大小从大到小依次减少。在使用标题标签的时候，我们可以声0明一个h7标签，但是因...
一个简单的html5Demo
rentian1的博客
01-10 5410
<DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv=X-UA-Compatible content="IE=edge,chorme=1"/> <meta http-equiv="Content-Type" content="text/html
HTML5入门基础与实战探索
"《HTML5基础入门.pdf》是一本针对HTML5初学者的入门书籍，主要涵盖HTML5的基础知识，适合新手学习。书中提到HTML5的发展历程，从1991年的HTML开始，历经多个阶段，最终在2009年形成HTML5草案。HTML5不仅仅是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值