1 元素

1.1 语法

  • 示例:
开始标签元素内容完结标签
<p>段落</p>
<a>链接</a>
<br>换行
  • 语法:
# 以开始标签起始,以完结标签终止;# 元素内容是开始标签与完结标签之间的内容;# 空元素在开始标签中进行敞开(以开始标签的完结而完结);# 少数元素可领有属性。

1.2 元素嵌套

  • 比方之前写的:
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>开始学习html,这是我的第一个页面,哈哈哈!</title></head><body>    <h1>题目1:尽管我不会,然而我有学习的能源!</h1>    <h2>题目2:明天我认真的学习了!</h2>    <p>这是一个段落!</p></body></html>>
  • 以上内容蕴含的元素有<html><head><body><h1><h2><p>六个html元素;

1.3 空元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中敞开的;
  • 比方前边说的<br> 就是没有敞开标签的空元素;
  • 空元素的敞开办法为,例如<br />

1.4 书写注意事项

  • 元素倡议应用小写,比方<a>dsd</a>,而不要写<A>sdsd</A>

1.5 HTML标签

  • 内容比拟多,能够参考学习https://www.runoob.com/tags/html-reference.html

2 属性

2.1 属性阐明

  • 对TML 元素能够设置属性;
  • 属性能够在元素中增加附加信息;
  • 属性个别形容于开始标签;
  • 属性总是以名称/值对的模式呈现,比方python中的字典,有键和值,比方name="zhangsan";

2.2 示例

  • 比方元素<a>href 属性,示意链接的地址;
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>开始学习html,这是我的第一个页面,哈哈哈!</title></head><body>    <h1>题目1:尽管我不会,然而我有学习的能源!</h1>    <h2>题目2:明天我认真的学习了!</h2>    <p>这是一个段落!</p>    <a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a></body></html>>
  • 浏览器中关上如下:

2.3 属性举例

属性阐明
class规定元素的类名(classname)
id规定元素的惟一 id
style规定元素的行内款式
title规定元素的额定信息

2.4 注意事项

  • 属性倡议应用小写;
  • 应用双引号或单引号括起来;
  • 如果遇到有双引号和单引号一起用的,留神要成对用,比方name='gebi "laowang"';

3 题目

3.1 题目阐明

  • 这个和markdown查不对,都应用h来示意;
  • 应用<h1>到<h6>标签进行定义;
  • <h1>是最大题目,顺次减小,<h6>最小;

3.2 应用办法

<h1>题目1(相似一级题目,集体叫法)</h1><h2>题目2(相似二级题目,集体叫法)</h2><h1>题目1(相似一级题目,集体叫法)</h1><h1>题目1(相似一级题目,集体叫法)</h1>

3.3 举例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>题目学习</title></head><body>    <h1>1、xx工具的应用</h1>    <h2>1.1、xx工具的下载</h2>    <h3>1.1.1、xx工具下载网址</h3>    <a href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a></body></html>>

4 水平线

4.1 HTML水平线

  • 应用标签<hr> 来定义 页面中的水平线;
  • 其作用可用来宰割内容。

4.2 应用办法

<p>段落1</p><hr><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><hr>

4.3 举例

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>水平线学习</title></head><body>    <p align="center">静夜思</p>    <hr>    <p align="center">床前明月光,</p>    <p align="center">疑是地上霜。</p>    <p align="center">举头望明月,</p>    <p align="center">抬头思故土。</p>    <hr></body></html>

5 正文

5.1 HTML正文

  • 应用<!-- xxxx -->进行正文;
  • 和编程语言一样,晋升代码的可浏览性,不会被浏览器显示进去。

5.2 应用办法

  • <!-- 写正文的内容 -->

5.3 举例

  • vs code间接在须要加正文的代码行应用ctrl + /即可疾速进行代码正文;

6 段落

6.1 HTML段落

  • 其实就是将文档能够分为若干个段落;
  • 应用<p>段落内容</p>来示意;
  • 浏览器会主动在段落前后加空行。

6.2 应用办法

  • <p>段落内容</p>
  • 段落内换行应用<br>

6.3 举例

  • 第一种:间接应用<p>段落内容</p>,诗句的题目是一段,内容是一段;
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>段落学习</title></head><body>    <!-- 应用一首诗来示意段落! -->    <p align="center">静夜思</p>    <hr>    <p align="center">床前明月光,疑是地上霜。举头望明月,抬头思故土。</p>    <!-- <p align="center">疑是地上霜。</p>    <p align="center">举头望明月,</p>    <p align="center">抬头思故土。</p> -->    <hr></body></html>

  • 第二种:应用<br>在一个段落内换行;
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>段落学习</title></head><body>    <!-- 应用一首诗来示意段落! -->    <p align="center">静夜思</p>    <hr>    <!-- 第一种 -->    <!-- <p align="center">床前明月光,疑是地上霜。举头望明月,抬头思故土。</p> -->    <!-- <p align="center">疑是地上霜。</p>    <p align="center">举头望明月,</p>    <p align="center">抬头思故土。</p> -->    <!-- 第二种 -->    <p align="center">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>抬头思故土。</p>    <hr></body></html>

  • 第三种:诗句的每一句就是一个段落;
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>段落学习</title></head><body>    <!-- 应用一首诗来示意段落! -->    <p align="center">静夜思</p>    <hr>    <!-- 第一种 -->    <!-- <p align="center">床前明月光,疑是地上霜。举头望明月,抬头思故土。</p> -->    <!-- 第二种 -->    <!-- <p align="center">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>抬头思故土。</p> -->    <!-- 第三种 -->    <p align="center">床前明月光。</p>    <p align="center">疑是地上霜。</p>    <p align="center">举头望明月,</p>    <p align="center">抬头思故土。</p>    <hr></body></html>