HTML5——标签

最新推荐文章于 2024-04-23 04:33:05 发布
最新推荐文章于 2024-04-23 04:33:05 发布
阅读量306 收藏 1
点赞数
文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beichen0518/article/details/79699631
版权

HTML 超文本标记语言

  • Hyper-Text Markup Language

  • 后缀名.htm / .html

  • 查找错误，开发者工具，找到Console 控制台可以看到报错只有js报错可以看到报错

<!--所有的代码都写在html标签下 它是最顶级标签-->
<!--标签基本上都有开始标签和结束标签，标签还可以有属性-->
<!--1.标签（tag/element- 承载内容-->
<!--2.层叠样式表（CSS） - 显示/渲染页面-->
<!--3.JavaScript - 交互式行为 -->
<!doctype html> <!--文档类型声明，说明页面使用的HTML5的规范-->
<html> <!--标签，用<>，这是一个开始标签-->
    <head> <!--放一些和网页相关的元数据信息，但不会显示在浏览器的主窗口中-->
        <meta charset="utf-8"> <!--源数据标签，标签的属性，如果一个标签中间没有内容，就不需要结束标签-->
        <title>某某的个人空间</title> <!--网页的标题-->
        <!--样式表-->
        <style type="text/css"> 
            h1 {
                color: red;
                font-size:3cm;
            }

        </style> <!--red 和 #ff0000效果是一样的，这是16进制的数等于255,0,0-->
    </head>
    <body> <!--body标签内的内容就是要显示在浏览器窗口中的信息-->
        <h1 title="这是一个提示信息">hello, world</h1>  <!--一级标题, 一共有六级标题，title 属性效果是，鼠标放在标题文字上时，浮出信息--> 
        <h2>你好，世界</h2> <!--二级标题-->
        <button onclick="foo()">OK</button> <!--按钮标签-->
        <script>
            function foo() {
                window.alert('大家好');

            }
        </script> <!--js需要在这里写-->
    </body>
</html>
<!--代码都写在标签了里面，而浏览器就是这个语言的执行环境
    它执行HTML书写的代码将结果渲染到浏览器窗口中-->

HTML参考手册

  • WWW
  • World Wide Web - 万维网
  • 规范标准
  • W3C -
  • 学习HTML5去runoob，或W3school

列表小技巧 在sublime中，装了emmet插件的情况下输ul>li*5 再按Tab键会自动生成5个列表

<!DOCTYPE html>
<!--
    html/head/body
    文本 - h1-h6/p/br/hr/sub/sup/strong/em/del/ins/q
    列表 - ul/ol(li)/dl(dt/dd)
    图像 - img/figure/figcaption
    链接 - a(页面链接/锚链接/功能链接)
    表格 - table/tr/td/th/thread/tbody/tfoot
    表单 - form / input / select / textarea
    音视频 - audio / video(source)
-->
<html lang="en">
<head>
    <a id="top"></a> <!--设置锚点-->
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--音频-->
    <audio controls autoplay loop>
        <!--controls 播放控件， autoplay 自动播放 ，loop循环播放-->
        <source src="./resources/bgmusic.mp3" type="audio/mp3" >
    </audio>
    <!--视频-->
    <video controls>
        <source src="./resources/movie.mp4" type="video/mp4">       
    </video>
    <h1>Hello, world!</h1>
    <hr> <!--水平标尺，一个水平的分割线-->
    <ins>床前</ins>明月光<sup>1</sup><br>
    疑是地上霜<sub>2</sub><br>
    <p>举头望明月<del>明月</del></p>
    <p>低头思故乡<strong></strong><em>故乡</em></strong></p>
    <q>其实地上本没有路，走的人多了也便成了路</q>
    <h3>某某的个人爱好</h3>
    <ul>
        <li>吃</li>
        <li>喝</li>
        <li>嫖</li>
        <li>赌</li>
        <li>抽</li>
    </ul><!--无序列表-->
    <ol>
        <li>a1</li>
        <li>a2</li>
        <li>a3</li>
        <li>a4</li>
        <li>a5</li>
    </ol><!--有序列表-->
    <dl>
        <dt>阅读</dt>
        <dd>每天晚上阅读</dd>
        <dd>阅读科幻小说</dd>
        <dt>
            <figure>
            <img src="./images/卡卡西.ico" alt="卡卡西" width="30"> <!--在这种情况下最好选用相对路径，有图片显示图片，没图片显示替换文字, 可以指定宽高，但一般不建议用这种方法，让美工切好图片，不然浪费流量-->
            <figcaption>这是一个什么图</figcaption>
            </figure>
        </dt><!--放图片-->
        <dd>每天晚上阅读</dd>
        <dd>阅读科幻小说</dd>
    </dl><!-- 定义列表-->
    <!--列表-->
    <table>
        <!--列表行-->
        <tr>
            <!--列表列-->
            <td>

            </td>

        </tr>
    </table>
    <table border="1">
        <caption>学生成绩表</caption><!--标题，自动居中-->
        <thead>
                <tr>
                    <th>姓名</th>
                    <th>Python</th><!--th表示表头里的列-->
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td rowspan="3"></td> <!--跨行,合并单元格-->
                    <td>王大锤</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>小明</td>
                    <td>60</td>
                </tr>
                <tr>
                    <td colspan="2">无</td> <!--跨列-->                    
                </tr>
                <tr>
                    <td></td>
                    <td>小强</td>
                    <td>75</td>
                </tr>
        </tbody>
        <tfoot>
                <tr>
                    <td colspan="2" align="right">平均分</td> <!--虽然可以直接用属性来对齐，但都应该由样式表来做-->
                    <td></td>
                </tr>
        </tfoot>
    </table>
    <!--表单-->
    <form action="" method="post" enctype="multipart/form-data">
        <!--action 给url,对应某个服务器的某个功能 method="post" 如果要上传文件必须写post ,enctype="multipart/form-data"这个表示编程语言，上传文件时也需要写-->
        <fieldset>
        <legend>必填信息</legend>
        <p><input type="text" name="username" placeholder="请输入用户名" required></p>
        <!--可输入的文本框， value表示默认值，placeholder表示占位信息, required表示必填-->
        <p><input type="password" name="password" placeholder="请设置密码"></p>
        <!--密码框-->
        <!--单选框-->
        <p>
        <input type="radio" name="gender" checked>男
        <input type="radio" name="gender" >女
        </p>
        <!--单选按钮 ，如果name相同，只能选择一个，如果name不同就都可以选,checked表默认选中-->
        <!--复选框-->
        <p>
            <input type="checkbox" name="fav">阅读
            <input type="checkbox" name="fav">健身
            <input type="checkbox" name="fav">游戏
            <input type="checkbox" name="fav">球
            <!--可同时勾选多项-->
        </p>
        <!--日历框-->
        <p>
            <input type="date" name="birthday">生日
        </p>
        <!--输邮箱的框-->
        <p>
            <input type="email" name="email" placeholder="请输入您的邮箱">
        </p>
        </fieldset>
        <!--下拉列表-->
        <fieldset>
        <legend>可选信息</legend>
        <p>
            <select name="prov">
                <option value="北京">北京</option>
                <option value="tj">天津</option>
                <!--value中的值是传给服务器的，可以不和后面的值一样-->
                <option value="成都" selected>成都</option>

            </select>

        </p>
        <!--文本区-->
        <p>
            <textarea rows="5" cols="30" name="intro"></textarea>
        </p>
        <!--文件选择器-->
        <p>
            <input type="file" name="file">
        </p>
        </fieldset>
        <p>
            <input type="submit" value="立即注册">
            <!--提交-->
            <input type="reset" value="重新填写">
            <!--重置-->
        </p>

    </form>

    <!--前三个是页面链接-->
    <a href="http://www.baidu.com">百度一下</a><!--超链接标签，在当前窗口打开-->
    <a href="http://www.baidu.com" target="_blank">百度两下</a><!--在新窗口打开-->
    <a href="index.html">我的首页</a><!--打开自己网站-->
    <a href="#top">回顶部</a> <!--回到锚点位置, 锚链接-->
    <!--功能链接，链接到qq，或发邮件-->
    <a href="mailto:qustwxz@163.com">联系站长</a><!--不好用是因为没有邮件客户端-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin= 

{{544619417}}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3153717369:52 " alt="点击这里给我发消息" title="点击这里给我发消息"/></a>


</body>
</html>
<!--<br>折行标签， <p>内容</p>段落标签，<ins>加下滑线<sup>上标<sub>下标<del>删除线<strong>加粗<em>斜体 <q>引用-->

table技巧 table>tr*5>td*2>{项目$}可生成5行2列的表格

常用图片格式选择

  • svg矢量图 无损
  • gif 动图
  • png 少色彩
  • jpg 多色彩的图
北辰0518
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
语义化标签——HTML
01-08
在使用html标签时，应关注的是标签的语义，而不是它的样式 标题标签 h1~h6(一共有六级标签) h1在网页中的重要性仅次于title，一般情况下一个页面只会有一个h1 一般情况下标题标签只会使用到h1~h3 标题标签都是块元素...
HTML中的bgcolor，background，与color的初步小节
jubincn的专栏
10-16 2915
    在HTML的标签中，比如,,,一般都是使用bgcolor，而在CSS中，标签使用color，使用。              
HTML5的常用标签
jmz98的博客
05-09 298
a href="#marker">锚链接。<title>文档标题标签。<strong>加粗标签。<meta>元信息标签。
(完整版)HTML5常用标签大全
qq_60497930的博客
10-19 6253
(完整版)HTML5常用标签大全
HTML5常用基础标签
weixin_53414403的博客
05-11 3317
HTML5中的标签众多，有时新手刚入门前端很容易步入误区，即想要一把抓掌握所有的知识，其实全部掌握效果不尽人意，相反会让我们学习受挫，效率低下，因此“片面”的学习有助于我们提高学习效率等，对于一些不常用的标签或者知识即查即用。因此都是有哪些常用的基础HTML5标签呢？快来看看吧！ 1.首先是一些重要的文本标签，辟如<div>、<span>、<p>、<h1-h6>、<br>、<hr>、<pre>等等 以下是依据官方解释以及
HTML5 常用标签
weixin_59246157的博客
04-20 2366
input>标签用于定义输入框，可以定义多种类型的输入框，如文本框、密码框、复选框等。<table>标签定义了一个表格，其中每行使用<tr>标签定义，每个单元格使用<td>标签定义。<details>标签用于定义一个可折叠的内容块，<summary>标签用于定义折叠内容块的摘要。<progress>标签用于显示进度条，<meter>标签用于显示某个量的大小。<datalist>标签用于定义一个选项列表，<option>标签用于定义选项。<ol>标签定义了一个有序列表，其中每个列表项使用<li>标签定义。
HTML5不支持标签和新增标签详解
01-19
1、HTML5不支持或不赞成使用的标签 ——定义只取首字母的缩写，HTML5 不支持。使用定义缩写代替，其中title 属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本，坚持写上title,这样对浏览器和搜索引擎都比较...
从入门到精通HTML5——PDF——网盘链接
02-27
　10.1.1 滚动文字标签——marquee 203 　10.1.2 滚动方向属性——direction 203 　10.1.3 滚动方式属性——behavior 204 　10.1.4 滚动速度属性——scrollamount 205 　10.1.5 滚动延迟属性——scrolldelay 206 　...
三天学会HTML5——多媒体元素的使用
02-26
1.HTML5Media-Video2.HTML5Media-Audio3.拖拽操作4.获取位置信息5.使用Google地图获取位置信息多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来...
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
html5标签大全
05-19
整理的html5标签属性大全，里面有对各个标签的用法和属性的详细记录
HTML5标签&&属性全在这里了
Rice_w的博客
03-23 7209
一、HTML5文档结构 HTML5文档的基本结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的第一个网页</title> </head> <body> Hello World！ </body> </html> <!DOC
css中设置background属性
weixin_30765505的博客
04-24 1414
属性解释background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项： background-color 设置背景颜色 background-image 设置背景图片地址 background-repeat 设置背景图片如何重复平铺 background-positio...
html实现发送消息,关于在bg.html、popup.html和contentscript.js之间发送消息
weixin_35895056的博客
07-09 405
onRequest.addListener和sendRequest是chrome的扩展消息传递的一部分。哪个在这里http://developer.chrome.com/extensions/messaging.html基本上,您使用某人从触发“sendRequest”发送的“onRequest.addListener”来侦听请求。在你的情况下,你把onRequest.addListener“在内...
html常用标签
flirt_的博客
02-15 4300
<!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body&g
html5 标签分类,html5标签类型大全
weixin_39762856的博客
06-28 521
HTML标签我们前面说过，HTML定义网页的结构，CSS给美化页面结构，接下来这几节课，我们就主要讲解构成HTML结构的元素，也就是HTML标签。HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。一、排版标签作用用于网页布局标题标签缩写head，头部说明为了使网页更具有语义化，将标题标签分为六个等级，h1-h6。语法一级标题二级标题三级标题四级标题五级标题六级...
HTML5 标签汇总
热门推荐
无
06-16 1万+
文档结构   html页面的基本结构如下，其中head为页面的头部信息，body为页面的主体信息。 <!DOCTYPE html> <html lang="zh-CN"> <head></head> <body></body> </html> 文档元素 DOCTYPE   DOCTYPE 即文档类型（document type），用于声明当前文档类型，告知浏览器使用哪种HTML版本（<!DOCTYPE htm.
笔记-----BFS宽度优先搜索
2302_79440616的博客
04-19 1065
对于BFS：宽搜第一次搜到就是最小值，并且基于迭代，不会爆栈。 Flood Fill 模型 如果直译的话就是：洪水覆盖，意思就是像是从一个点一圈圈的往外扩散，如果遇见能够连通的就扩散，如果遇见无法联通的就不去扩散，然后再去以扩散出去的点为起点再去扩散。 Flood Fill 可以实现在线性时间复杂度内找到某个点所在的连通块。 例题： 1.AcWing 1097. 池塘计数 农夫约翰有一片 N∗MN∗MN∗M 的矩形土地。 最近，由于降雨的原因，部分土地被水淹没了。 现在用一个字符矩阵来表示他的土地。 每
数据结构与算法学习笔记七--二叉树(C++)
最新发布
我叫柱子哥
04-23 585
在计算机科学中，树（Tree）是一种抽象数据类型，用于模拟具有树状结构特征的数据集合。树是由一组节点（Nodes）和连接这些节点的边（Edges）组成的，其中一个节点被指定为根节点（Root），其余节点分层组织成子树（Subtrees）。树的每个节点除了根节点外，都恰好连接到一条来自另一个节点的边，这个节点被称为其父节点（Parent Node）。每个节点可以连接到零个或多个子节点，子节点的节点被称为父节点的孩子节点（Child Node）。根节点（Root）：树中的唯一顶层节点，没有父节点。
表单元素——label 标签
05-25
label 标签是一个HTML表单元素，它通常与 input 元素一起使用，为表单元素创建标注。当用户单击标注时，与之关联的表单元素就会获得焦点。例如： ```html 用户名： ``` 在上面的示例中，label 标签的 for 属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值