devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML&CSS学习总结_html和css总结

作者：很楠不爱3 | 2024-03-24 03:03:03

赞

踩

html和css总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

前言

一、HTML学习总结

1、HTML简介

2、HTML标题

3、HTML文本格式

4、HTML超链接

5、HTML图片及文件路径

6、HTML表格

7、HTML列表

8、HTML表单

二、CSS学习总结

1、 选择器：

2. 盒子模型：

3. 布局：

4.  CSS属性

总结

前言

           本文章中代码都使用VScode编辑而成

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML学习总结

1、HTML简介

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

2、HTML标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

实例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>小吕教程</title>
  6. </head>
  7. <body>
  8.  
  9. <h1>这是标题 1</h1>
  10. <h2>这是标题 2</h2>
  11. <h3>这是标题 3</h3>
  12. <h4>这是标题 4</h4>
  13. <h5>这是标题 5</h5>
  14. <h6>这是标题 6</h6>
  15.  
  16. </body>
  17. </html>

 代码运行效果示意图：

标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>小吕教程</title>
  6. </head>
  7. <body>
  8. 	<p>hr 标签定义水平线：</p>
  9. 	<hr />
  10. 	<p>这是段落。</p>
  11. 	<hr />
  12. 	<p>这是段落。</p>
  13. 	<hr />
  14. 	<p>这是段落。</p>
  15. </body>
  16. </html>

  代码运行效果示意图：

3、HTML文本格式

HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签

主要HTML 文本格式化标签

标签描述
<mark>可以使用该标签突出显示文本
<del>可以使用该标签显示为删除文本
<s>可以使用该标签显示为不再准确文本
<ins>可以使用该标签使文本表示对文档的补充
<u>可以使用该标签使文本显示为下划线
<small>定义小号字
<strong>定义加重语气
<em>定义

实例 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>小吕教程</title>
  6. </head>
  7. <body>
  8. 	<p>You can use the mark tag to <mark>highlight</mark> text.</p>
  9. <p><del>This line of text is meant to be treated as deleted text.</del></p>
  10. <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  11. <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  12. <p><u>This line of text will render as underlined</u></p>
  13. <p><small>This line of text is meant to be treated as fine print.</small></p>
  14. <p><strong>This line rendered as bold text.</strong></p>
  15. <p><em>This line rendered as italicized text.</em></p>
  16. </body>
  17. </html>

代码运行效果示意图：

4、HTML超链接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。HTML 链接语法

  • 链接的 HTML 代码很简单。它类似这样：

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">链接文本</a>

 href 属性描述了链接的目标。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示，下面的这行会在新窗口打开文档

实例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>小吕教程</title> 
  6. </head>
  7. <body>
  8.  
  9. <a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
  10.  
  11. <p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>
  12.  
  13. </body>
  14. </html>

代码运行效果示意图：

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

  1. <a href="https://www.runoob.com/html/html-links.html#tips">
  2. 访问有用的提示部分</a>

5、HTML图片及文件路径

定义图像的语法是：

<img src="url" alt="some_text" width='XXX' height='xxx'>

 URL 指存储图像的位置。alt 属性用来为图像定义一串预备的可替换的文本。height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

例子解释
<img src="photos1.jpg">该图片文件与当前文档在同一目录中
<img src="./images/photos1.jpg">该图片文件在当前目录下的images目录中
<img src="../photos1.jpg">该图片位于在上一级目录中
<img src="/photos1.jpg">该图片在网站根目录中

 提示：Vscode中可以选择该文件右键复制该文件路径

6、HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

7、HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

  1. <ul>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. </ul>

 代码运行效果示意图：

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

  1. <ol>
  2.   <li>Coffee</li>
  3.   <li>Tea</li>
  4.   <li>Milk</li>
  5. </ol>

代码运行示意图： 

8、HTML表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>小吕教程</title> 
  6. </head>
  7. <body>
  8. <form>
  9.   <!-- 文本框，注意有 placeholder 提示符 -->
  10.   用户名：<br>
  11.   <input type="text" name="name" placeholder="请输入用户名" required><br>
  12.   <!-- 密码框 -->
  13.   密码：<br>
  14.   <input type="password" name="ps" placeholder="请输入密码" required><br>
  15.   年龄：<br>
  16.   <!-- 数字输入框，注意 min 和 value 属性-->
  17.   <input type="number" name="age" min="18" value="18"><br>
  18.   <!-- 单选按钮, 注意 checked 属性 -->
  19.   性别：<br>
  20.   <input type="radio" name="gender" value="male" checked> 男<br>
  21.   <input type="radio" name="gender" value="female"> 女<br>
  22.   <input type="radio" name="gender" value="other"> 其它<br>
  23.   <!-- 下拉列表，注意 selected 属性 -->
  24.   党派：<br>
  25.   <select name="party">
  26.     <option value="D">民主党</option>
  27.     <option value="R" selected>共和党</option>
  28.     <option value="N">无党派</option>
  29.   </select><br>
  30.   <!-- 多选框 -->
  31.   您有哪些交通工具：<br>
  32.   <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  33.   <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  34.   <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  35.   <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  36.   <!-- 日期选择器 -->
  37.   您的工作日期：<br>
  38.   <input type="date"><br>
  39.   <!-- 文件选择器 -->
  40.   上传您的照片:<br>
  41.   <input type="file" name="photo"><br>
  42.   <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  43.   您的建议：<br>
  44.   <textarea name="message" rows="5" cols="30">
  45.     The cat was playing in the garden.
  46.   </textarea><br><hr>
  47.   <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  48.   <input type="submit" value="提 交">
  49.   <input type="reset" value="重 置">
  50. </form>
  51. </body>
  52. </html>

代码运行示意图：

二、CSS学习总结

CSS（层叠样式表）是一种用于网页设计的语言，它可以控制网页的布局、字体、颜色、背景、边框、大小等多方面的样式。以下是CSS学习的一些知识点总结：


1、 选择器：

为了给HTML元素应用样式，需要使用CSS选择器来选中这些元素。常见的选择器包括标签选择器、类选择器、ID选择器、后代选择器等。

 -标签选择器：

选择所有指定标签的HTML元素

  1.  
  2. p {
  3.      color: red;
  4.    }
  5.    

   
-类选择器：

选择所有具有指定类名的HTML元素

  1.    .example {
  2.      font-size: 14px;
  3.    }

   
- ID选择器：

选择具有指定ID的HTML元素

  1. #para1
  2. {
  3.     text-align:center;
  4.     color:red;
  5. }


- 后代选择器：

选择所有后代元素，例如选择`<div>`标签下的所有`<p>`元素。

  1. div p {
  2.      font-family: Arial;
  3.    }

2. 盒子模型：

所有HTML元素都可以看作是一个矩形的盒子。CSS盒子模型通过四个部分来描述HTML元素：内容(content)、内边距(padding)、边框(border)和外边距(margin)。可以通过CSS样式来控制盒子的大小、边框样式、内边距和外边距等属性。以下是每个部分的解释。

- 内容(content)：HTML元素的真正内容。
- 内边距(padding)：内容和边框之间的空白区域。
- 边框(border)：内边距和外边距之间的区域。
- 外边距(margin)：元素以外的空白区域。

以下是一个盒子模型的示例：

3. 布局：

CSS可以使用不同的布局方式来控制网页的外观，如使用float、position、display属性等。网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo；

菜单导航条包含了一些链接，可以引导用户浏览其他页面；

内容区域一般有三种形式:

  • 1 列：一般用于移动端
  • 2 列：一般用于平板设备
  • 3 列：一般用于 PC 桌面设备

底部区域在网页的最下方，一般包含版权信息和联系方式等。

以下是一些基本的布局技巧：
- position属性：用于设置元素的定位方式。其中有三种值可选，分别为'static'(默认属性)、'relative'和'absolute'。

  1. div {
  2.      position: relative;
  3.      left: 50px;
  4.      top: 50px;
  5.    }

- float属性：用于控制元素的浮动方式，可以让元素脱离流动布局，实现多列布局和横向菜单等效果。

  1. .left {
  2.      float: left;
  3.      width: 150px;
  4.    }
  5.  
  6.    .right {
  7.      float: right;
  8.      width: 150px;
  9.    }

- display属性：用于设置元素的显示方式，可以控制元素以块级元素、行内元素或表格元素的方式展示。

  1.   .block {
  2.      display: block;
  3.    }
  4.    
  5.    .inline {
  6.      display: inline;
  7.    }
  8.    
  9.    .table {
  10.      display: table;
  11.    }

创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>小吕教程</title>
  6. <style>
  7. * {
  8.   box-sizing: border-box;
  9. }
  10.  
  11. body {
  12.   font-family: Arial;
  13.   padding: 10px;
  14.   background: #f1f1f1;
  15. }
  16.  
  17. /* 头部标题 */
  18. .header {
  19.   padding: 30px;
  20.   text-align: center;
  21.   background: white;
  22. }
  23.  
  24. .header h1 {
  25.   font-size: 50px;
  26. }
  27.  
  28. /* 导航条 */
  29. .topnav {
  30.   overflow: hidden;
  31.   background-color: #333;
  32. }
  33.  
  34. /* 导航条链接 */
  35. .topnav a {
  36.   float: left;
  37.   display: block;
  38.   color: #f2f2f2;
  39.   text-align: center;
  40.   padding: 14px 16px;
  41.   text-decoration: none;
  42. }
  43.  
  44. /* 链接颜色修改 */
  45. .topnav a:hover {
  46.   background-color: #ddd;
  47.   color: black;
  48. }
  49.  
  50. /* 创建两列 */
  51. /* Left column */
  52. .leftcolumn {   
  53.   float: left;
  54.   width: 75%;
  55. }
  56.  
  57. /* 右侧栏 */
  58. .rightcolumn {
  59.   float: left;
  60.   width: 25%;
  61.   background-color: #f1f1f1;
  62.   padding-left: 20px;
  63. }
  64.  
  65. /* 图像部分 */
  66. .fakeimg {
  67.   background-color: #aaa;
  68.   width: 100%;
  69.   padding: 20px;
  70. }
  71.  
  72. /* 文章卡片效果 */
  73. .card {
  74.   background-color: white;
  75.   padding: 20px;
  76.   margin-top: 20px;
  77. }
  78.  
  79. /* 列后面清除浮动 */
  80. .row:after {
  81.   content: "";
  82.   display: table;
  83.   clear: both;
  84. }
  85.  
  86. /* 底部 */
  87. .footer {
  88.   padding: 20px;
  89.   text-align: center;
  90.   background: #ddd;
  91.   margin-top: 20px;
  92. }
  93.  
  94. /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
  95. @media screen and (max-width: 800px) {
  96.   .leftcolumn, .rightcolumn {   
  97.     width: 100%;
  98.     padding: 0;
  99.   }
  100. }
  101.  
  102. /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
  103. @media screen and (max-width: 400px) {
  104.   .topnav a {
  105.     float: none;
  106.     width: 100%;
  107.   }
  108. }
  109. </style>
  110. </head>
  111. <body>
  112.  
  113. <div class="header">
  114.   <h1>我的网页</h1>
  115.   <p>重置浏览器大小查看效果。</p>
  116. </div>
  117.  
  118. <div class="topnav">
  119.   <a href="#">链接</a>
  120.   <a href="#">链接</a>
  121.   <a href="#">链接</a>
  122.   <a href="#" style="float:right">链接</a>
  123. </div>
  124.  
  125. <div class="row">
  126.   <div class="leftcolumn">
  127.     <div class="card">
  128.       <h2>文章标题</h2>
  129.       <h5>2019 年 4 月 17日</h5>
  130.       <div class="fakeimg" style="height:200px;">图片</div>
  131.       <p>一些文本...</p>
  132.       <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
  133.     </div>
  134.     <div class="card">
  135.       <h2>文章标题</h2>
  136.       <h5>2019 年 4 月 17日</h5>
  137.       <div class="fakeimg" style="height:200px;">图片</div>
  138.       <p>一些文本...</p>
  139.       <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
  140.     </div>
  141.   </div>
  142.   <div class="rightcolumn">
  143.     <div class="card">
  144.       <h2>关于我</h2>
  145.       <div class="fakeimg" style="height:100px;">图片</div>
  146.       <p>关于我的一些信息..</p>
  147.     </div>
  148.     <div class="card">
  149.       <h3>热门文章</h3>
  150.       <div class="fakeimg"><p>图片</p></div>
  151.       <div class="fakeimg"><p>图片</p></div>
  152.       <div class="fakeimg"><p>图片</p></div>
  153.     </div>
  154.     <div class="card">
  155.       <h3>关注我</h3>
  156.       <p>一些文本...</p>
  157.     </div>
  158.   </div>
  159. </div>
  160.  
  161. <div class="footer">
  162.   <h2>底部区域</h2>
  163. </div>
  164.  
  165. </body>
  166. </html>

常见的布局方式有流式布局、固定布局、响应式布局等。

4.  CSS属性

CSS属性用于定义HTML元素的样式。以下是一些基本的CSS属性：
- background-color：用于设置背景颜色。

  1. body {
  2.      background-color: #FFFFFF;
  3.    }

- color：用于设置文本颜色。

  1.    h1, h2, h3 {
  2.      color: red;
  3.    }

- font-size：用于设置字体大小。

  1.    p {
  2.      font-size: 16px;
  3.    }
  4.

- font-family：用于设置字体样式。

  1. body {
  2.      font-family: Arial, sans-serif;
  3.    }

- width和height：用于设置元素的宽度和高度。

总结

这些是HTML、CSS学习的基础知识，理解并掌握这些内容可以帮助你实现更好的网页设计。对于该文章是对HTML和CSS的个人学习总结，仅供参考。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/299444
推荐阅读