html5前端开发什么意思 web前端开发html

转载

码海舵手之心 2023-07-21 17:46:10

文章标签 html5前端开发什么意思前端开发语言 html html5 文章分类 HTML5 移动开发

HTML介绍

前言
一、HTML

1.块级元素和内联元素
2.属性
3.空白
4.实体引用
5. ``标签

添加标题
元数据：元素

6.在HTML中应用CSS和JavaScript
7.为文档设定主语言
8.HTML文字处理基础
9.建立超链接

1.统一资源定位符(URL)与路径(path)
2.绝对URL和相对URL
3.电子邮件链接

10.高级文字格式

缩略语

11.文档与网站架构

无语义元素
规划一个简单的网站

HTML调试

HTML验证

前言

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

一、HTML

1.块级元素和内联元素

<em>和</em>使内容斜体强调

块级元素：在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。
内联元素：出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。

2.属性

布尔属性：没有值的属性，他们只能有跟它的属性名一样的属性值。例如disabled属性，可以标记表单输入使之变为不可用（变灰色）

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

3.空白

无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

4.实体引用

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.

原意字符	等价字符引用
<	`<`
>	`>`
"	`"`
’	`'`
&	`&`

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

5. `<head>`标签

在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它包含了像页面的<title>(标题) ,CSS(如果你选择用 CSS 来为 HTML 内容添加样式)，指向自定义图标的链接和其他的元数据(描述HTML的数据，比如，作者，和描述文档的重要关键词)。

添加标题

<title>，它可以为文档添加标题。别和 <h1> (en-US) 元素搞混了，<h1> (en-US) 是为 body 添加标题的。
<title>元素是一项元数据，用于表示整个HTML文档的标题（而非文档内容）

元数据：元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta> 元素。
指定你的文档中字符的编码

<meta charset="utf-8">

添加作者和描述
许多<meta> 元素包含了name 和 content 特性：

name 指定了meta 元素的类型；说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

其他类型元数据

6.在HTML中应用CSS和JavaScript

CSS使用<link>元素，经常位于文档头部，这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css">

<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="my-js-file.js"></script>

注意： <script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

7.为文档设定主语言

值得一提的是可以（而且有必要）为站点设定语言，这个可以通过添加lang属性到HTML开始标签中来实现

<html lang="zh-CN">

8.HTML文字处理基础

这是一个 <span> 元素，它没有语义。当您想要对它用CSS（或者JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。

<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗？</span>

无序列表

<ul><li></li></ul>

有序列表

<ol><li></li></ol>

9.建立超链接

通过将文本（或其他内容，见块级链接)转换为<a>元素内的链接来创建基本链接，给它一个href属性（也称为目标），它将包含您希望链接指向的网址;使用title属性添加支持信息（当鼠标指针悬停在链接上时，标题将作为提示信息出现）

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>
的超链接。
</p>

1.统一资源定位符(URL)与路径(path)

统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。
超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）

<h2 id="Mailing_address">邮寄地址</h2>
<p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>
<!--链接到此特定id，在URL的结尾使用一个#指向它--!>

2.绝对URL和相对URL

绝对URL：指向由其在Web上的绝对位置定义的位置，包括 protocol（协议）和 domain name（域名）。
相对URL：指向与您链接的文件相关的位置，更像我们在前面一节中所看到的位置。

3.电子邮件链接

当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面。这样做是使用<a>元素和mailto：URL的方案。

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

10.高级文字格式

描述列表

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

块引用：如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用URL来指向引用的资源

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code><blockquote">></code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

行内引用：
行内元素用同样的方式工作，除了使用<q>元素。

<p>The quote element — <code><q">></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

引文
cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code><blockquote">></code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code><q">></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

缩略语

<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

标记联系方式、上标和下标等

11.文档与网站架构

文档的基本组成部分：页眉、导航栏、主内容、侧边栏、页脚
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。

无语义元素

可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML提供了 <div> 和 <span> 元素。
应配合使用 class 属性提供一些标签，使这些元素能易于查询。
<span> 是一个内联的（inline）无语义元素，行内元素！最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>

<div> 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>售价：$237.89</p>
</div>

换行<br> ：唯一能够生成多个短行结构的元素
水平分割<hr>：在文档中生成一条水平分割线，表示文本中主题的变化

规划一个简单的网站

信息架构：需要哪些页面、如何排列组合页面、如何互相链接等问题

大多数页面会使用一些相同元素，记录通用内容
为页面结构绘制草图，记录每一块的作用
对期望添加进站点的所有其他内容进行罗列
对罗列的内容进行分组（like卡片分类法）
绘制草图，一个气泡代表网站的一个页面，绘制连线来表示页面间的一般工作流。

HTML调试

主要存在两种类型的错误：

语法错误：由于拼写错误导致程序无法运行。通常熟悉语法并理解错误信息后很容易修复。不容易出现
逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

HTML验证

让HTML页面通过Markup Validation Service——由W3C创立并维护的标记验证服务。把HTML文档加载至本网页并运行，会返回一个错误报告。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：html5书写规则 html 写法

下一篇：hive哈希加密哈希加密是怎么使用的

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯