HTML5学习简记(更新中~)

这篇具有很好参考价值的文章主要介绍了HTML5学习简记(更新中~)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

HTML定义

标签

HTML基本骨架

常见标签

标题标签

 段落标签

 换行与水平线标签

 文本格式化标签

        图像标签

        绝对路径与相对路径

        超链接标签

        音频与视频标签

 列表标签

无序列表

有序列表

 定义列表

表格标签 

表格结构标签

合并单元格

表单标签

input标签

 input标签占位文本

真正实现单选功能

上传多个文件

下拉菜单标签

文本域标签 

label标签

button标签​编辑

 无语义的布局标签

div标签

span标签

字符实体


HTML定义

HTML是一种超文本标记语言,超文本即我们在网页中看到的链接,标记指的是语言中的标签


标签

标签一般成对出现,结束标签比开始标签多一个/

此外标签一般分为单标签与双标签HTML5学习简记(更新中~),学习


HTML基本骨架

HTML5学习简记(更新中~),学习 其中,HTML标签代表整个网页,head标签代表网页的头,它里面存放给浏览器看的内容,比如CSS,body代表网页的主体,用于存放给用户看的信息

这里也可以看出标签之间的关系共有两种:兄弟关系、父子关系


常见标签


标题标签

标题标签有6种,标签名为h1~h6

标签显示效果为

  • 文字加粗
  • 字号逐渐变小
  • 独占一行

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


 段落标签

标签名为p(双标签)

显示特点:

  • 独占一行
  • 段落之间存在间隙

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


 换行与水平线标签

  • 换行:<br>单标签
  • 水平线:<hr>单标签

 HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


 文本格式化标签

作用:为文本添加特殊格式,用于突出重点,例如加粗、倾斜、下划线、删除线等

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习 HTML5学习简记(更新中~),学习


图像标签

标签名:img

标签属性src用于指定图像的位置 

除src属性外,img标签还有以下属性

HTML5学习简记(更新中~),学习

这里的width属性与height属性在改变时浏览器会自动等比例调整,这两个属性了解即可

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


绝对路径与相对路径

绝对路径:在windows系统中是从磁盘开始的路径,在其他系统可能是从根目录开始的路径(统一使用/即可)

相对路径:从当前文件所在位置开始的路径


超链接标签

标签名:a

属性href用于指定跳转地址

HTML5学习简记(更新中~),学习

如上图所示,target属性指定为_blank可以使得页面跳转是开启一个新页面而不是覆盖当前页面

在开发中如果暂时不清楚跳转地址的话可以将href属性值定位#


音频与视频标签

音频标签名:audio

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习

值得说明的是,这里因为属性值与属性名一样所以可以简写为属性名即可HTML5学习简记(更新中~),学习

 视频标签名video

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习 HTML5学习简记(更新中~),学习


 列表标签

无序列表

标签:ul嵌套li,ul是无序列表,li是列表条目

 HTML5学习简记(更新中~),学习

注意ul标签里只能包裹li标签

但是li标签里可以包裹任意标签

有序列表

标签:ol嵌套li,ol是有序列表,li是列表条目

HTML5学习简记(更新中~),学习

 定义列表

定义列表通常用于一个网页的底部,如下图所示

HTML5学习简记(更新中~),学习

标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

HTML5学习简记(更新中~),学习


表格标签 

        HTML5学习简记(更新中~),学习 

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习

  • table标签属性border-collapse
    • 默认属性值separate
    • 属性值collapse可以使得table标签与th标签td标签的边框合并

表格结构标签

作用:使用表格结构标签把内容划分区域,使得表格结构更加清晰,语义更清晰

注意这些标签是对浏览器说明的,只是加强语义 

且编写table标签后F12查看发现table下自带tbody标签,是因为在编写页面没写<tbody>时,浏览器会直接帮我们创建这些标签所对应的对象。隐式的<tbody>会把头<thead>、脚<tfoot>全部包含进去。

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


合并单元格

HTML5学习简记(更新中~),学习

注意不能跨结构标签进行合并单元格 

<!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>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>

表单标签

作用:收集用户信息

标签名:form标签

在form标签里统一管理相关标签

使用场景:

  • 登陆页面
  • 注册页面
  • 搜索页面

input标签

HTML5学习简记(更新中~),学习

  <input required type="text">
//required属性表示该标签内容 非空

 

<!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>
    文本框:<input type="text">
    <br><br>
    密码框:<input type="password">
    <br><br>
    单选框:<input type="radio">
    <br><br>
    多选框:<input type="checkbox">
    <br><br>
    文件上传:<input type="file">
</body>
</html>

HTML5学习简记(更新中~),学习

这里的文本框默认得到焦点后会拥有一个边框样式outline

如果想要删除该默认样式使用outline:none即可


 input标签占位文本

即input标签中的placeholder属性

<!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>
    文本框:<input type="text" placeholder="请输入用户名">
    <br><br>
    密码框:<input type="password" placeholder="请输入密码">
</body>
</html>

HTML5学习简记(更新中~),学习


真正实现单选功能

HTML5学习简记(更新中~),学习

注意这里的checked属性在多选框中同样适用

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


上传多个文件

在原先的input标签中添加属性multiple即可一次上传多个文件

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习


下拉菜单标签

标签:select嵌套option,select标签是下拉菜单整体,option是下拉菜单的每一项

HTML5学习简记(更新中~),学习

其中selected属性是用于选定默认选择哪一项


文本域标签 

作用:多行输入文本的表单控件

标签:textarea

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习

如果不希望文本域的宽度与高度可以被用户改变的话,可以添加resize: none


label标签

作用:增大点击范围

HTML5学习简记(更新中~),学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" id="man" name="gender"><label for="man">男</label>
    <label><input type="radio" name="gender">女</label>
</body>
</html>

button标签

HTML5学习简记(更新中~),学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入你的内容">
        <br><br>
        <input type="password" placeholder="请输入密码">
        <br>
        <button type="button">普通按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
    </form>
    
</body>
</html>

HTML5学习简记(更新中~),学习


 无语义的布局标签

div标签

它是独占一行的

span标签

它是不换行的

HTML5学习简记(更新中~),学习


字符实体

概念上类似语言中的转义字符

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习

HTML5学习简记(更新中~),学习

  


header标签

HTML <header> 元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。

即header标签是一个布局标签,并且要求:

header标签中必须包含一个标题标签,并且子元素不唯一,否则不适用header标签。如果仅是为了样式,请使用DIV标签,避免header标签的滥用。文章来源地址https://www.toymoban.com/news/detail-581475.html

到了这里,关于HTML5学习简记(更新中~)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端学习——HTML5

    新增布局标签 新增状态标签 新增列表标签 新增文本标签 新增表单控件属性 input新增type属性值 新增视频标签 新增音频标签

    2024年02月12日
    浏览(55)
  • html5前端学习

    定义HTML文档,浏览器看到后就明白这个是HTML文档,所以其他元素要包裹在它里面,标签限定了文档的开始点和结束点。 head标签用于定义文档的头部,描述了文档的各种属性和信息,包括文档的标题、在Web的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会

    2024年02月08日
    浏览(50)
  • html5前端学习2

    一篇思维题题解: 第五周任务 [Cloned] - Virtual Judge (vjudge.net) K - Summer Vacation-CSDN博客  快捷键: Ctrl+Alt+Down        向下选取 Ctrl+Alt+Up             向上选取(会出现多个光标,可以同时输入) Ctrl+Enter                无论光标在哪个位置,都向下换行,与Enter有区别 链接分

    2024年02月10日
    浏览(98)
  • html5学习精选5篇案例

      html5学习心得1 一:了解HTML5前端开发技术 HTML 指的是超文本标记语言 (Hyper Text Markup Language),标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页。HTML5区别于HTML的标准,基于全新的规则手册,提供了一些新的元素和属性,在web技术发展的过程中成为新的里程

    2024年02月12日
    浏览(38)
  • HTML5 Web Storage学习

    web Storage是html5新增的数据存储方法,它与cookie之间的区别在于, 存储空间:cookie 的大小被限制在 4KB,Storage大小一般为 5~10MB,与具体浏览器有关; 网络消耗:只要涉及 cookie 请求都会携带cookie数据,消耗网络的带宽,Storage不会自动发送到服务器; 使用方面:Storage 提供了更

    2024年02月12日
    浏览(33)
  • html5学习笔记14-Canvas 图形

    https://www.runoob.com/html/html5-canvas.html Canvas 参考手册. https://www.runoob.com/tags/ref-canvas.html HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 创建一

    2024年02月11日
    浏览(52)
  • html学习笔记12-HTML5、浏览器兼容性问题

    https://www.runoob.com/html/html5-intro.html HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持

    2024年02月11日
    浏览(43)
  • 零基础学习HTML5(各标签语法介绍)

    vscode + 谷歌浏览器 vscode下载地址:https://code.visualstudio.com/ 谷歌可以使用360软件管家安装 在vscode中安装插件: open in browser ,点击Extensions后搜索对应插件名然后点击安装Install 安装完成后可在html文件中右键多了两个选择: 或者安装 live server 插件,然后右键选择 Open with live

    2024年02月07日
    浏览(45)
  • HTML5中Canvas学习笔记:Canvas

    目录 一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么? 二、如何设置一幅canvas图中某个颜色透明? 三、H5 canvas中strokeRect参数如果是小数,如何处理? 四、H5 Canvas中如何画圆角矩形框? 五、js中取某个颜色的相反颜色如何取,比如黑色对白色 六、如何通过js编程设改变

    2024年02月14日
    浏览(41)
  • html5学习笔记17-拖放、地理定位、视频、音频......

    拖放 https://www.runoob.com/html/html5-draganddrop.html 地理定位 https://www.runoob.com/html/html5-geolocation.html 视频 https://www.runoob.com/html/html5-video.html 音频 https://www.runoob.com/html/html5-audio.html Input 类型 https://www.runoob.com/html/html5-form-input-types.html 通过input节点的type属性控制交互类型。 type=\\\"text\\\"为文

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包