W3C三剑客——HTML5 快速入门指引

最新推荐文章于 2023-03-19 16:50:25 发布
最新推荐文章于 2023-03-19 16:50:25 发布
阅读量443 收藏 1
点赞数
分类专栏： W3C 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44064134/article/details/107852881
版权

HTML5

1.开发工具推荐

  • VSCode(推荐使用)
  • Hbuilder
  • IDEA

2.VSCode插件推荐成倍提升开发效率

  • Auto Rename Tag (方便修改标签时同时修改)

  • Live Server（可也根据我们的代码更新实时更新页面）

  • vscode-icons（改变文件图标显示，帮助我们快速识别文件类型）

  • Prettier - Code formatter（代码快速格式化）

  • Easy LESS (less必备)

  • Power Mode (让敲代码变得更有趣，这个可以不装，喜欢的也可以装上，需要再配置文件中加入如下代码)

        "powermode.enabled": true,
    "powermode.enableShake": false

3.什么是HTML？

  • HTML 是用来描述网页的一种语言。
    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言，而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页

在这里插入图片描述

4.W3C标准

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。。

  • 结构话标准语言 (HTML 、XML)
  • 表现标准语言 CSS
  • 行为标准 （DOM 、ECMAScript）ES6标准

5.HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8"> <!-- 这是一个单标签 -->
    <meta name="keyword" content="这是一个学习html的网站">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    Hello Html！
    这里是网页的主体，在这里可以写任何内容
</body>
</html>

  • 最外层是一层html标签包裹，网页的代码必须写在html标签之间

  • 里边分别是head标签和body标签，head标签包裹的叫网页的头部，body包裹的叫网页的主体

  • 这是注释结构

6.网页的基本信息

  • DOCTYPE声明，告诉浏览器我们要使用什么规范

  • <title>标签 ，网页的标题

  • <meta>标签，描述性标签，用来描述网页的信息，一般用来做SEO（搜索引擎优化）

7.常用的一些文本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1,1 initial-scale=1.0">
    <title>常用的标签</title>
</head>
<body>
    <p>这是一个段落</p>
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <h3>这是一个三级标题</h3>
    <hr><!-- 这是一条线 -->
    你好呀<br><!-- 在html中只会识别一个空格，不会识别换行，这是强制换行标签-->小明
    <!-- 以下是字体样式标签 -->
    <strong>这是加粗</strong>
    <i>这是斜体</i>
    <u>这是下划线</u>
    <s>这是删除线</s>

    <pre>这个标签会保留文本原来的格式
        也就是说，它可以识别换行缩进，空格 等
    </pre>

    <span>这是一个普通文本标签</span>

</body>
</html>

8.一些html中的特殊符号

HTML 原代码显示结果描述
&lt<小于号或显示标记
&gt>大于号或显示标记
&amp&可用于显示其它特殊字符
&quot“引号
&reg®已注册
&copy©版权
&trade™商标
&ensp半个空白位
&emsp一个空白位
&nbsp不断行的空白

其他不常用的特殊符号更多查看

9.媒体元素

  • 图片
    • jpg
    • png
    • gif
  • 音频
    • mp3
    • wav
    • Ogg Vorbis
  • 视频
    • mp4
    • ogg
    • WebM

具体请前往

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体元素</title>
</head>
<body>
    <img 
    src="这里写图片的路径，可以是相对路径也可以是(绝对路径，一般不使用)，还可以是网络图片" 
    alt="这里是图片没有加载出来时的文字填充"
    title="当鼠标放到这张图片上就会显示这行文字">

    <audio id="" src="这是音频路径" loop="false" controls="false" name="未知音频" author="未知作者">
    </audio>

    <video class="" src="这是视频路径" initial-time="0" autoplay="false" loop="false" muted="false">
    </video>

</body>
</html>

10.超链接

  • <a href=“连接地址”>标签
<a href="http://www.w3school.com.cn">W3School</a>

11.列表

<!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>

    <ul>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
    </ul>

    <ol start="10" type="I">
       <li>这是有序列表</li>
       <li>这是有序列表</li>
       <li>这是有序列表</li>
       <li>这是有序列表</li>
       <li>这是有序列表</li>
       <li>这是有序列表</li>
       <li>这是有序列表</li>
    </ol>
</body>
</html>

12.表格

  • <table>标签最外层包裹
  • <tr> 表示行
  • <td> 表示行内单元格
  • <th> 表格首行标题(可以不写)
  • <tbody>表格体（可以不写）
  • <thead> 表头（可以不写）
  • <tfoot> 底部（可以不写）

在这里插入图片描述

<html>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

13.表单

  • 表单的基本结构
<!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 class="" action="提交到哪里" method="GET">
        用户名:<input type="text" name="username"><br>
        密&emsp;码:<input type="password" name="password">
        <!-- <input type="button" value="登录"> -->
        <input type="submit" >
    </form>
</body>
</html>
  • 输入框
  • 按钮
  • 表单格式和验证
E-mail: <input type="email" name="user_email" />
Homepage: <input type="url" name="user_url" />
Points: <input type="number" name="points" min="1" max="10" />
<input type="range" name="points" min="1" max="10" />
Date: <input type="date" name="user_date" />

<!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" name="gender" >
        女：<input type="radio" name="gender">
    <br>
        游泳：<input type="checkbox" name="likes">
        篮球：<input type="checkbox" name="likes">
        羽毛球<input type="checkbox" name="likes">
        网球：<input type="checkbox" name="likes">
</body>
</html>

14.行内元素和块级元素

一、行内元素与块级元素

  • 块级元素（无论内容多少都独占一行的元素）
<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为 fieldset 元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体（正文）
<td>表格中的标准单元格
<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行
  • 行内元素（宽度由内容撑开，左右都是行内元素，可以排成一排）
<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为 input 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量
  • 可变元素素列表–可变元素为根据上下文语境决定该元素为块元素或者内联元素
按钮
<del>定义文档中已被删除的文本
<iframe>创建包含另外一个文档的内联框架（即行内框架）
<ins>标签定义已经被插入文档中的文本
<map>客户端图像映射（即热区）
<object>object对象
<script>客户端脚本

二、行内元素与块级函数的三个区别

1.行内元素与块级元素直观上的区别

​ 行内元素会在一条直线上排列，都是同一行的，水平方向排列

​ 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

三、行内元素转换为块级元素

​ display:block (字面意思表现形式设为块级)

15.iframe

  • 在网页里嵌入一个网页
<!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>
    <iframe src="http://www.baidu.com" frameborder="0"
     width="1000px" height="800px" name="in"></iframe>
    <a href="../Index.html" target="in">点击跳转</a>
</body>
</html>

16.页面结构分析

在这里插入图片描述

在这里插入图片描述

17.下拉框与文本域

<!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>
    <select name="Countries">
        <option value="中国" selected>中国</option>
        <option value="美国" >美国</option>
        <option value="英国" >英国</option>
        <option value="瑞士" >瑞士</option>
    </select>
    <textarea  id="" cols="30" rows="10">
        这是文本域
    </textarea>
</body>
</html>
Pointer-faker
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
w3c标准html5手册完整版
07-10
w3c标准html5手册完整版,含有HTML, XHTML， JQuery， JavaScript， CSS， SQL等的帮助手册，查看API很方便，CHM格式的，携带也很方便
w3c怎么检测html5,HTML5教程：html标签属性通过w3c验证
weixin_42517854的博客
06-18 202
该楼层疑似违规已被系统折叠隐藏此楼查看此楼昨天一个朋友的项目，客户需要通过w3c验证(可能你认为这是很操蛋的一件事情，其实我也这样认为， 浏览器兼容才是硬道理， 但顾客就是死了很多年但人们还以为他还活着一个扯蛋的东东，西方人叫做上帝-god, 狗的，就差一个ri，他们的需求，不满足就没办法呀)。但是他在标签里写了一些用户属性，所以通不过。问我解决的方案，想了一些方法给他。首先解释一下什么叫用户属...
HTML5标签选择指引
weixin_30345577的博客
09-25 79
转载于:https://www.cnblogs.com/sunxirui00/p/7590982.html
W3C HTML 5 中文手册
10-16
W3C HTML 5 中文手册
html5的发布标准,W3C版HTML5标准将于2014年发布
weixin_31885977的博客
06-18 231
HTML5标准的编制者万维网联盟(W3C)和网页超文本技术工作小组(WHATWG)于今年7月23日正式分家，将编制各自的HTML5标准，但是两个月过去了，双方都没有太大的动向。据ArsTechnica报道，W3C今天宣布计划于2014年发布自家的HTML5标准，与此同时还会开发更新的HTML5版本，所以将会有HTML5.1、5.2、5.3.....按照W3C的计划，今年年底前将向公众发布自家的HT...
w3c标准html5手册完整版.zip
03-31
W3C（World Wide Web Consortium）是负责制定这些标准的国际组织，其发布的HTML5手册是开发者的重要参考资料。 首先，HTML5的核心改进之一是引入了新的语义化标签，如、、和，这些标签有助于搜索引擎优化（SEO）和...
萌新的HTML5 入门指南
01-22
广义上的HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。 ...
Javascript HTML5 W3C官方API
12-03
JavaScript、HTML5以及W3C官方API是现代Web开发中的核心元素，它们为开发者提供了强大的功能和灵活性。这里，我们将深入探讨这三个主题以及与之相关的CHM和RAR文件。 JavaScript是一种广泛使用的脚本语言，主要在...
w3c标准html5手册
11-14
HTML5是Web开发的最新标准，它在2014年由W3C（World Wide Web Consortium，万维网联盟）正式发布，旨在提升网页的互动性、可访问性和可用性。这个标准不仅更新了HTML语言，还引入了新的元素、APIs以及对多媒体的支持...
W3C公布最新的HTML5标准草案
09-28
周二，W3C机构正式对外公布了互联网网页代码新标准HTML5的草案。预计正式版的标准将会在两年以后形成。 HTML可以说是互联网信息组织的一个基石。据悉，这是自从1997年以来对于HTML标准最为重大的一次升级。 之前的...
js 获取radio按钮值的实例
01-19
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>js 获取radio按钮值的实例</title></head><body><form id=”f
w3c Html5 与 Html4的不同
simon的博客
07-30 499
w3 公布的html5与html4不同最新版： [url]http://dev.w3.org/cvsweb/~checkout~/html5/html4-differences/Overview.src.html?rev=1.136;content-type=text%2Fhtml[/url] HTML5 differences from HTML4 [LONGSTATU...
编写html5文档时,编写HTML5文档时，为什么要遵守W3C标准
weixin_29137599的博客
06-05 616
编写HTML5文档时，为什么要遵守W3C标准更新时间：2019-03-03 16:24最满意答案什么要遵守W3C标准，我也思考过这个，以下是我个人的见解。一句话：所谓的标准就是为了弥补主观上的不足。这是别处来，忘记那儿了，非常有道理，非常有嚼劲，知道出处的告知一声。我深入思考了一下：W3C 标准是为了弥补主观上的不足，弥补的是新手对 SEO 的理解，即使不了解 SEO，只需要去遵循 W3C 标准即...
html5 鼠标点击移动 w3c,HTML5——w3c教程总结（一）
weixin_32658257的博客
06-05 192
一、video标签实现video支持媒体播放视频功能，兼容性IE9以上，IE9支持部分MP4功能。你的浏览器不支持video标签 //当浏览器不支持时显示的文字效果如图：video_show.png属性：video属性.png方法：video方法.png实现代码如下：您的电脑不支持video标签var video = document.getElementById("video");functio...
w3c之HTML5实战标签属性
qq_48570211的博客
07-28 888
** w3cschool通关之H5实战 ** 2018年9月我刚毕业进入大学，对计算机方面的了解仅仅停留在安装和卸载软件，就这样一个对计算机白中白的傻孩子填报了计算机专业，幻想着有一天也能成为令别人羡慕的黑kuo，大学入学第一件事就是加入计算机协会做一些渗透的题，我发现自己的确不是往网络安全方面发展的料子，就转战跟着老师学Java，中途跟了跟全国电子设计大赛的队伍，发现有点应付不过来，最终放弃了电赛选择了Java。我们学校大一下半年开C语言课程，大二上半年开Java课程，我几乎是比别人提前一年接触到Jav
HTML5 简介及基础教程
Glenseeds的博客
03-19 964
学习 HTML 新手教程是入门前端开发的基础。对于想要深入学习前端开发的人来说，需要继续学习和掌握其他相关技术和工具。
[前端基础] HTML5 篇
不定期更新 Web 开发及机器学习相关博客
10-30 826
HTML5 是 Web 中核心语言 HTML 的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进。
HTML5学习教程.docx
最新发布
09-30
HTML5的起源可以追溯到2006年，由W3C（万维网联盟）和WHATWG（Web Hypertext Application Technology Working Group）共同合作推动。这两个组织决定联手创建一个新版本的HTML，旨在简化代码、增强可访问性和提高用户...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Pointer-faker

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

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

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

打赏作者

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

抵扣说明：

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

余额充值