HTML5标签概括

最新推荐文章于 2022-11-20 21:31:46 发布
最新推荐文章于 2022-11-20 21:31:46 发布
阅读量115 收藏
点赞数
分类专栏： HTML知识点 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzy________/article/details/116333714
版权
HTML基础标签：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-5章标签及属性</title>
<style>
    .pre{
        color:aqua;
        font-size: 30px;
    }
</style>
</head>

<body bgcolor=""><!--border:设置背景颜色，background="图片路径":设置背景图片-->
 第一二章及实训一：<br>
    换行标签<br>
    <nobr>强制不换行标签</nobr>
    <p>用作段落标记</p>
    <pre>原样显示文字</pre>
    <center>居中对齐标签</center>
    <p align="center">居中对齐</p>
    <blockquote>引文标签，文本会从常规文本中分离出来</blockquote>
    <address>署名标签</address>
    <hr color="red" width="50%" size="2" align="left" noshade="水平线不出现阴影">水平分割线标签
    <h1>h1~h6</h1>：标题文字标签
    <br>
    &nbsp;表示空格
    <font face="字体" size="大小" color="颜色">内容</font>
    <br>
    <b>使用粗体显示内容</b>
    <strong>使用粗体并强调</strong>
    <i>使用斜体显示内容</i>
    <em>使用斜体并强调</em>
    <del>给文本划线表示被删除</del>
    <q>表示引用</q>
    <small>使用小一号字体</small>
    <sub>下标</sub>
    <sup>上表</sup>
    <u>在文字下增加下划线</u>
    <span>多用id或者class属性配合CSS给文本内容设置属性</span>
    <marquee behavior="滚动方式" direction="滚动方向" bgcolor="背景颜色" width="" height="" hspace="和vspace滚动背景和其它元素的空白间距"
     loop="设置滚动循环次数" crollamount="设置每次移动的距离px" scrolldelay="设置每次移动后的间歇时间ms">
    </marquee>
    <header class="header">定义页面的头部</header>
    <nav class="nav">定义页面的导航区域</nav>
    <section class="section">定义页面的内容区域</section>
    <article class="article">定义正文或内容</article>
    <aside class="aside">定义补充内容</aside>
    <footer class="footer">定义页面的尾部</footer>

 第三章及实训二：（列表，图片引用及其它标签）<br>
    <ol>
        <li>有序列表</li>
        <li>ol可以设置type属性：1，a，A，i，I</li>
    </ol>
    <ul>
        <li>无序列表</li>
        <li>可以设置type属性：disc (实心圆点) circle(空心圆) square(实心方块)
        </li>
    </ul>
    <dl>
        <dl>描述性列表</dl>
        <dd>会产生缩进效果</dd>
    </dl>
    <img src="图片路径" alt="此属性在图片无法加载时显示" width="" height="" title="鼠标停留在图片上显示的文字"
     border="设置图像边框大小" align="图片对齐方式" hspace="图像与文字左右的距离" vspace="图像与文字上下的距离" >
     <!-- hspace和vspace可以设置图像与文字的空间 -->
     <figure>
         <img src="./timg (3).jfif" alt="" height="30" width="35">
         <img src="./timg (3).jfif" alt="" height="30" width="35">
         <img src="./timg (3).jfif" alt="" height="30" width="35">
         <figcaption>这是图片的图注内容，一组图片的描述</figcaption>
     </figure>
     <details open>
        <summary>页面说明</summary>
            志不立天下无可成之事
     </details>
     <hgroup>
    <progress max="100" value="66">表示运行中的进度条</progress>
    </hgroup>
    <p>明天早上<time>7：00</time>开始记单词</p>
    <p>在<time datetime="2020-05-20">有一个约会</time></p>
    <p>突出显示<mark>文本</mark></p>
    <p>表示作品<city>标题</city></p>
    <element draggable="true|false|auto">
    <!-- element表示任何一个元素 -->
    <p draggable="true">这是一个可以拖动的段落</p>
    <p hidden>这是一个被隐藏的段落。</p>
    <p  contenteditable="true" spellcheck="true">这是一个可编辑的段落</p>
    <!-- spellcheck可以为text的input元素中的值；textarea元素中的值；可编辑元素中的值进行检查 -->

 第四章及实训三，四：（超链接）<br>
    <a href="文件名" target="" title="鼠标长落时显示的文字">链接文字（名字）</a>
    <!-- target值：_parent:在上一级窗口打开
                   _blank:新建一个窗口打开
                   _self:在同一窗口打开，默认值
                   _top:在浏览器的整个窗口打开，忽略所有的框架内容 -->
    书签链接：
    <a name="建立书签">文字</a>
    <a href="#书签的名称">链接的文字</a>
    <!-- 作用：文本内容较多时，点击链接可以直接跳转到name定义的文本地方 -->
    <a href="http://...">外部链接，链接其它网站时的形式（http://baidu.com）</a>
    <a href="mailto:邮件地址">发送邮件</a>
    <a href="ftp://服务器IP地址或地域名">链接文字</a>
    <a href="telent://服务器IP地址或域名">链接文字</a>
    <a href="锚点名称">用于链接锚点的文字</a>
    <a name="#锚点名称">链接文字</a>
    <!-- 链接同一页面的锚点 -->
    <a href="页面地址#锚点名称">用于链接锚点的文字</a>
    <!-- 链接不同页面的锚点 -->

 第五章：（音视频播放）
    <audio src="./周杰伦 - 稻香.mp3" autoplay controls loop ></audio>
    <video src="视频地址" width="" height="" poster="图像地址" preload="auto"></video>
    <!-- autoplay：自动播放 controls：控制播放 loop；循环播放 preload：auto 页面加载后加载整个视频
                                                                    meta 只载入元数据
                                                                    none 不载入视频
        poster：视频相应或缓冲不足时，此属性链接到图像，并以一定比例显示出来 -->
    <audio controls>
        <source src="">
        <embed src="" type="audio/mp3">
    </audio>
    <!-- 针对有些浏览器不适用audio标签一般结构，当source显示不适用时embed对所有浏览器都适用。video也适用此语法 -->
    <iframe src="https://www.baidu.com/" frameborder="0"></iframe>
    <!-- 内联框架，像网页中引入其它网页，具体样式参考W3school -->

 第六、八章：（表格表单）
    <form action="action" method="POST：将表单值封装在消息主题，GET：将提交值发送给服务器"><!--双标签-->
    <table border="1" align="center" bordercolor="边框颜色" bgcolor="背景颜色" frame="设置表格的外边框，具体属性参考W3school"
         rules="设置表格的内边框，具体属性参考W3school，IE和谷歌浏览器不支持此属性" width="" height="" cellspacing="内框宽度值" cellpadding="文字与边框距离值">
        <!-- 以上属性对table标签，tr标签，td标签都适用 -->
        <caption>表格的标题</caption>
    <thead><!--标签定义表格的表头-->
        <tr align="垂直对齐方式">
            <td><input type="有很多属性值，具体参考W3school" name="表单元素名称" id="标识符，用于区别其它相同属性标签，复选框就需要设置不同id属性值"></td>
            <td rowspan="垂直跨度的行数">第一行第一列</td>
            <td colspan="水平跨度的列数">第一行第二列</td>
        </tr>
    </thead>
    <tbody><!--定义表格主体-->
        <tr>
            <td><textarea name="" id="" cols="水平宽度" rows="垂直高度">文本域</textarea></td>
            <td><select name="" id="">
                <option value="选项一">选项一</option>
                <option value="选项二">选项二</option>
                </select>
            </td>
        </tr>
    </tbody>
    <tfoot><!--定义表格的页脚-->
        <tr>
            <td><input type="text" id="下面是datalist属性时，必须设置相同的id属性与之连用">
                <datalist id="需与上面input属性id相等">
                    <option value="会自动下拉value里面内容"></option>
                    <option value="选中输入框时起效"></option>
                </datalist></td>
            <td></td>
        </tr>
    </tfoot>
    </table>
    </form>
</body>
</html>
HTML表格详细介绍：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用HTML做表格</title>
</head>

<body>
    <table border="1" align="center" height="" width="" bordercolor="green" cellspacing="内框宽度值" cellpadding="文字与边框距离值" background="">
        <!-- border:边框宽度 -->
        <caption>表格的标题</caption>
        <thead bgcolor="" align="">
        <tr bordercolor="设置边框颜色" height="" bgcolor="" background="" align="水平对齐方式" valign="垂直对齐方式">
            <th></th>
            <th>列名1</th>
            <th>列名2</th>
            <th>列名3</th>
        </tr>
        <tbody> <!--标签定义表格的表头-->
        <tr>
            <th>列名1</th>
            <td colspan="水平跨度的行数" align="" bgcolor="">第一行第一列</td>
            <td bordercolor="单元格边框颜色" bordercolorlight="亮边框" bordercolordark="">第一行第二列</td>
            <td background="">第一行第三列</td>
        </tr>
        </thead>
        <tbody><!--定义表格主体-->
        <tr>
            <th>列名2</th>
            <td rowspan="垂直跨度的行数">第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        </tbody>
        <tr>
            <th>列名3</th>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
        <tr>
            <th>列名4</th>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4" align="center">志不立天下无可成之事</td><!--表格的尾标记-->
    </tr>
    </tfoot>
    </table>
</body>

</html>
HTML表单详细介绍：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="POST">
        <input type="元素类型" name="表单元素名称">
        文本框：<input type="text">
        密码框：<input type="password">
        单选按钮：<input type="radio">
        多选按钮：<input type="checkbox" checked="checked"> 默认选中 
        <input type="button" onclick="" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="清除重写">
        密码域：<input type="password" name="" size="" maxlength="定义最多输入字符">
        <textarea name="" cols="" rows="">多行文本域，cols、rows表示列数和行数；readonly表示只读</textarea>
        <select name="" id="" multiple="multiple"><!--multiple="multiple"表示多选列表-->
            <option value="" selected="selected">默认选中菜单一</option>
            <option value="">菜单二</option>
            <option value="">菜单三</option>
        </select>        
        <input type="text" value="" list="MP">
        <datalist id="MP">
            <option value="HUAWER"></option>
            <option value="SAMSUM"></option>
            <option value="OPPO"></option>
        </datalist>
         x
    </form>
</body>
</html>
HTML5新的表单元素：
拾色器：<input type="color"/>
Date日期：<input type="date"/>
DateTime时间：<input type="datetime" name="time1" required />
Time时间：<input type="time" name="time2"/>
Email:<input type="email" required/>
Number:<input type="number" max="100"/>
Range:<input type="range" min="1" max="100"/>
Tel:<input type="tel"/>
button提交按钮：<button type="submit"></button>
SVG:
<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" width="200">
	<polygon points="0,0 100,0 100,100 0,100" style="fill: rgb(25, 2, 228);"/>
	<!-- 圆形： -->
	<circle cx="50" cy="50" r="50" style="fill:aqua;"/>
	<!-- 线条： -->
	<line x1="0" y1="0" x2="100" y2="100" style="stroke: orange; stroke-width: 10px;"/>
	<!-- 画布： -->
	<rect x="100" y="0" width="100" height="50" style="fill:chartreuse;"/>
	<text x="50" y="50">这是SVG文字</text>
</svg>
轩尼诗道-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5概述 语法规范 内置标签 表单标签
xc965746550的博客
04-22 390
HTML5概述 1.html概述 2 html表单标签 超文本标记语言(hyper text markup language) 超文本：有着比文本更加强大的功能 普通文本只能书写文字 超文本可以书写文字 图片 视频 超链接等等超出文本的功能范畴 标记语言：由内置标签去描述的一门语言 后缀名以 *.html 或 *.htm结尾 作用 作用:用来制作各种各样的网页展示内容的 html语法规范...
HTML标签meta总结,HTML5 head meta 属性整理
09-28
HTML中的meta标签是HTML5头元素中的重要组成部分，主要用于提供元信息，如页面描述、关键词、作者信息以及针对不同设备和浏览器的优化设置。在移动前端开发中，正确使用meta标签能够极大地提升用户体验和搜索引擎...
HTML5概述、标签
weixin_48846877的博客
07-16 1343
Html5标签Html5笔记一. Html5简介1.什么是html52.html5的改进3.html5的标志4.html5的兼容性二.Html5兼容性三.Html5标签标签1.新元素2.新的寓意和结构元素 Html5笔记 一. Html5简介 1.什么是html5 html5是html4的升级版 html5主要是移动端应用比较多 html5中的新标签语义化更明确 2.html5的改进 新元素 新属性 完全支持 CSS3 Video 和 Audio 2D/3D 制图 本地存储 本地 SQL 数据 Web
HTML5hgroup语言标签和作用,HTML5中的hgroup是干啥的？HTML5中的hgroup标签的具体用法在这，点进来看看吧...
weixin_40002224的博客
06-09 1369
HTML5中的hgroup是干啥的？HTML5中的hgroup标签的具体用法在这，点进来看看吧，这篇文章就HTML5之中的hgroup标签进行了详细的解析，包含了具体HTML5中hgroup的用法，标签的写法，还有作用都做了详细的解析，不多看，看正文。 标签是 HTML 5 中的新标签。HTML5中hgroup标签的作用如下： 标签用于对网页或区段(section)的标题进行组合。 标签用于对网页...
hgroup的作用
qq_44278908的博客
02-07 1660
hgroup的作用（前端） hgroup标签用来为标题分组，可以将一组相关的标题同时放入hgroup中 例如： 回乡偶书 二首 其二
hgroup元素的使用
酷小亚
09-25 2576
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素使用。通常，将hgroup元素放在header元素中。 效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hgroup元素的使用</title> </head> <body> <header> <hgr
HTML5布局之路
07-22
首章当中，针对HTML5的基本知识及《HTML5布局之路》所涉及的所有内容进行整体概括。主要内容包括：HTML5入门知识，网页整体布局，盒模型，浮动布局，定位布局，代码语义性，扩展性，文本样式的处理，表格表单，PC端...
HTML5中div、article、section的区别及使用介绍
09-28
在HTML5中，`div`、`section`和`article`是三个重要的语义化标签，它们各自有特定的用途，旨在帮助构建更结构化的网页内容。这些标签的引入是HTML5为了提升网页内容的可读性、可访问性和SEO优化。 首先，`div`标签...
html、css、js重点知识点概括（考试专用）.docx
09-04
在HTML5中，开发者常常使用语义化标签如、、等，以提高页面内容的可读性和可访问性。HTML元素分为块级元素（如、）和行内元素（如、），它们在布局上有着明显的区别。块级元素会占据整行，行内元素则只占据自身内容...
index:概括
03-21
对于"概括"，我们可以理解为HTML文档中对内容进行简要描述的部分，这可能是`<meta>`标签，尤其是`<meta name="description">`，它提供了一个关于网页内容的简短摘要，对SEO（搜索引擎优化）有积极作用。 在创建HTML...
HTML5概述 - 语义化标签
前端队长Daotin
11-20 6530
一、HTML5 简介1、什么是 HTML5HTML5 不是一门新的语言，而是我们之前学习的 HTML 的第五次重大修改版本。2、HTML 的发展历史•超文本标记语言（第一版，不叫 HTML 1.0）——在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；•HTML 2.0——1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 ...
HTML_16 —— hgroup标签
肥不溜秋大梅子
03-29 530
hgroup标签：用来为标题分组，将一组相关的标题同时放在hgroup中。 <hgroup> <h1>一级标题<h1> <h2>二级标题<h2> </hgroup> ...
HTML5hgroup语言标签和作用,HTML5标签：hgroup元素的使用方法及作用
weixin_34157892的博客
06-09 697
html元素标签是html5中新增的标签，主要对多层级的h1~h6标题进行分组，下面，我们就详细了解一下标签的使用方法及作用。标签定义 标签被用来对多级标签进行分组，将h1~h6标题元素包裹起来； 标签通常是将多层级的h1~h6元素进行分组，也可以将一个article 元素里的主标题和子标题进行分组。 标签是 HTML 5 中新增的标签。浏览器支持情况 标签已被 IE9、Firefox、Oper...
html5分组元素作用,h5中的分组元素figure、figcaption、hgroup元素介绍
weixin_39658716的博客
06-18 538
分组元素用于对页面中的内容进行分组。figure元素和figcaption元素figure元素用于定义独立的流内容(图像、图表、照片、代码等)，一般指一个独立的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第...
hgroup元素
I hava a dream
04-22 1521
标签用于对网页或区段（section）的标题进行组合。hgroup元素通常会将h1-h6元素进行分组，譬如将一个内容区块的标题及其子标题分为一组。 具体代码如下： 1、如果文章只有一个主标题，是不需要hgroup元素的。 文章标题 2016年4月22日 文章正文内容 效果图 2、如果文章
HTML基础（对标签的用法的简单说明）
地铁和人海
02-16 260
html html基本标签 html标题： &amp;lt;h1&amp;gt;:一级标题，再一个网页中只能够出现一次，如果出现两次，会实现，但对搜素引擎不友好 如果实在想用两个h1，要用hgroup标签——他可以只保留h1样式，而不认为是标题。 hgroup标签的作用是用于对网页或区段（section）的标题进行组合。所以连用多个标题标签，也必须使用hgroup标签包起来，这样对浏览器搜素引擎更友好。 &amp;lt;...
<hgroup>等的作用
07-08 921
如果你了解布局方式从以前的“table表格布局”到现在注重语义化的布局的转变，你就不会奇怪为什么对多出怎么看上去有点啰嗦的新标签了。 简单点说，你用div也可以实现像aside等标签的功能，但div这个标签创作出来时，目的很简单，就是创建一个分区(division)，而如果你用div来实现其他功能，就违背了它原来的语义了，这不利于代码的可读性、搜索引擎优化等。 举点例子： 你问的hgroup元
在html 5中哪个元素用于组合标题元素
qf2019的博客
07-13 4204
在html 5中，“hgroup”元素用于组合标题元素。“ ”标签元素用于对网页或区段（section）的标题进行组合。当标题有多个层级（副标题）时，hgroup元素可用来对一系列“ ”元素进行分组。 在html 5中，“hgroup”元素用于组合标题元素。 示例： 说明： 标签被用来对标题元素进行分组。 当标题有多个层级（副标题）时， 元素被用来对一系列 元素进行分组 ...
HTML5新语义化标签
HTML5_student的博客
09-23 225
标签介绍 header — 页眉 main — 主体 nav — 导航 article — 独立的内容 section — 一个区域，跟div的功能和语义是一样的 aside — 辅助信息的内容 footer — 页脚 figure — 描述图像或视频 figuretion — 描述图像或视频的标题部分 hgroup — 标题组合 普通的标签 缺点 1.不利于SEO搜索引擎对页面内容的抓取 2.文档结构定义不明确 于是HTML5出现，解决上述问题，专门添加页眉、页脚
html基础语法概括
最新发布
10-13
HTML是一种标记语言，用于创建网页。它由一系列标签组成，这些标签描述了网页的内容和结构。HTML文档由头部和主体组成，头部...5. 标签可以包含属性，例如中的src属性指定图像的URL。 6. 注释可以使用<!--和-->包围。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

轩尼诗道-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值