关于『HTML5』:第一弹

建议缩放90%食用

祝各位国庆节快乐！！1

经过了「过时的 HTML」、「正当时的 Markdown」的双重洗礼后，我下定决心，好好学习HTML5

 这回不过时了吧（其实和原来没什么区别） 

HTML5 冲鸭！！1
(开启百度百科模式)

（奇怪的知识又增加了呢~)

HTML5系列向你空投知识，请注意接收

好久没废话了

  要为大家带来（期待已久） HTML5 了呢~  

注：编者用的是CSDN-Markdown编辑器（需要推荐的同学往后走）

声明：由于 HTML5 只是在 HTML 的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起。

HTML5 系列体系 大体和原来的 过时的 HTML 并没有太大区别，请不要以为走错片场。

正文好久没开始了

一. HTML5 概述

(一).什么是HTML5

(这段可以跳过没啥用)

  • HTML5 是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。
  • HTML 产生于1990年，1997年 HTML4 成为互联网标准，并广泛应用于互联网应用的开发。
  • HTML5 是 Web 中核心语言 HTML 的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

(二). 浏览器的版本

(这段也可以跳过)

  • 现今浏览器的许多新功能都是从 HTML5 标准中发展而来的。
  • 目前常用的浏览器有 IE、火狐、谷歌、Safari和Opera 等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持 HTML5 上采取了措施。

(三). 编辑器（开发工具）推荐

注：我就挖到这俩，CSDN-Markdown 不建议作为HTML5 开发工具使用， 其他好使的工具欢迎评论区补充

二. HTML5 语法

(一). 基本结构

  • (1)HTML标签
    整个网页是从这里开始的，然后到结束
  • (2)head标签
    head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）

代码:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title></title>

</head>

<body>

</body>

</html>

(二). 语法规范

  • HTML 中不区分大小写，但是建议使用小写
  • HTML 中的注释不允许套娃
  • HTML 标签必须结构完整，要么成对出现，要么自结束标签
  • HTML 标签可以套娃，但是不能交叉套娃
  • HTML 标签中的属性必须有值，且值必须加引号(双引号单引号都可以)

(三). 标签规范

  • 单标签：
<标签名 [属性名=属性值,...]>
  • 成对标签：
<标签名 [属性名=属性值,...]></标签名>

三. HTML5标签

（又从最基础讲起）

(一). 标题标签

代码:

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

效果:

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

(二). 段落标签

代码:

<p>这是一个段落</p>

效果:

这是一个段落

(三). 链接标签

代码:

<a href="https://www.baidu.com">百度一下，你就知道！</a>

效果:

百度一下，你就知道！

注：

属性 值 规定链接的目标 URL
href URL href
target _blank 规定在何处打开目标 URL, 仅在 href 属性存在时使用
_parent
_self
_topframename

(四). 图像标签

代码:

<a href="/"><img src="https://img0.baidu.com/it/u=1980042817,1332130506&fm=15&fmt=auto" style="width: 30%px; height: 48px; "></a>

效果:

(五). 表格标签

代码:

<table>

    <tr>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

    </tr>

    <tr>

        <td>1</td>

        <td>张三</td>

        <td>不详</td>

    </tr>

    <tr>

        <td>2</td>

        <td>李四</td>

        <td>女</td>

    </tr>

    <tr>

        <td>3</td>

        <td>王五</td>

        <td>应该是男的</td>

    </tr>

</table>

效果:

编号 姓名 性别
1 张三 不详
2 李四 女
3 王五 应该是男的

(六). 列表标签

  • 无序列表：

代码:

<ul>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

</ul>

效果:

  • 列表项
  • 列表项
  • 列表项
  • 列表项
  • 有序列表：

代码:

<ol>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

</ol>

效果:

  1. 列表项
  2. 列表项
  3. 列表项
  4. 列表项
  • 自定义列表：

代码:

<dl>

    <dt>+</dt><dd>列表项</dd>

    <dt>+</dt><dd>列表项</dd>

    <dt>+</dt><dd>列表项</dd>

</dl>

效果:

+

列表项

+

列表项

+

列表项

关于『HTML5』:第一弹 完结啦 [](￣▽￣)(可以说是相当的水)

(猜猜Markdown进阶完结了吗)

填坑.ING

咕咕。。国庆快乐！！1

举国同庆，繁花似锦。

江山如画，躬逢盛世。

盛世华章，荣光璀璨。

九州同庆，四海升平。

心怀家国，逐梦前行。

红旗漫卷，国顺家和。

春秋执笔，盛世华章。

我们生在红旗下、长在春风里、人民有信仰、国家有力量、目光所至、皆为华夏、五星闪耀、皆为信仰

国庆快乐鸭 (≧▽≦*)

关于『HTML5』:第一弹 就酱紫结束啦~ 叭叭~(′▽`~)

上一篇:关于『HTML』:第三弹 (完结篇)

关于『HTML5』第一弹的更多相关文章

  1. 关于『HTML5』:第二弹

    关于『HTML5』:第二弹 建议缩放90%食用 咕咕咕咕咕咕咕!!1 (蒟蒻大鸽子终于更新啦) 自开学以来,经过了「一脸蒙圈的 半期考试」.「二脸蒙圈的 体测」的双重洗礼,我终于有空肝 HTML5 辣 ...

  2. 关于『Markdown』:第一弹

    关于『Markdown』:第一弹 建议缩放90%食用 声明: 在我之前已有数位大佬发布 "Markdown" 的语法知识点, 在此, 仅整理归类以及补缺, 方便阅读. 感谢 C20 ...

  3. 关于『HTML』:第一弹

    关于『HTML』:第一弹 建议缩放90%食用 根据C2024XSC212童鞋的提问, 我准备写一稿关于『HTML』基础的帖 But! 当我看到了C2024XSC130的 "关于『HTML5』 ...

  4. 『MXNet』第一弹_基础架构及API

    MXNet是基础,Gluon是封装,两者犹如TensorFlow和Keras,不过得益于动态图机制,两者交互比TensorFlow和Keras要方便得多,其基础操作和pytorch极为相似,但是方便不 ...

  5. 『PyTorch』第一弹_静动态图构建if逻辑对比

    对比TensorFlow和Pytorch的动静态图构建上的差异 静态图框架设计好了不能够修改,且定义静态图时需要使用新的特殊语法,这也意味着图设定时无法使用if.while.for-loop等结构,而 ...

  6. 关于『HTML』:第二弹

    关于『HTML』:第二弹 建议缩放90%食用 第二弹! 它来了! 它来了! 我竟然没有拖更,对了,你们昨天用草稿纸了么 开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这 ...

  7. 关于『Markdown』:第二弹

    关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...

  8. 关于『进击的Markdown』:第一弹

    关于『进击的Markdown』:第一弹 建议缩放90%食用 比起隐蔽物下的狙击手,Markdown更像冲锋陷阵的阵头兵 简单.粗暴.直接.而且好上手 各位晚上好! 早饭吃了吗您 我 今 天 没 吃 M ...

  9. 『PyTorch』第二弹重置_Tensor对象

    『PyTorch』第二弹_张量 Tensor基础操作 简单的初始化 import torch as t Tensor基础操作 # 构建张量空间,不初始化 x = t.Tensor(5,3) x -2. ...

随机推荐

  1. 【Android开发】用WebView访问证书有问题的SSL网页

    Android系统的碎片化很严重,并且手机日期不正确.手机根证书异常.com.google.android.webview BUG等各种原因,都会导致WebViewClient无法访问HTTPS站点. ...

  2. 多态，动态方法调度(dynamic method dispatch)？

    8.多态Polymorphism,向上转型Upcasting,动态方法调度(dynamic method dispatch) 什么叫多态?简言之,马 克 - t o - w i n:就是父类引用指向子 ...

  3. mysql各个集群方案的优劣

    集群的好处 高可用性:故障检测及迁移,多节点备份. 可伸缩性:新增数据库节点便利,方便扩容. 负载均衡:切换某服务访问某节点,分摊单个节点的数据库压力. 集群要考虑的风险 网络分裂:群集还可能由于网络 ...

  4. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  5. Java报错：Failed to execute goal org.eclipse.jetty:jetty-maven-plugin:9.4.26.v20200117:run (default-cli) on project ssm-mybatis-plus: Failure

    修改一下端口就好了,不要用80端口. <plugin> <groupId>org.eclipse.jetty</groupId> <!--嵌入式Jetty的M ...

  6. 把图片存储 canvas原生API转成base64

    1.LocalStorage有什么用? 2.LocalStorage的普通用法以及如何存储图片. 首先介绍下什么是LocalStorage 它是HTML5的一种最新储存技术.但它只能储存字符串.以前的 ...

  7. 基于Vue的v-charts导出图片并下载

    依赖 npm install file-saver 页面 <ve-chart ref="chart"></ve-chart> <el-button t ...

  8. 原生实现C#和Lua相互调用-Unity3D可用

    引言     本篇简单介绍如何在C#中执行Lua脚本,传递数据到Lua中使用,以及Lua中调用C#导出的方法等.在Unity中开发测试,并打IL2CPP的Android包在模拟器上运行通过.Lua版本 ...

  9. OrchardCore Headless建站拾遗

    书接上回,OrchardCore的基本设置写了,但是有一说一,这个东西还是挺复杂的,如果需要构建一个简单的企业网站,还需要干点别的活. 本文考虑在尽量少编程的基础上,完成一个Headless网站的设置 ...

  10. Java 18 新特性：简单Web服务器 jwebserver

    在今年3月下旬的时候,Java版本已经更新到了18.接下来DD计划持续做一个系列,主要更新从Java 9开始的各种更新内容,但我不全部都介绍,主要挑一些有意思的内容,以文章和视频的方式来给大家介绍和学 ...