HTML5初学 元素记录

最新推荐文章于 2024-07-16 21:48:12 发布
最新推荐文章于 2024-07-16 21:48:12 发布
阅读量175 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Summerendha/article/details/118614299
版权

The root element

<html></html>

html是html文件的根元素

<!DOCTYPE html>
<html>

<html>

Document metadata

<head></head>

<head> 元素表示文档元数据的集合[头]

<!DOCTYPE html>
<html>
    <head>
        
    </head>
<html

<title></title>

<!DOCTYPE html>
<html>
    <head>
        <title>First HTML</title>
    </head>
</html>

<title> 元素代表文档的名字或标题。

<meta>

<meta> 元素提供文档的元信息，一般要加上

<!DOCTYPE html>
<html>
    <head>
        <title>First HTML</title>
        <meta charset=utf-8>
    </head>
</html>

Sections

<body>

浏览器窗口中显示的所有内容都在 <body> 元素中

<!DOCTYPE html>
<html>
    <head>
        <title>
            First HTML 
        </title>
        <meta charset=utf-8>
    </head>
    <body>
        I'm Chinese
    </body>
</html>

 

<h1> to <h6>

<h1>~<h6> 元素表示某一部分的标题，字体由大变小

<body>
        <h1>I'm Chinese</h1>
        <h2>我的故乡</h2>
        我的故乡是温州，那是一个临海的城市。
</body>

<address>

<address> 代表联系信息，不仅仅是”地址“。

<address>
        Rm 401 CKP West Wing<br>
        玉泉 Camps<br>
        浙江
</address>

Grouping content

<p>

<p> 元素代表一个段落。

<hr>

<hr> 元素代表一条水平分隔线，可以配置水平分割线的长度、宽度、颜色。

<hr width="50" align="left" size="10" color="purple">

<pre>

<pre> 元素用于定义预格式化的文本，被包围在 <pre> 元素中的文本通常会保留空格和换行符，常用来表示程序的源代码

html中会将多个空格保留为1个 pre保留原文

 

<blockquote>

<blockquote> 元素用于定义引用块。[一个大缩进]

<body>
        <blockquote>
            Hello World
        </blockquote>
</body>

 

<ol>

<ol> 元素表示有序列表。

<body>
        <ol>
            <li>
                红茶
            </li>
           <li>
               绿茶
           </li> 
           <li>
               花茶
           </li>
        </ol>
</body>

 

<ol>产生的是带序号的有序列表，可以通过改变起始序号，改变整个序列

<body>
        <ol start="-1">
            <li>
                红茶
            </li>
           <li>
               绿茶
           </li> 
           <li>
               花茶
           </li>
        </ol>
</body>

<ul>

<ul> 元素表示无序列表。(可嵌套）

<body >
        <ol>
           <li>
                红茶
           </li>
           <li>
               绿茶
           </li> 
           <li>
               花茶
           </li>
        </ol>
</body>

<li>

<li> 元素表示有序列表 <ol> 和 无序列表 <ul> 的一项。

<dl>

<dt>

<dd>

<dl> 元素、 <dt> 元素、 <dd> 元素表示自定义列表。

<body >
        <dl>
            方糖
            <dd>
                方的糖，甜的
            </dd>
            <dd>
                好吃的糖
            </dd>
        </dl>
</body>

 

Text-level semantics

<a>

<a> 元素用于定义超链接。

<a href="http://news.163.com" target="_blank">
            网易新闻
</a><br>

 点击后将进入网易新闻（target=“_blank" 加上后会打开一个新页面。

<em>

<em> 元素把文本定义为强调的内容。

<strong>

<strong> 元素把文本定义为语气更强的强调的内容。

<small>

<small> 元素呈现小号字体效果。

<s>

<s> 元素定义加删除线的文本。

<cite>

<cite> 元素通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

<q>

<q> 元素定义短的引用。

<dfn>

<dfn> 元素定义一个定义项目。

<body >
        <em>强调内容</em><br>
        <strong>语气更强的强调内容</strong><br>
        <small>元素呈小号字体</small><br>
        <s>加删除线</s><br>
        <cite>引用文本 斜体</cite><br>
        <q>短语引用</q><br>
        <dfn>定义一个项目</dfn><br>
</body>

<abbr>

<abbr> 元素表示简称或缩写。

<body >
        <abbr title="中华人民共和国">PRC</abbr>
</body>

<code>

<code> 元素用于表示计算机源代码或者其他机器可以阅读的文本内容。 

<var>

<var> 元素用于定义变量。可以将此标签与 <pre> 及 <code> 标签配合使用。

<body>
        <p>Then he turned to the blackboard and picked up the chalk. After a few moment's thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher looked pleased.</p>
</body>

<sup><sub>

上标和下标

<body>
    a<sup>2</sup>b<sub>0</sub>
</body>

<samp>

<samp> 元素用于定义样本文本。

<kbd>

<kbd> 元素定义键盘文本。它表示文本是从键盘上键入的。

<i>

<i> 元素定义斜体。

<b>

<b> 元素定义粗体文件。

<u>

<u> 元素为文本添加下划线。

<mark>

<mark> 元素突出显示文本。

<body>
        <samp>样本文本</samp><br>
        <kdb>键盘输入的文本</kdb><br>
        <i>斜体</i><br>
        <b>粗体</b><br>
        <u>为文本添加下划线</u><br>
        <mark>突出显示文本</mark>
</body>

Edits

<ins>

<ins> 元素定义已经被插入文档中的文本。 

<del>

<del> 元素定义文档中已被删除的文本。

Embedded content

<img>

<img> 元素定义图片。

<img src="1.jpg" width=100 height="100">

 src后可跟文件夹中的图片，也可跟网络上的图片地址。

<map>

<area>

<body>
        <img src="1.jpg" width=100 height="100" usemap="#map" ><br>
        <map name ="map">
            <area shape="rect" coords="0,0,50,50" href
            ="http://news.163.com" alt="news">
            <area shape="circle" coords="75,75,25" href
            ="http://www.163.com" alt="home">
        </map>
</body>

在一个名为1.jpg的图片上 左上角矩形和右下角⚪处有链接可点

<bdi> 和 <bdo>

<bdi> 元素允许您设置一段文本，使其脱离其父元素的文本方向设置。 
<bdo> 元素可覆盖默认的文本方向。

<body>
        <bdo dir="rtl">这是<bdi>干啥</bdi>的？</bdo><br>
</body>

<table>

<tbody>

<colspan>

<thead>

<tr>

<td>

<th>

制表

    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>OS</th>
                    <th>Chinese</th>
                    <th>French</th>
                </tr> 
            </thead>
            <tbody>
                <tr>
                    <td>IOS5</td>
                    <td>YES</td>
                    <td>YES</td>
                </tr>
                <tr>
                    <td colspan="3">Windows、OS</td>
                </tr>
            </tbody>
            
        </table>
    </body>

内容参考：CSDN博主「魏贺礼」https://blog.csdn.net/wozaixiaoximen/article/details/45157439

Pricelesse
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 表单相关元素及属性
ChanCherry的博客
04-14 3073
极其简陋的网课笔记 ╮(￣▽￣)╭ copy一下好心安理得的偷懒（误） form表单 常用属性 1. action属性 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 例如：<form action="form_action.asp"> 表示当提交表单时，表单数据会传送到名为 “form_action.asp...
HTML使用iframe元素实现页面内容的跳转功能
zxh996的博客
07-01 4625
HTML使用iframe元素实现页面内容的跳转功能前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码总结 前言 在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。 一、iframe是什么？ irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会
CSS之排列系列--dl, dt, dd--使用/教程/实例
IT利刃出鞘的博客
12-05 1万+
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格。 为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式，默认dd列表内容会缩进。
初学HTML5：音视频、拖拽
lalala_dxf的博客
05-17 1946
H5新增标签与属性 这篇文章只是对H5部分新增内容的整理，用于平常的翻阅，具体的还请看HTML5官网教程 1、H5新增结构化标签简介 Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。其他标签如下 标签 描述 article 定义文章 section 定义section asid
html初学篇
zwtank的博客
10-28 3591
html5 常用标签 <h1></h1> <p>段落标签</p> <h1>标题标签,一个html只能有一个h1标签</h1> table 表格标记 表格的组成 table tr行 td列（单元格） 表格的html属性: border 边框 bordercolor 边框颜色 cellspacing 指的是单元格与单元格之间的距离 cellpadding 指的是内容到单元格之间的距离 bgcolor 背景颜色 width 宽度 he
HTML初学自用1
zhaogodzero的博客
07-16 1160
希望对自己有用。
初学HTML详细全过程
m0_56364861的博客
04-21 3862
写的比较啰嗦，主要为了确保以后复习还能看懂。
HTML遇到的问题和经验（初学者记录）
weixin_42418541的博客
07-02 708
1.背景图颜色很复杂时可以利用PS中的宽度为1高度为当前高度的像素背景扣出来，将裁剪好的长条存储为Web格式、 2.在大标签里面，可以采用跟清除浮动的clearfix类似的使用方法来设置元素浮动eg： <div class=”box f1”> .fl { float:left; } 3：清除浮动并不会影响子元素的父元素，在突发情况下需要用navigator或者a标签包裹元素时...
WEB开发基础篇 ---- 进阶篇HTML5（上）
weixin_45040301的博客
01-30 1266
此篇文章为进阶知识点HTML5的学习，为本人学习时的笔记记录，同时也适合初学者学习。喜欢的友友可以关注一下，后续会补充JavaScript，TypeScript，vue2.0，vue3.0以及uni框架等等一系列的前端学习文章。（强者不喜请绕道，本人内心脆弱，勿喷） 1. 首先了解一下什么是HTML5？ HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联
使用 HTML、CSS 和 JS 制作一个中国象棋
热门推荐
努力是为了站在万人之中，成为别人的光
07-24 2万+
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：🌟【100个摸鱼小游戏】（源码永久免费开源）直接跳到末尾 参与评论送书 直接跳到末尾 领取完整源码 快速跳转 如何高效学习目前已上线的小游戏有90+个游戏入口地址有多个：在线演示地址：https://haiyong.site/moyu/xiangqi/源码可在文末免费获取目录结构如下：
奇葩连连看HTML5游戏源码
06-19
学习和分析“奇葩连连看”的源码，对于想要涉足HTML5游戏开发的初学者来说，是一次很好的实践机会。不仅可以理解HTML5、CSS3和JavaScript的基本用法，还能掌握游戏开发中的逻辑思维和问题解决能力。同时，通过阅读和...
智商测试HTML5游戏源码
06-23
2. Web Storage：HTML5的Web Storage（包括localStorage和sessionStorage）提供了在客户端存储数据的能力，游戏状态、用户进度或高分记录等信息可以存储在这里，以便用户在下次访问时继续游戏。 3. WebSocket：如果...
小鳄鱼HTML5游戏源码
06-23
1. **HTML5 Canvas**: 游戏的核心通常基于HTML5的Canvas元素，这是一个二维绘图表面，允许开发者使用JavaScript动态绘制图形，实现游戏的动画效果和用户交互。Canvas API提供了丰富的绘图方法，如`fillRect()`、`...
跳跳狗HTML5游戏源码
06-19
HTML5的核心优势在于其多媒体支持，如 `<canvas>` 元素，它提供了在浏览器内绘制2D图形的能力。在这个跳跳狗游戏中，`<canvas>` 可能被用来绘制游戏场景、角色动画以及实现碰撞检测。开发者可以使用JavaScript进行...
得到36HTML5游戏源码
06-18
对于初学者来说，这些源码是极好的学习资料，可以深入理解HTML5游戏开发的基本原理和技术。而对于有经验的开发者，它们可能是创新和灵感的源泉，可以通过修改和扩展源码来创建全新的游戏。总的来说，这个"得到36...
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
PPO（Proximal Policy Optimization，近端策略优化）算法
最新发布
08-05
在解答2024年华数杯全国大学生数学建模竞赛的C题“老外游中国”时，虽然PPO（Proximal Policy Optimization，近端策略优化）算法主要是应用于强化学习领域，特别是在解决连续动作空间的策略优化问题上，但在此数学建模竞赛中，它并不直接适用于数据处理、综合评价或路径规划等任务。不过，我们可以从数据处理和决策优化的角度，类比强化学习中的一些思想来构思解题策略。 然而，对于本题而言，我们可以更侧重于数据分析、综合评价模型（如层次分析法AHP、TOPSIS、模糊综合评价等）和路径规划算法（如Dijkstra、A*、遗传算法等）来解决问题。以下是对各个问题的进一步建模思路： 一、问题1建模思路 1.1 数据处理与分析 数据收集与清洗：首先，需要加载所有352个城市的CSV文件，对每个城市的100个景点信息进行数据清洗，去除无效或缺失的关键信息（如评分缺失的景点）。 最高分查找：遍历所有景点，找到最高评分（BS），并统计获评该评分的景点数量。 城市排名：统计每个城市获评BS的景点数量，并根据数量多少进行排序，列出前10个城市。 二、问题2建模思路 2.1 综合评价体系构建
中国城市统计年鉴（1985-2023）
08-05
《中国城市统计年鉴》是全面反映中国城市社会经济发展情况的资料性年刊。《中国城市统计年鉴—2023》收录了2022年全国各级城市社会经济发展等方面的主要统计数据。 本年鉴内容共分四个部分: 第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、资源环境、经济发展、科技创新、人民生活、公共服务、等方面的数据; 第四部分是附录,为主要统计指标解释。 需要说明的是,从1997年开始,地级以上城市和县级城市分别采用不同的统计制度,有些指标在两类城市之间不具有可比性,故本年鉴将地级以上城市和县级城市统计资料分为独立的两部分。本年鉴所涉及的全国或全部城市统计资料,均未包括香港特别行政区、澳门特别行政区和台湾省。
振中TP900 驱动工具2.2
08-05
振中TP900 驱动工具2.2
大学信息安全试题精选12
08-05
大学信息安全试题精选 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值