HTML学习

摆渡人_张余歌

已于 2022-06-14 17:26:26 修改

阅读量290

点赞数

分类专栏： 0-学习笔记文章标签： html5 html 前端

于 2021-12-03 00:59:55 首次发布

本文链接：https://blog.csdn.net/m0_48263336/article/details/121689972

版权

0-学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5的优势，包括其跨平台特性、W3C标准的支持以及各浏览器厂商的接纳情况。内容涵盖HTML5的基本语法、元素、表单、多媒体和页面结构，同时探讨了其在前端开发中的重要性。此外，还提到了HTML5的验证方法和表单应用。

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

HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台

W3C标准

w3c

Word Wide Web Consortium（万维网联盟）
成立于1994年，web技术领域最权威和最具有影响力的国际中立性技术标准机构
World Wide Web Consortium (W3C)
W3C中国

w3c标准包括

结构化标准语言（THML、XML）
表现标准语言（css）
行为标准（DOM、ECMAScript）

常见的IDE

记事本
Dreamweaver
IDEA
WebStorm
......

html5

注释：
<mate charset="UTF-8">

图片标签

常见的图片格式：jpg、gif、png、bmp、......

链接标签

<!--a标签

href:必填，表示要跳转到哪个页面

target：表示窗口在哪里打开

_blank 在新标签中打开

_在自己的网页中打开

-->

锚链接

<!--锚链接

1.需要一个锚标记

2.跳转到标记

3.#

-->

功能性链接

邮件链接：mailto:
点击联系我
QQ链接

行内元素和块元素

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

列表

有序列表：<ol> <li>有序列表</li></Ol>
无序列表：<ul> <li>无序列表</li></ul>

自定义列表：

<dl>
    <dt>课程</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c++</dd>    
</dl>

表格

<!-- 表格 table

行 tr rows

列 td column

跨行 colspan

跨列 rowspan

-->

音频和视频

页面结构分析

header:标题头部区域的内容（用于页面或者页面中的一块区域）
footer：标记脚步区域的内容（用于整个页面或者页面的一块区域）
section：web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用（常用于侧边栏）
nav:导航类辅助内容

学习表单

<html>

<body>

    <form action="myboyfriend.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" checked/>男
            <input type="radio" value="girl" name="sex" />女
        </p>

        <!--多选框  input type="checkbox"-->
         <p>爱好：
            <input type="checkbox" value="read" name="hobby" checked/>阅读
            <input type="checkbox" value="music" name="hobby" />听歌
            <input type="checkbox" value="study" name="hobby" />学习
        </p>

        <!--按钮  
        input type="button" 普通按钮
        input type="image" 图片按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        -->
        <p>按钮：
            <input type="button" value="点击" name="btn1" />
            <input type="image" src="../resources/image/1.jpg">
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>

        <!--文本域 <textarea></textarea>-->
        <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="1"></p>
        
        <!--滑块 input type="range"-->
        <p>音量：<input type="range" name="voice" max="100" min="0" step="2"></p>
        
         <!--搜索框-->
        <p>搜索：<input type="search" name="search"></p>
        
        <!--增强鼠标可用性-->
        <lable for="mark">你点我试试</lable>
        <input type="text" id="mark">
        
        <p>
            <input type="submit" >
            <input type="reset" value="清空表单">
        </p>
        
        
    </form>
</form>

</body>

</html>