-
本次笔记记录index.html文档内容
-
笔记大纲说明：
- index.html 示例
- 图像
- 标记文本
- 段落Paragraph
- 列表List
- 链接
-
（一）index.html 示例：
-
<!DOCTYPE html> <html lang="en-CHINA"> <head> <meta charset="utf-8"> <meta name="viewport" content="weidth=device-width" /> <title>My test page</title> </head> <body> <img src="images/3.png" alt="My test image"> </body> </html><!DOCTYPE html> 文档声明：这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。仅用于保证文档正常读取。 <html></html> html标签：该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 lang 属性，写明了页面的主要语种。 <head></head> head页头标签：所有那些你加到页面中，且不向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。用于定义一些特殊内容，比如：页面标题，定时刷新，外部文件等。
只有六个标签放在 head页头标签里：
- title标签
- meta标签
- link标签
- style标签
- script标签
- base标签
<meta charset="utf-8"> 该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。 <meta name="viewport" content="width=device-width"> 视口元素可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。 <title></title> 是head标签的内部标签，该元素不是设置页面的标题，而是显示在浏览器标签页上，也作为收藏网页的描述文字。 <body></body> body页身标签：该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。大部分代码都是在这个标签中编写的。
（二）图像：
<img src="images/3.png" alt="My test image">- <img>元素：用于添加图片，图像文件路径的地址属性 src，可在所在位置嵌入图像。该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
- 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。
（三）标记文本：
标题Heading
- 标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题，<h1>至<h6> ，一般最多用到 3-4 级标题。你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于无障碍阅读和搜索引擎优化等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
-
<h1>title1</h1> <h2>title2</h2> <h3>title3</h3> <h4>title4</h4> <h5>title5</h5> <h6>title6</h6>
（四）段落Paragraph
<p>元素是用来指定段落的。通常用于指定常规的文本内容
<body>
<img src="images/3.png" alt="My test image">
<h1>title1</h1>
<p>I love three things in this world,the sun ,the moon and you.</p>
</body>（五）列表List
- Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：
- 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个<ul>元素包围。显示为圆点。
- 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个<ol>元素包围。显示为序号。列表的每个项目用一个列表项目（List Item）元素 <li>包围。
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>（六）链接
- <a> 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，比如“Slack Manifesto”。将文本包含在<a>元素内，添加一个 href 属性，href 代表超文本引用（ hypertext reference），把属性的值设置为所需网址：如果网址开始部分省略了 https:// 或者 http://，可能会引起错误结果，添加链接后可点击试试是否正确。
-
<a href="https://www.csdn.net">Slack Manifesto</a>
