一篇文章讲清楚html css js三件套之html
目录
HTML
HTML是网页的基础,它是一种标记语言,用于定义网页的结构和内容。HTML标签告诉浏览器如何显示网页元素,例如段落、标题、列表、链接、图片和表格等。
HTML发展史
- 1990年:Tim Berners-Lee提出了超文本的概念,这是HTML的前身。
- 1991年:HTML作为SGML的一个应用被正式定义。
- 1993年:IETF开始制定HTML规范。
- 1995年:HTML 2.0发布。
- 1994年:W3C(万维网联盟)成立,致力于推动Web标准的发展。
- 1997年:HTML 3.2发布。
- 1999年:HTML 4.0发布,2000年成为ISO标准。
- 2000年代初:W3C转向XHTML,但随后又重新关注HTML。
- 2004年:WHATWG成立,独立于W3C之外。
- 2008年:W3C和WHATWG合作,发布了HTML5的第一份草案。
- 2014年:HTML5作为官方标准发布。
HTML概念和语法
- 元素:HTML文档由多个元素组成,每个元素由开始标签和结束标签定义。
- 标签:HTML标签用尖括号
<>
包围,例如<p>...</p>
。 - 属性:HTML标签可以包含属性,属性提供关于元素的额外信息,通常在开始标签中定义,例如
<img src="image.jpg" alt="描述">
。 - 空标签:某些HTML标签不需要结束标签,如
<img>
、<br>
、<hr>
等。 - 扩展名:HTML文件通常以
.html
或.htm
结尾。 - 备注: HTML 标签不区分大小写。也就是说,输入标签时既可以使用大写字母也可以使用小写字母。例如,标签 <title> 可以写作 <title>、<TITLE>、<Title>、<TiTlE> 等,也都可以正常工作。不过,从一致性、可读性来说,最好仅使用小写字母。
常见的HTML标签:
以下是一些常见的HTML标签及其用法示例:
-
<p>
- 段落标签<p>这是一个段落。</p>
-
<h1>
到<h6>
- 标题标签,<h1>
是最高级别的标题<h1>这是主标题</h1> <h2>这是副标题</h2>
-
<a>
- 超链接标签,用于链接到另一个页面或锚点<a href="https://www.example.com">访问示例网站</a>
-
<img>
- 图片标签,用于在网页上显示图片<img src="image.jpg" alt="示例图片">
-
<ul>
和<ol>
- 无序列表和有序列表<ul> <li>列表项1</li> <li>列表项2</li> </ul> <ol> <li>第一项</li> <li>第二项</li> </ol>
-
<li>
- 列表项标签,用于在列表中创建单个列表项<ul> <li>这是列表中的一个项目。</li> </ul>
-
<strong>
- 强调标签,表示文本非常重要<strong>这很重要!</strong>
-
<em>
- 斜体标签,表示文本需要被强调<em>这是斜体文本。</em>
-
<b>
- 粗体标签,使文本显示为粗体<b>这是粗体文本。</b>
-
<i>
- 斜体标签,用于显示斜体文本<i>这是斜体文本。</i>
-
<u>
- 下划线标签,为文本添加下划线<u>这是带下划线的文本。</u>
-
<br>
- 换行标签,用于在文本中创建换行这是第一行。<br>这是第二行。
-
<hr>
- 水平线标签,用于在页面上创建一条水平线<hr>
-
<table>
- 表格标签,用于创建表格<table> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table>
-
<tr>
- 表格行标签,用于在表格中创建行 -
<td>
和<th>
- 表格单元格标签,<td>
用于数据,<th>
用于表头 -
<form>
- 表单标签,用于创建用户输入表单<form action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <input type="submit" value="提交"> </form>
-
<input>
- 输入字段标签,用于创建不同类型的输入控件<input type="text" name="username" placeholder="输入用户名">
-
<button>
- 按钮标签,用于创建可点击的按钮<button type="button">点击我</button>
-
<div>
- 区块标签,用于布局和分组元素<div>这是一个区块元素。</div>
这些只是HTML中众多标签的一部分。每种标签都有其特定的用途和属性,通过组合使用这些标签,可以创建结构丰富、功能多样的网页。
为了实现语义化标记,HTML 提供了明确这些区段的专用标签,例如:
<header>:页眉。
<nav>:导航栏。
<main>:主内容。主内容中还可以有各种子内容区段,可用<article>、<section> 和 <div> 等元素表示。
<aside>:侧边栏,经常嵌套在 <main> 中。
<footer>:页脚。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>二次元俱乐部</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<!-- 本站所有网页的统一主标题 -->
<h1>聆听电子天籁之音</h1>
</header>
<nav>
<!-- 本站统一的导航栏 -->
<ul>
<li><a href="#">主页</a></li>
<!-- 共 n 个导航栏项目,省略…… -->
</ul>
<form>
<!-- 搜索栏是站点内导航的一个非线性的方式。 -->
<input type="search" name="q" placeholder="要搜索的内容" />
<input type="submit" value="搜索" />
</form>
</nav>
<main>
<!-- 网页主体内容 -->
<article>
<!-- 此处包含一个 article(一篇文章),内容略…… -->
</article>
<aside>
<!-- 侧边栏在主内容右侧 -->
<h2>相关链接</h2>
<ul>
<li><a href="#">这是一个超链接</a></li>
<!-- 侧边栏有 n 个超链接,略略略…… -->
</ul>
</aside>
</main>
<footer>
<!-- 本站所有网页的统一页脚 -->
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>
HTML 调试
HTML 并不像 Rust 那么难以理解,浏览器并不会将 HTML 编译成其他形式,而是直接解析并显示结果(称之为解释,而非编译)。可以说 HTML 的 元素 语法比 Rust、JavaScript 或 Python 这样“真正的编程语言”更容易理解。浏览器解析 HTML 的过程比编程语言的编译运行的过程要宽松得多,但这是一把双刃剑。
错误信息分析
错误信息一般都是有用的,也有没用的,有一些经验后你就能够分析并修复这些错误。下面来观察这些错误信息。可以看到每条信息都对应一个行号和一条信息,使得定位错误更方便。
- End tag
li
implied, but there were open elements(需要li
的结束标签,但又开始了新的元素)(共出现 2 次):这条信息表明有开始标签必须有结束标签,必须出现结束标签的地方却没有找到它。行/列信息指出结束标签必须出现的位置的第一行,这一线索已经足够明显了。 - Unclosed element
strong
(未闭合元素strong
):非常容易理解,<strong> 元素没有闭合,行/列信息表明了它的位置。 - End tag
strong
violates nesting rules(结束标签strong
违反了嵌套规则):指出了错误嵌套的元素,行/列信息表明了它的位置。 - End of file reached when inside an attribute value. Ignoring tag(在属性值内达到文件末尾。忽略标签): 这个比较难懂,它说的是在某个地方有一个属性的值格式有误,估计是在文件末尾附近,因为文件的结尾出现在了一个属性值里。事实上浏览器没有渲染超链接已经是一个很明显的线索了。
- End of file seen and there were open elements(文件结尾有未闭合的元素):这个略有歧义,但基本上表明了有元素没有正确闭合。行号指向文件最后几行,且错误信息给出了一个这种错误的案例:
-
来看一个示例:<a href="https://www.mozilla.org/>Mozilla 主页链接</a> ↩ </ul>↩ </body>↩</html>
备注: 属性缺少结束引号会导致元素无法闭合。因为文档所有剩余部分(直到文档某处出现一个引号)都将被解析为属性的内容。
- Unclosed element
ul
(未闭合元素ul
):这个意义不大,因为 <ul> 已经正确闭合了。出现这个错误是因为 <a> 元素没有右引号而没有闭合。
如果你不能一次弄懂所有的错误,别着急,可以试试先修复那些已经弄懂的,再申请验证,看看剩下哪些错误。有时候先修复的错误可能让你摆脱后面一系列的错误,因为一个小问题可能引发一连串错误,就像多米诺骨牌。
HTML文档结构
一个典型的HTML文档结构如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
HTML5的新特性
HTML5不仅仅是HTML的一个新版本,它引入了一系列新特性和改进,以适应现代Web应用的需求:
- 多媒体:
<video>
和<audio>
标签允许直接嵌入视频和音频内容。 - 图形:
<canvas>
标签提供了一个绘图API。 - 表单控件:新增了日期选择器、电子邮件输入等控件。
- 语义化标签:如
<article>
、<section>
、<nav>
等,提供了更好的内容结构。 - 本地存储:通过
localStorage
和sessionStorage
提供了更多的客户端存储选项。
结论
HTML是构建网页的基础,它的不断发展和改进使得Web开发更加强大和灵活。了解HTML的历史和基本概念对于任何希望掌握Web开发的人来说都是必要的。随着HTML5的推出,Web开发者现在拥有了更多工具来创建丰富、互动和易于访问的网页。
期末放假自学三件套,希望我们可以一起学习!
原文地址:https://blog.csdn.net/juzihuaile/article/details/140701102
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!