<!DOCTYPE html>
<html lang="">
<!-- 注释 -->
<em>
斜体元素
</em>
<head>
<meta charset="UTF-8">
<title>个人名片</title>
</head>
<body>
<div>
<h1>枳洛淮南</h1>
<p><strong>大</strong>学生</p>
</div>
<em>1</em><em>2</em><em>3</em>
<p>4</p><p>5</p><p>6</p>
<div>
<!-- ol:有序列表 ul:无序列表 -->
<h2>这货的爱好</h2>
<ul>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115347612">写代码</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/109665028">打游戏</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/106148431">打篮球</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115961511">看电影</a></li>
</ul>
</div>
<div>
<h2>学习经历</h2>
<ol>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115917383">小学</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115919317">初中</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115896139">高中</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
<li><a href='https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>
</ol>
</div>
<img src="image/01.jpg"/>
</body>
</html>
HTML概述简介
什么是HTML?
HTML(超文本标记语言)不是编程语言。而是一种标记语言,可以告诉Web浏览器如何构造您即将访问的网页。它可以像Web开发人员希望的那样复杂或简单。HTML由一系列元素组成,您可以使用这些元素来包围,包装或标记内容的不同部分,以使其以某种方式显示或起作用。封闭标签可以使内容成为超链接,以连接到另一个页面,斜体化单词等。
例如,考虑下面的文本行:
大学生
- 如果我们希望文本独立存在,则可以通过将其放在段落(<p>)元素中来指定它是一个段落:
<p>大学生</p>
TIPS:
HTML中的标签不区分大小写。这意味着它们可以大写或小写。例如,<title>标签可以写成<title>,<TITLE>,<Title>,<TiTlE>,等,它们都会工作。但是,最佳做法是将所有标签都写成小写,以保持一致性和可读性。
HTML元素的剖析
段落元素:
- 开始标记:它由元素的名称(在此示例中为p表示)组成,并包装在打开和关闭尖括号中。此开始标记标记元素开始或开始生效的位置。在此示例中,它位于段落文本的开头。
- 内容:这是元素的内容。在此示例中,它是段落文本。
- 结束标记:与开始标记相同,不同之处在于它在元素名称之前包含一个正斜杠。这标记了元素结束的位置。未能包含结束标记是一个常见的初学者错误,可能会产生特殊的结果。
元素是开始标签,后跟内容,然后是结束标签。
创建你的第一个HTML元素
将开始标签放在行的开头,中间放要倾斜的元素,将结束标记放在行尾。这样做应该使行斜体文本格式!
<!DOCTYPE html>
<html lang="">
<!-- 注释 -->
<em>
斜体元素
</em>
</html>
嵌套元素
元素可以放置在其他元素内。这称为嵌套。如果要声明大学生强调大,可以将单词非常包装在一个<strong>元素中,这意味着该文本(单词)应具有更强的文本格式:
<!DOCTYPE html>
<html lang="">
<!-- 注释 -->
<em>
斜体元素
</em>
<head>
<meta charset="UTF-8">
<title>个人名片</title>
</head>
<body>
<div>
<h1>枳洛淮南</h1>
<p><strong>大</strong>学生</p>
</div>
</html>
块与内联元素
在HTML中,有两个重要的元素类别:块级元素和内联元素。
块级元素在页面上形成可见块。块级元素将在其前面的内容之后的新行中显示。块级元素之后的任何内容也会出现在新行中。块级元素通常是页面上的结构元素。例如,块级元素可能表示标题,段落,列表,导航菜单或页脚。块级元素不会嵌套在一个内联元素内,但它可能嵌套在另一个块级元素内。
内联元素包含在块级元素内,并且仅围绕文档内容的一小部分(而不是整个段落或内容分组)。内联元素不会导致新行出现在文档中。它通常与文本一起使用,例如,<a>元素创建超链接,而元素例如<em>或<strong>创建强调。
<em>1</em><em>2</em><em>3</em>
<p>4</p><p>5</p><p>6</p>
<em>是一个内联元素。如下所示,前三个元素位于同一行上,中间没有空格。另一方面,<p> 是块级元素。每个p元素都显示在新行中,上方和下方都有空格。(该间距是由于浏览器适用于段落的默认CSS样式所致。)
空元素
并非所有元素都遵循开始标签,内容和结束标签的模式。有些元素由单个标签组成,通常用于在文档中插入/嵌入某些内容。例如,该<img>元素将图像文件嵌入到页面上:
<img src="image/01.jpg"/>
注意: 空元素有时称为void元素。
向元素添加属性
元素也可以具有属性。
元素的另一个示例是<a>。这代表锚点。锚点可以使包含在其中的文本成为超链接。锚点可以采用多种属性,如下:
- href:此属性的值指定链接的网址。例如:href=“https://www.mozilla.org/”。
- title:该title属性指定有关链接的其他信息,例如,要链接到的页面的描述。例如,title=“The Mozilla homepage”。当光标悬停在元素上时,这将显示为工具提示。
- target:该target属性指定用于显示链接的浏览上下文。例如,target="_blank"将在新选项卡中显示链接。如果要在当前选项卡中显示链接的内容,只需忽略此属性。
<div>
<!-- ol:有序列表 ul:无序列表 -->
<h2>这货的爱好</h2>
<ul>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115347612">写代码</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/109665028">打游戏</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/106148431">打篮球</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115961511">看电影</a></li>
</ul>
</div>
<div>
<h2>学习经历</h2>
<ol>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115917383">小学</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115919317">初中</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115896139">高中</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
</ol>
</div>
单引号还是双引号?
某些HTML代码中看到单引号。这是一个风格问题。您可以随意选择自己喜欢的一种。这两条线是等效的:
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
<li><a href='https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>
但是不可以混用:
如:
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>
HTML文档的剖析
单独的HTML元素本身并不是很有用。接下来,让我们检查各个元素如何组合以形成整个HTML页面:
<!DOCTYPE html>
<html lang="">
<!-- 注释 -->
<em>
斜体元素
</em>
<head>
<meta charset="UTF-8">
<title>个人名片</title>
</head>
<body>
<div>
<h1>枳洛淮南</h1>
<p><strong>大</strong>学生</p>
</div>
<em>1</em><em>2</em><em>3</em>
<p>4</p><p>5</p><p>6</p>
<div>
<!-- ol:有序列表 ul:无序列表 -->
<h2>这货的爱好</h2>
<ul>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115347612">写代码</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/109665028">打游戏</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/106148431">打篮球</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115961511">看电影</a></li>
</ul>
</div>
<div>
<h2>学习经历</h2>
<ol>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115917383">小学</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115919317">初中</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115896139">高中</a></li>
<li><a href="https://blog.csdn.net/weixin_43520256/article/details/115874951">大学</a></li>
<li><a href='https://blog.csdn.net/weixin_43520256/article/details/115874951'>大学</a></li>
</ol>
</div>
<img src="image/01.jpg"/>
</body>
</html>
- <!DOCTYPE html>:文档类型。在HTML刚成立时(1991年至1992年),doctype旨在充当指向一组规则的链接,HTML页面必须遵循这些规则才能被认为是好的HTML。
- <html></html>:<html>元素。此元素包装页面上的所有内容。它有时被称为根元素。
- <head></head>:<head>元素。此元素充当要包含在HTML页面上的所有内容的容器,而不是该页面将显示给查看者的内容。这包括将出现在搜索结果中的关键字和页面描述,用于样式内容的CSS,字符集声明等。
- <meta charset=“utf-8”>:此元素将您的文档的字符集指定为UTF-8,其中包括来自绝大多数人类书面语言的大多数字符。使用此设置,页面现在可以处理它可能包含的任何文本内容。
- <title></title>:<title>元素。这将设置页面的标题,即页面加载到的浏览器选项卡中显示的标题。页面标题还用于描述添加了书签的页面。
- <body></body>:<body>元素。它包含页面上显示的所有内容,包括文本,图像,视频,游戏,可播放的音轨或其他内容。
HTML中的空白
不管您在HTML元素内容中使用了多少空格(可以包含一个或多个空格字符,还包括换行符),HTML解析器在呈现代码时都会将每个空格序列减少为一个空格。
那么为什么要使用那么多的空格呢?
答案是可读性。
如果格式正确,则可以更容易地理解代码中正在发生的事情。在我们的HTML中,每个嵌套元素的缩进量比它所位于的元素缩进了两个空格。
实体引用:包括HTML中的特殊字符
在HTML,**<,>,",'和&**等特殊字符。它们是HTML语法本身的一部分。那么,如何在文本中包含这些特殊字符之一?例如,如果要使用大于号或小于号,并且不想将其解释为代码。
则可以使用字符引用进行此操作。这些是代表字符的特殊代码,将在这些确切的情况下使用。每个字符引用均以“&”号开头,并以“;”号结束。
HTML注释
- HTML具有在代码中编写注释的机制。浏览器会忽略注释,从而使注释对用户不可见。
- 注释的目的是允许您在代码中包含注释,以解释您的逻辑或编码。如果您离开足够长的时间以至于无法完全记住它,而又回到了代码库,这将非常有用。
要编写HTML注释,请将其包装在特殊标记 。例如:
<!-- 注释 -->
<em>
斜体元素
</em>
实际代码只输出:
斜体元素