Web前端HTML+CSS全套（1~20）Web前端HTML+CSS全套（1~20）1. 什么是HTML，CSS?2. 如何使用vs code3. 浏览器4.网站开发5.web三大核心技术6. HTML的基础结构和属性7.HTML初始代码8.HTML注释9.HTML语义化10.HTML的标题与段落11. 文本修饰标签12.图片标签与图片属性13.引入文件的地址路径14.跳转链接15.跳转锚点16.特殊符号17.列表标签

87 阅读 0 评论 58 点赞

我是靠谱客的博主伶俐月光，最近开发中收集的这篇文章主要介绍Web前端HTML+CSS全套（1~20）Web前端HTML+CSS全套（1~20）1. 什么是HTML，CSS?2. 如何使用vs code3. 浏览器4.网站开发5.web三大核心技术6. HTML的基础结构和属性7.HTML初始代码8.HTML注释9.HTML语义化10.HTML的标题与段落11. 文本修饰标签12.图片标签与图片属性13.引入文件的地址路径14.跳转链接15.跳转锚点16.特殊符号17.列表标签，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Web前端HTML+CSS全套（1~20）

拨云见日

CSS基础
切图流程
PC企业站布局
PC游戏站布局

溯本求源

HTML扩展
CSS扩展
HTMLS新语法
CSS3新语法
兼容与hack

风生水起

弹性布局
网格布局
移动端布局
响应式布局（一套代码适应不同设备）
bootstrap （快速搭建网页框架）

巧夺天工

预编译CSS
postcss（工程化）
CSS架构（需求点，需求点如何配合使用）
高级功能（CSS高级用法）
CSS与JS交互

Web前端HTML+CSS

Web前端HTML+CSS全套（1~20）
1. 什么是HTML，CSS?
- - 如何写代码，写代码的环境
  - 如何写.HTML文件
  - 如何看到效果
2. 如何使用vs code
- - 学习编辑器的基本使用
  - - - 快捷键
3. 浏览器
- - 调试工具
4.网站开发
- - 深入了解网站开发
5.web三大核心技术
6. HTML的基础结构和属性
- - Web中核心语言HTML的规范:HTML5
7.HTML初始代码
8.HTML注释
9.HTML语义化
10.HTML的标题与段落
11. 文本修饰标签
12.图片标签与图片属性
13.引入文件的地址路径
14.跳转链接
15.跳转锚点
16.特殊符号
17.列表标签
- 无序列表
- 有序列表
- 定义列表

1. 什么是HTML，CSS?

HTML、CSS是网站开发的基础编程语言（一般情况下要配合使用）

HTML：结构（搭结构）（搭房子）
CSS：样式（美化）（装修）
JavaScript：行为（与用户进行交互）（安装设施）

一个网站是由多个网页组成的整体。每一个网页（详情页）就是一个.html文件。浏览器上看到的网站就是代码解析后的样子。可以通过鼠标右键选择查看源代码。

如何写代码，写代码的环境

如何写.HTML文件

直接使用文本文档（改后缀为.html即可生成一个html文件）（低效，易出问题）
使用vs code(“代码编辑器”)
下载地址：https://code.visualstudio.com/

如何看到效果

在浏览器中打开

2. 如何使用vs code

安装插件（扩展）
通过下载插件的方式拓展适用范围和便捷性（常用插件：语言包，open in browser，view in browser）

学习编辑器的基本使用

折行
设置
文件——首选项——设置中可以：设置字体大小，是否换行 word wrap
搜索

快捷键

保存：Ctrl + S
全选：Ctrl + A
剪切：Ctrl + X
复制：Ctrl + C
粘贴：Ctrl + V
撤销：Ctrl + Z
前进：Ctrl + Y
生成注释：Ctrl + /
选择相同元素的下一个：Ctrl + D
从头选中一行：Shift + end
从尾选中一行：Shift + home
快速复制一行：Shift + alt+↓
快速移动一行：Shift + ↑/↓
向后缩进：tab
向前缩进：tab + shift
创建标签：单词+tab
创建初始代码：！+tab
多光标：alt + 鼠标左

3. 浏览器

用于看HTML代码

主流浏览器是Chrome（谷歌浏览器）（chrome开发工具：F12 ）（调节页面大小：Ctrl+鼠标滚轮）
市场上常见浏览器有：IE（旧），Edge（新），火狐，Safari，Chrome，Opera等
五大浏览器的区别独特的解释语法（FireFox最接近ECMA的标准）渲染效果不同性能不一样，支持脚本的执行速度等不一样

调试工具

4.网站开发

深入了解网站开发

UI设计师（UID）
设计稿

web前端开发工程师（H5开发）
设计稿——>代码
数据库数据——>显示到页面
HTML,CSS，JavaScript

web后端开发工程师
数据存储，管理

5.web三大核心技术

–HTML：结构（搭结构）（搭房子）
–CSS：样式（美化）（装修）
–JavaScript：行为（与用户进行交互）（安装设施）

请添加图片描述

6. HTML的基础结构和属性

HTML：超文本标记语言（Hyper Text Markup Language），标准通用标记语言下的一个应用。是网页制作必备的编程语言。

超文本：文本内容+非文本内容（图片，视频，音频等）
标记（标签）：<单词>（单标签:<>　双标签:<></>）

单标签：<header>
双标签：<header>hello world</header>

创建标签的快捷键：单词+tab-><单词>（自动识别单双标签）

标签可以上下排列也可以进行组合嵌套

<header>hello
  <div>
  a1
      <div>b1</div>嵌套2
      <div>b2</div>嵌套2
      <div>b3</div>嵌套2
 </div>嵌套1
  <div>a2</div>嵌套1
  <div>a3</div>嵌套1
  <div>a4</div>嵌套1
</header>            
<footer>cccc</footer>

Web中核心语言HTML的规范:HTML5

HTML速查表 ，HTML元素表
请添加图片描述
标签的属性：用于修饰标签，设置当前标签功能

设置属性语法格式：<标签属性1=“值1” 属性2=“值2”>

<header title="hello"> world</header>
<footer title="hi">html</footer>

7.HTML初始代码

每个.html文件都需要添加初始代码
.html文件的规范写法必须添加初始代码

创建初始代码：！+tab

<!DOCTYPE html>   <!-- 文档声明：这是一个html文件 -->
<html lang="en">  <!-- lang="en"表示初始为英文网站 lang="zh-CN"表示一个中文网站 -->
    <!-- html文件的最外层标签：包裹着所有html标签代码 -->
<head>
    <meta charset="UTF-8">
    <!-- 元信息：是编写网页中的一些赋值信息 -->
    <!-- UTF-8表示使用国际编码，让网页不出现乱码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title> <!-- 设置网页标题 -->
</head><!-- 与头部相关的内容 -->
<body>
网页内容
</body>    <!-- 显示网页内容的区域 -->

</html>

手写

<!DOCTYPE html>
<html lang="zh-CN"> <!--  lang="zh-CN"表示一个中文网站 -->
<head>
    <meta charset="UTF-8">  <!-- UTF-8表示使用国际编码，让网页不出现乱码 -->
 
    <title>这是网页</title>
</head>
<body>
   手写练习
</body>
</html>

在这里插入图片描述

8.HTML注释

写法：

<!--注释的内容-->浏览器中看不到，只能在代码中看到

快捷键：

生成注释（按两次取消注释）：

Ctrl + /
Shift + alt+a

意义：

把暂时不用的代码注释起来，方便以后使用
对开发人员进行提示

9.HTML语义化

根据网页中内容的结构,选择适合的HTML标签进行编写。
HTML语义化的好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构。
有利于SEO，让搜索引擎爬虫更好的理解网页，从而获取更多的有效信息，提升网页的权重。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

10.HTML的标题与段落

HTML速查表

标题

 网页标题(双标签）：<title>这是网页</title>
 内容标题(双标签):<h1>内容标签</h1>...  <h6>内容标签</h6>

在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。h2~h6可以有多个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <title>这是网页</title>
</head>
<body>
    hello
            <h1>内容标签</h1> <!-- 一个网页中h1只能出现一次 -->
            <h2>内容标签</h2>
            <h2>内容标签</h2>
            <h2>内容标签</h2>
            <h3>内容标签</h3>
            <h3>内容标签</h3>
            <h3>内容标签</h3>
            <h4>内容标签</h4>
            <h4>内容标签</h4>
            <h4>内容标签</h4>
            <h5>内容标签</h5><!-- 在网页中不经常使用 -->
            <h5>内容标签</h5><!-- 在网页中不经常使用 -->
            <h5>内容标签</h5><!-- 在网页中不经常使用 -->
            <h6>内容标签</h6><!-- 在网页中不经常使用 -->
            <h6>内容标签</h6><!-- 在网页中不经常使用 -->
            <h6>内容标签</h6><!-- 在网页中不经常使用 -->
</body>
</html>

段落

段落（双标签）：<p>具体段落内容</p>

查看源代码 调试工具

标题，段落练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链锯人（藤本树著作的漫画作品）_百度百科</title>
</head>
<body>
    <h1>链锯人</h1>
    <h2>藤本树著作的漫画作品</h2>
    <p>《链锯人》是作者藤本树著作的漫画作品，第1部于2018年12月3日在《周刊少年JUMP》上连载 [1-2]  ，于2020年12月宣布完结。
        第2部于2022年7月13日在《少年JUMP+》上连载。</p>
    <p> 漫画单行本由集英社出版，繁体中文版由东立出版社发行，中国大陆电子版由哔哩哔哩漫画发布</p>
    <h2>设定</h2>
    <p>故事发生在一个与现代社会相近，但充斥着被称为“恶魔”的怪物横行的世界。
        恶魔是带着动植物、概念等所有事物的名称而诞生，超越人类智慧的怪物。
        人们认为该名称越是恐怖，恶魔的力量就越大。恶魔可以透过补充人类的血液维持力量和治愈伤势。
        占据人类尸体的恶魔称为“魔人”，虽有人类的外貌，但人格是恶魔，仅有少数可保持理性的特例。
        恶魔猎人是指与恶魔缔结契约，以消灭恶魔为业的人，包括政府辖下的“公安对魔特异课”和民间的恶魔猎人。</p>

</body>
</html>

11. 文本修饰标签

HTML速查表

强调（双标签）：<strong>加粗强调</strong><!-- 表示强调，会对文本进行加粗 -->
               <em>斜体强调</em><!-- 表示强调，会对文本进行斜体 -->
              

               **区别**：
               1. 写法与展示效果有区别，strong加粗，em斜体
               2. strong的强调性更强

下标文本：<sub></sub>
上标文本：<sup></sup>

示例：勾股定理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>a<sup>2</sup>+b <sup>2</sup>=c <sup>2</sup></p>
    <p>H<sub>2</sub>O</p>
</body>
</html>

效果：

 删除的文本：<del></del>
 插入的文本：<ins></ins>

示例：打折

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>原价<del>300</del>,现价<ins>100</ins></p>
</body>
</html>

效果：

文本修饰练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p> <strong>《链锯人》</strong> 是作者<em>藤本树</em>著作的漫画作品 <del> 于2020年11月宣布完结</del>
        <ins>于2020年12月宣布完结</ins> 。</p>
        <p>チェンソーマン <sup>原版名称</sup>
    地    区 <sub>日本</sub> </p>
        
</body>
</html>

12.图片标签与图片属性

添加图片标签：img+tab

图片标签（单标签）：<img src="" alt="">

src：引入图片地址
alt：当图片出现问题，可以显示一段友好的提示文字（没有问题时不显示）
title：提示信息
width，height：图片大小（无论图片有没有加载好，图片上下的段落位置不发生改变）（可以用谷歌浏览器调试器Network调节网速体验区别）

添加图片练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="https://c-ssl.duitang.com/uploads/blog/202107/09/20210709180439_778cc.jpg" alt="问题提示文字：电锯人-雷赛"title="电锯人-雷赛"width="30" height="36">
    <p>雷赛</p>
</body>
</html>

设置图片大小时注意是width=不是~~width ：~~

13.引入文件的地址路径

地址：

相对路径（相当于某一个文件进行引入）
绝对路径

**相对路径**：
.在路径中表示当前路径
..在路径中表示上一路径

相对路径的引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="./20200408234249_ofmki.jpg" alt="问题提示：帕瓦"title=“帕瓦” width="30" height="36">
    <p>帕瓦</p>
</body>
</html>

当前文件的内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="./电锯人/20200408234249_ofmki.jpg" alt="问题提示：帕瓦"title=“帕瓦” width=" 30 " height=" 36 ">
    <p>帕瓦</p>
</body>
</html>

请添加图片描述

当前文件外部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="../电锯人/20200408234249_ofmki.jpg" alt="问题提示：帕瓦"title=“帕瓦” width=" 30 " height=" 36 ">
    <p>帕瓦</p>
</body>
</html>

请添加图片描述

**绝对路径**：
不会参照某个参照物进行引入
无论当前文件在那个文件夹都能找到
例如："E:22230311电锯人20200408234249_ofmki.jpg"

绝对路径的引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="E:22230311电锯人20200408234249_ofmki.jpg"alt="问题提示：帕瓦"title=“帕瓦” width=" 30 " height=" 36 ">
    <p>帕瓦</p>
</body>
</html>

盘符可以不用写

目前学习推荐使用相对路径
E:/22230311/电锯人/20200408234249_ofmki.jpg->
E:22230311电锯人20200408234249_ofmki.jpg斜线可以改成反斜线（计算机内部），但养成写斜线的习惯因为网络地址只能用斜线。

14.跳转链接

链接标签（双标签）：<a></a>
base（单标签）：

href属性：链接的地址 target属性：可以改变链接打开方式，
默认情况下：在当前页面打开-self ，新窗口打开-blank
如何默认打开新窗口：base（单标签）一般加在head里

示例：原窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索：电锯人</title>
</head>
<body>
    <a href="https://baike.baidu.com/item/%E7%94%B5%E9%94%AF%E4%BA%BA/54625036"target="_blank">电锯人</a> <!-- 在新窗口打开  -->
    <a href="https://baike.baidu.com/item/%E5%B8%95%E7%93%A6/24304218">
 <img src="E:22230311电锯人20200408234249_ofmki.jpg"alt="问题提示：帕瓦"title=“帕瓦” width=" 300 " height=" 360 "> 
    </a><!-- 默认在原窗口打开  -->
</body>
</html>

新窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索：电锯人</title>
    <base target="_blank">  <!-- 默认打开新窗口  -->
</head>
<body>
    <a href="https://baike.baidu.com/item/%E7%94%B5%E9%94%AF%E4%BA%BA/54625036">电锯人</a>
    <a href="https://baike.baidu.com/item/%E5%B8%95%E7%93%A6/24304218">
        <img src="E:22230311电锯人20200408234249_ofmki.jpg"alt="问题提示：帕瓦"title=“帕瓦” width=" 300 " height=" 360 ">
    </a>
</body>
</html>

练习
首页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./html/列表页.html">列表页</a>
    <img src="./电锯人图片/电次.jpg" alt="图片没了">
</body>
</html>

列表页：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./详情页.html">详情页</a>
   <img src="../电锯人图片/雷赛.jpg" alt="图片没了">
</body>
</html>

详情页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="../首页.html">首页</a>
    <img src="../电锯人图片/帕瓦.jpg" alt="图片没了">
</body>
</html>

15.跳转锚点

跳转页面：跳转到另一个页面
跳转锚点：同一个页面内进行跳转

实现方式：

实现1：（#号与id映射，形成对应关系）
#号
id属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#电次">电次</a>
    <a href="#雷赛">雷赛</a>
    <a href="#帕瓦">帕瓦</a>
<h2 id=“电次”>电次</h2>
<p>父母欠债离世，为了替父母偿还债务一直为黑帮工作，与电锯恶魔波奇塔共同生活和与恶魔战斗，而后黑帮被丧尸恶魔操控，电次被其引导诱杀。
    电锯恶魔波奇塔为救电次，自愿成为电次的心脏，而后复活。
   </p>
   <p> 被玛奇玛收养，此后成为公安恶魔猎人，为了追求各种各样平凡的目标而奋斗。</p>
<h2 id=“雷赛”>雷赛</h2>
<p>咖啡店服务员，苏联的“豚鼠”（即小时候被苏联秘密幽禁的秘密武器），炸弹恶魔，恶魔名波姆。
    黑发碧眼，遇见电次时脸上时常挂着红晕。</p>
    <p>戴着带有拉环的项圈，拉下拉环时能够变身为恶魔。</p>
    <p>为获得链锯恶魔的心脏而与电次交往，但逐渐爱上了电次，与电次的战斗令链锯恶魔的影像公之于众。
        在与电次赴约的路上被玛奇玛和天使恶魔袭击并被支配。</p>
<h2 id="帕瓦">帕瓦</h2>
<p>东京公安对魔特异4课的恶魔猎人，“血之恶魔”的魔人，电次的搭档。
    自称“本大爷”，头上长有恶魔之角，眼中有十字。喜欢血与猫，讨厌说谎，自称猫是唯一的友人。</p>
    <p>擅长使用血液战斗，但容易暴走。</p>
    <p>向电次承诺如果能夺回被恶魔掳走的猫，就给他揉胸。</p>
</body>
</html>

实现2：
#号
name属性（加给a标签，不写在h2里)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#电次">电次</a>
    <a href="#雷赛">雷赛</a>
    <a href="#帕瓦">帕瓦</a>
    <a name="电次"></a>
<h2 >电次</h2>
<p>父母欠债离世，为了替父母偿还债务一直为黑帮工作，与电锯恶魔波奇塔共同生活和与恶魔战斗，而后黑帮被丧尸恶魔操控，电次被其引导诱杀。
    电锯恶魔波奇塔为救电次，自愿成为电次的心脏，而后复活。
   </p>
   <p> 被玛奇玛收养，此后成为公安恶魔猎人，为了追求各种各样平凡的目标而奋斗。</p>
   <a name="雷赛"></a>
<h2 >雷赛</h2>
<p>咖啡店服务员，苏联的“豚鼠”（即小时候被苏联秘密幽禁的秘密武器），炸弹恶魔，恶魔名波姆。
    黑发碧眼，遇见电次时脸上时常挂着红晕。</p>
    <p>戴着带有拉环的项圈，拉下拉环时能够变身为恶魔。</p>
    <p>为获得链锯恶魔的心脏而与电次交往，但逐渐爱上了电次，与电次的战斗令链锯恶魔的影像公之于众。
        在与电次赴约的路上被玛奇玛和天使恶魔袭击并被支配。</p>
        <a name="帕瓦"></a>
<h2 >帕瓦</h2>
<p>东京公安对魔特异4课的恶魔猎人，“血之恶魔”的魔人，电次的搭档。
    自称“本大爷”，头上长有恶魔之角，眼中有十字。喜欢血与猫，讨厌说谎，自称猫是唯一的友人。</p>
    <p>擅长使用血液战斗，但容易暴走。</p>
    <p>向电次承诺如果能夺回被恶魔掳走的猫，就给他揉胸。</p>
</body>
</html>

16.特殊符号

编写一些文档时，经常会遇到输入法无法输入的字符，如（注册商标）、（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空白的字符都是特殊符号，在HTML中，为这些特殊字符准备了专门的代码。
请添加图片描述

1.&+字符
2.解决冲突左右尖括号、添加多个空格的实现
3.&lt：< ， &gt：>

17.列表标签

无序列表

<ul>：列表最外层容器
<li>: 列表项

注：
ul和li必须是组合出现，他们之间不允许有其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
</ul><!-- 正确的写法 -->

<ul>
    <p></p><!-- 错误 -->
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
</ul><!-- 错误的写法 -->

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小目标</title>
</head>
<body>
    <h1>
        <strong>小目标</strong>
    </h1>
    <ul><!-- 无序标签 -->
        <li> <a href="#"> <ins>先挣一个亿</ins></a> </li><!-- 下划线 -->
        <li> <a href="#"><em>再挣两个亿</em></a> </li><!-- 斜体 -->
        <li> <a href="#"><strong>躺平当咸鱼</strong></a></li><!-- 加粗强调 -->
    </ul><!-- 正确的写法 -->
    
</body>
</html>

有序列表

<ol>：列表最外层容器
<li>: 列表项

注：
ol和li必须是组合出现，他们之间不允许有其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）
注：
有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小目标</title>
</head>
<body>
    <h1>
        <strong>小目标</strong>
    </h1>
    <ol><!-- 有序标签 -->
        <li> <a href="#"> <ins>先挣一个亿</ins></a> </li><!-- 下划线 -->
        <li> <a href="#"><em>再挣两个亿</em></a> </li><!-- 斜体 -->
        <li> <a href="#"><strong>躺平当咸鱼</strong></a></li><!-- 加粗强调 -->
    </ol><!-- 正确的写法 -->
    
</body>
</html>

定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

定义列表：列表项需要添加标题进行描述的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小目标</title>
</head>
<body>
    <h1>
        <strong>小目标</strong>
    </h1>
 <dl>
    <dt>目标1</dt>
<dd>先挣一个亿</dd>
<dt>目标2</dt>
<dd>再挣两个亿</dd>
<dt>目标3</dt>
<dd>躺平当咸鱼</dd>
 </dl>
    
</body>
</html>

最后

以上就是伶俐月光为你收集整理的Web前端HTML+CSS全套（1~20）Web前端HTML+CSS全套（1~20）1. 什么是HTML，CSS?2. 如何使用vs code3. 浏览器4.网站开发5.web三大核心技术6. HTML的基础结构和属性7.HTML初始代码8.HTML注释9.HTML语义化10.HTML的标题与段落11. 文本修饰标签12.图片标签与图片属性13.引入文件的地址路径14.跳转链接15.跳转锚点16.特殊符号17.列表标签的全部内容，希望文章能够帮你解决Web前端HTML+CSS全套（1~20）Web前端HTML+CSS全套（1~20）1. 什么是HTML，CSS?2. 如何使用vs code3. 浏览器4.网站开发5.web三大核心技术6. HTML的基础结构和属性7.HTML初始代码8.HTML注释9.HTML语义化10.HTML的标题与段落11. 文本修饰标签12.图片标签与图片属性13.引入文件的地址路径14.跳转链接15.跳转锚点16.特殊符号17.列表标签所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：87 次浏览
发布日期：2023-12-15 02:40:04
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_fw_13_j_6_x.html

Web前端HTML+CSS全套（1~20）Web前端HTML+CSS全套（1~20）1. 什么是HTML，CSS?2. 如何使用vs code3. 浏览器4.网站开发5.web三大核心技术6. HTML的基础结构和属性7.HTML初始代码8.HTML注释9.HTML语义化10.HTML的标题与段落11. 文本修饰标签12.图片标签与图片属性13.引入文件的地址路径14.跳转链接15.跳转锚点16.特殊符号17.列表标签

概述

Web前端HTML+CSS全套（1~20）

Web前端HTML+CSS

1. 什么是HTML，CSS?

如何写代码，写代码的环境

如何写.HTML文件

如何看到效果

2. 如何使用vs code

学习编辑器的基本使用

快捷键

3. 浏览器

调试工具

4.网站开发

深入了解网站开发

5.web三大核心技术

6. HTML的基础结构和属性

Web中核心语言HTML的规范:HTML5

7.HTML初始代码

8.HTML注释

9.HTML语义化

10.HTML的标题与段落

11. 文本修饰标签

12.图片标签与图片属性

13.引入文件的地址路径

14.跳转链接

15.跳转锚点

16.特殊符号

17.列表标签

无序列表

有序列表

定义列表

最后

评论列表共有 0 条评论

发表评论取消回复

概述

Web前端HTML+CSS全套（1~20）

Web前端HTML+CSS

1. 什么是HTML，CSS?

如何写代码，写代码的环境

如何写.HTML文件

如何看到效果

2. 如何使用vs code

学习编辑器的基本使用

快捷键

3. 浏览器

调试工具

4.网站开发

深入了解网站开发

5.web三大核心技术

6. HTML的基础结构和属性

Web中核心语言HTML的规范:HTML5

7.HTML初始代码

8.HTML注释

9.HTML语义化

10.HTML的标题与段落

11. 文本修饰标签

12.图片标签与图片属性

13.引入文件的地址路径

14.跳转链接

15.跳转锚点

16.特殊符号

17.列表标签

无序列表

有序列表

定义列表

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复