本文总结了HTML的基础知识，包括HTML结构、标签、元素和属性，文本格式化、排版技巧，链接和图片的使用，列表和表格的创建，以及表单和多媒体内容的嵌入。此外，还提及了CSS样式的初步应用，用于增强页面设计。
HTML学习总结
HTML，超文本标记语言，我们用 HTML 来构建 Web 页面即所谓的网页，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。
在学习HTML（超文本标记语言）期间，我掌握了以下关键知识和技能：
一、HTML基础
- HTML基本结构：
（1）<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
（2）<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
（3）<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
（4）<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
（5）<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
（6）<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
（7）<body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
- HTML标签：学会了各种HTML标签的使用，了解了每个标签的作用和语义。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
例：<标签>内容<标签>
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
- HTML元素：了解了HTML标签与其内容组成的HTML元素的概念。理解了HTML元素的嵌套和层次结构。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签（Opening tag）：包含元素名称，被角括号包围。表示元素从这里开始起作用。
结束标签（Closing tag）：包含元素名称，被角括号包围。表示元素从这里结束4。
内容（Content）：元素内容，本例时所输入的文本本身。
元素（Element）：由以上三种元素组成。
二、HTML属性
属性是 HTML 元素提供的附加信息。它拥有以下特点：
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
三、文本格式化和排版
- 标题和段落：学会使用<h1>到<h6>标签创建不同级别的标题，以及使用<p>标签创建段落。
-
<html> <body> <h1> heading 1</h1> <h2> heading 2</h2> <h3> heading 3</h3> <h4> heading 4</h4> <h5> heading 5</h5> <h6> heading 6</h6> <p>这就是运行结果</p> </body> </html>运行结果：
-
- 文本样式：掌握了使用<strong>、<em>、<u>等标签来加粗、斜体和下划线文本。
-
<html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html>运行结果：
-
- 链接和图片：学会使用<a>标签创建超链接，并设置链接的目标页面。同时，也掌握了使用<img>标签嵌入图片并设置其属性的方法。
<html>
<body>
<a href="https://www.baidu.com/?tn=21002492_12_hao_pg">
超链接</a>
</body>
</html>
运行结果：
<html>
<body>
<p>
使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
运行结果：
四、列表和表格
- 有序列表和无序列表：了解了使用<ol>和<ul>标签创建有序和无序列表，并使用<li>标签定义列表项。
有序列表：
有序列表是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<html>
<body>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
</body>
</html>
运行结果：
无序列表：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<html>
<body>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
</body>
</html>
运行结果：
- 表格：学会创建表格，包括使用<table>、<tr>和<td>等标签来定义表格的结构和内容。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干 单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数 据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<html>
<body>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>运行结果：
五、 表单
- 表单元素：了解了常见的表单元素，如文本框、复选框、单选按钮和下拉列表。
<!DOCTYPE html>
<html>
<body>
<form>
name:<br>
<input type="text" name="name">
<br>
password:<br>
<input type="text" name="password">
</form>
</body>
</html>
运行结果：
- 表单验证：学会使用HTML5的表单验证属性，如required、pattern等来验证用户输入的有效性。
六、 嵌入多媒体内容
- 音频和视频：掌握了使用<audio>和<video>标签嵌入音频和视频，并设置其属性和控制方法。
音频：<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mpeg">
<embed height="100" width="100" src="/i/song.mp3" />
</audio>
</body>
</html>
运行结果：
视频：
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="/i/movie.ogg" type="video/ogg" />
<source src="/i/movie.mp4" type="video/mp4" />
<source src="/i/movie.webm" type="video/webm" />
<object data="/i/movie.mp4" width="320" height="240">
<embed width="320" height="240" src="/i/movie.swf" />
</object>
</video>
</body>
</html>
运行结果：
七、页面结构和布局
- 块级元素和内联元素：了解了块级元素和内联元素的区别，以及如何使用它们来组织页面结构和布局。
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
- CSS样式：尽管HTML主要用于描述页面的结构，但也了解了如何使用内联样式或链接外部样式表来为页面添加CSS样式，实现更丰富的布局和设计效果。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来 插入样式表：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就 可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签 定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关 的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的 颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>八、总结
通过学习HTML，我能够创建简单的网页并为其添加基本的内容和样式。我掌握了HTML的核心概念和常用标签，并了解了如何使用它们来组织页面、格式化文本、创建列表和表格、设计表单以及嵌入多媒体内容。
未来，我计划进一步学习HTML的高级特性和最佳实践，以提升我的网页开发技能，并与其他前端技术（如CSS和JavaScript）结合起来构建更复杂且交互性更强的Web页面和应用程序。
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
