HTML之元素、属性、标题、段落【笔记小结】

网站建设3年前发布 10100
223 0 0
文章目录

(HTML之元素、属性、标题、段落【笔记小结】),HTML之元素、属性、标题、段落【笔记小结】,HTML之元素、属性、标题、段落【笔记小结】,HTML之元素、属性、标题、段落【笔记小结】,HTML之元素、属性、标题、段落【笔记小结】,HTML之元素、属性、标题、段落【笔记小结】,HTML之元素、属性、标题、段落【笔记小结】,、
HTML之元素、属性、标题、段落【笔记小结】,

(HTML之元素、属性、标题、段落【笔记小结】)

  • 示例：
开始标签 元素内容 结束标签
<p> 段落 </p>
<a> 链接 </a>
<br> 换行
  • 语法：
# 以开始标签起始，以结束标签终止；
# 元素内容是开始标签与结束标签之间的内容；
# 空元素在开始标签中进行关闭（以开始标签的结束而结束）；
# 多数元素可拥有属性。

  • 比如之前写的：
<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>开始学习html，这是我的第一个页面，哈哈哈！</title>
</head>

<body>
 标题1：虽然我不会，但是我有学习的动力！
 <h2>标题2：今天我认真的学习了！</h2>
 <p>这是一个段落！</p>
</body>

</html>>
  • 以上内容包含的元素有<html>、<head>、<body>、``、<h2>、<p>六个html元素；

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

  • 元素建议使用小写，比如<a>dsd</a>，而不要写<A>sdsd</A>。

  • 对TML 元素可以设置属性；
  • 属性可以在元素中添加附加信息；
  • 属性一般描述于开始标签；
  • 属性总是以名称/值对的形式出现,比如python中的字典，有键和值，比如name="zhangsan";

  • 比如元素<a>的href 属性，表示链接的地址；
<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>开始学习html，这是我的第一个页面，哈哈哈！</title>
</head>

<body>
 <h1>标题1：虽然我不会，但是我有学习的动力！
 <h2>标题2：今天我认真的学习了！</h2>
 <p>这是一个段落！</p>
 <a rel="nofollow" href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a>
</body>

</html>>
  • 浏览器中打开如下：

HTML之元素、属性、标题、段落【笔记小结】

属性 说明
class 规定元素的类名（classname）
id 规定元素的唯一 id
style 规定元素的行内样式
title 规定元素的额外信息

  • 属性建议使用小写；
  • 使用双引号或单引号括起来；
  • 如果遇到有双引号和单引号一起用的，注意要成对用，比如name='gebi "laowang"';

  • 这个和markdown查不对，都使用h来表示；
  • 使用到<h6>标签进行定义；
  • <h1>是最大标题，依次减小，<h6>最小；

<h1>标题1（类似一级标题，个人叫法）
<h2>标题2（类似二级标题，个人叫法）</h2>
标题1（类似一级标题，个人叫法）
标题1（类似一级标题，个人叫法）


<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>标题学习</title>
</head>

<body>
 1、xx工具的使用
 <h2>1.1、xx工具的下载</h2>
 <h3>1.1.1、xx工具下载网址</h3>
 <a rel="nofollow" href="https://blog.csdn.net/NoamaNelson">点击进入我的博客链接</a>
</body>

</html>>

HTML之元素、属性、标题、段落【笔记小结】

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

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


<!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>

HTML之元素、属性、标题、段落【笔记小结】

  • 使用<!-- xxxx -->进行注释；
  • 和编程语言一样，提升代码的可阅读性，不会被浏览器显示出来。

  • <!-- 写注释的内容 -->

  • vs code直接在需要加注释的代码行使用ctrl + /即可快速进行代码注释；

HTML之元素、属性、标题、段落【笔记小结】

  • 其实就是将文档可以分为若干个段落；
  • 使用<p>段落内容</p>来表示；
  • 浏览器会自动在段落前后加空行。

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

  • 第一种：直接使用<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>

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>

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>

、HTML之元素、属性、标题、段落【笔记小结】

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

添加小工具
点此为“正文侧边栏”添加小工具