前端Web开发基础知识

HTML定义

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

什么是 HTML?

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

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

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签 ，第二个标签是结束标签
开始和结束标签也被称为开放标签 和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

标签的语法

标签成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
◆ 双标签：成对出现的标签
◆ 单标签：只有开始标签，没有结束标签

HTML 基本骨架

html:整个网页

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如CSS
body：网页主体，用来存放给用户看的信息，例如图片、文字

VS Code 快速生成骨架：
在 HTML 文件（ .html ）中， !（英文）配合 Enter / Tab 键

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

标签的关系

作用：明确标签的书写位置；让代码格式更整齐
⚫ 父子关系（嵌套关系）

⚫ 兄弟关系（并列关系）

⚫ * 代码格式
⚫ 父子关系：子级标签换行且缩进（Tab键）
⚫ 兄弟关系：兄弟标签换行要对齐

注释

注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。

在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己代码进行修改。学习和工作中，关键代码都要加注释

注释标签用来在源文档中插入注释，注释不会在浏览器中显示。

在VS Code 中，添加/删除注释的快捷键:Ctrl +/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是文字，能看见吗？ -->
</body>
</html>

注释是不会显示再网页内容中的

标题标签

---般用在新闻标题、文章标题、网页区域名称、产品名称等等。

列如：

标题标签

标签名：h1 ~ h6（双标签）

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
一级标题

二级标题

三级标题

四级标题

五级标题

六级标题
</body> </html>

h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo

h2 ~ h6 没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

例如：

标签的语法：

标签名：p（双标签）

显示特点：

独占一行
段落之间存在间隙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
杰西卡·霍兰德（蒂尔达·斯文顿TildaSwinton饰）是旅居哥伦比亚的欧洲人，她来到波哥大看望她生病的姐姐（艾格尼丝·布雷克AgnesBrekke饰）。因为总是听到奇怪的巨响，于是她试图去找寻幻听的根源，并由此开始了一场由幻想、偶遇与重逢组成的，与记忆和历史产生回响的旅程。

杰西卡·霍兰德（蒂尔达·斯文顿TildaSwinton饰）是旅居哥伦比亚的欧洲人，她来到波哥大看望她生病的姐姐（艾格尼丝·布雷克AgnesBrekke饰）。因为总是听到奇怪的巨响，于是她试图去找寻幻听的根源，并由此开始了一场由幻想、偶遇与重逢组成的，与记忆和历史产生回响的旅程。
</body> </html>

换行与水平线标签

换行：<br>（单标签）

水平线：<hr> (单标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是第一行内容
    <br>
    这是第二行内容
    <hr>    
</body>
</html>

文本格式化标签

作用：为文本添加特殊格式，以突出重点 。常见的文本格式：加粗、倾斜、++下划线++ 、删除线等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>strong加粗效果</strong>  
    <b>b的加粗效果</b>
    <br>
    <em>em的倾斜</em>
    <i>i的倾斜</i>
    <br>
    <ins>ins下划线</ins>
    <u>u下划线</u>
    <br>
    <del>del的删除线</del>
    <s>s的删除线</s>
</body>
</html>

图像标签

作用：在网页中插入图片

语法：

<img src="图片的 URL">

src用于指定图像的位置和名称，是 <img> 的必须属性。

例如：

在了解图片标签之前我们必须先了解以下路径：

路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件

相对路径 -从当前文件位置出发查找目标文件

⚫ / 表示进入某个文件夹里面

⚫ . 表示当前文件所在文件夹

⚫ .. 表示当前文件的上一级文件夹

绝对路径 -从盘符出发查找目标文件

图像标签-属性

属性名="属性值"

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="D:\图片\图片\背景.jpg" width="500">  <!--绝对路径，通过电脑的盘符可以找到-->
    <img src="./相对路径/images/image.png" width="500"> <!--相对路径-->>
</body>
</html>

超链接标签

作用：点击跳转到其他页面。

语法：

href 属性值是跳转地址，是超链接的必须属性。超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--超链接是双标签a-->
    <a href="https://www.baidu.com/index.htm">点击跳转百度</a>
    <br>
    <!--跳转到本地-->
    <!--target="_blank"新窗口跳转页面,原窗口不会消失-->
    <a href="./09-图像标签.html" target="_blank">点击跳转到图片</a>

    <!--开发初期，不知道超链接的跳转地址，href属性值写#,表示空连接，不会跳转-->
    <a href="#">空链接</a>

</body>
</html>

音频标签

语法

常见属性

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

视频标签

语法

常见属性

【综合案例一 ---- 个人简介】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
</head>
<body>
    <h1>雷军</h1>
    <hr>
    <p>雷军，1969年12月16日出生于湖北省仙桃市剅河镇赵湾村四组，<a href="https://baike.baidu.com/item/%E5%B0%8F%E7%B1%B3%E7%A7%91%E6%8A%80%EF%BC%88%E6%AD%A6%E6%B1%89%EF%BC%89%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/22131387?fr=ge_ala " target="_blank">小米科技有限责任公司</a> 创始人、董事长、
        首席执行官（CEO） ，中华人民共和国第十二、十三、十四届全国人民代表大会代表，中国民间商会副会长。</p>
    <img src="https://bkimg.cdn.bcebos.com/pic/8718367adab44aed2e73194fd7449001a18b87d64d5d?x-bce-process=image/format,f_auto/quality,Q_70/resize,m_lfit,limit_1,w_536" width="200" >
    <h2>学习经历</h2>
    <p>雷军于1991年毕业于<strong>武汉大学</strong> ，后被分配到北京航天部某研究所工作。1992年1月，加盟金山软件公司，8月，任金山公司北京开发部经理。1994年，任北京金山软件公司总经理 。1996年11月，带领团队开发WPS 97，为金山制定新战术，先后推出了金山影霸、金山词霸、游戏《剑侠情缘》等产品，解决了生存危机 。1998年，出任金山首席执行官（CEO）。2000年底，任北京金山软件股份有限公司总裁 [11]。2007年12月，卸任金山软件首席执行官 ，投身天使投资行业。2010年4月6日，创立<a href="https://ir.mi.com/zh-hans/corporate-information/company-profile?eqid=82c78aa2001499320000000264662346&mobile=1 " target="_blank">小米公司</a>  。2011年7月，时隔三年半后重回金山，出任金山软件有限公司董事长 。2015年4月起，任金山云控股有限公司董事长。2016年5月17日，接手小米手机部，负责手机业务并大规模调整组织架构 。2019年5月17日，兼任中国区总裁，全面负责中国区业务开展和团队管理。2021年3月30日，任小米智能电动汽车业务首席执行官。</p>
    <h3>主要成就</h3>
    <p>雷军于2013年12月获评为中国经济年度人物。2014年2月，入选中国互联网年度人物。<ins>2018年，入选改革开放40年百名杰出民营企业家。2020年，当选北京市劳动模范。2021年，入选《福布斯》中国最佳CEO（第一名）。2022年，入选《财富》中国最具影响力的50位商界领袖。</ins>
    </p>
</body>
</html>

列表标签

HTML 列表

HTML 支持有序、无序和定义列表:

HTML 列表

|----------------------------------------|----------------------------|
| 有序列表 1. 第一个列表项 2. 第二个列表项 3. 第三个列表项 | 无序列表 * 列表项 * 列表项 * 列表项 |

无序列表

作用:布局排列整齐的不需要规定顺序的区域。

标签:ul嵌套li, u是无序列表，li是列表条目。

标签里面只能包裹li标签

li标签里面可以包裹任何内容

有序列表

作用:布局排列整齐的需要规定顺序的区域。

标签:ol嵌套li,ol是有序列表，li是列表条目。

ol标签里面只能包裹li标签

li标签里面可以包裹任何内容

定义列表

标签:dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。

例如：

dl里面只能包含dt和dd

dt和dd里面可必包含任何内容

表格标签

标签：table嵌套 tr,tr嵌套 td / th

提示:在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息

合并单元格的步骤：

1.明确合并的目标

2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

--跨行合并，保留最上单元格，添加属性是rowspan

--跨列合并，保留最左单元格，添加属性colspan

3.删除其他单元格

表单标签

作用：收集用户信息。

使用场景：
登录页面

注册页面

搜索区域

例如：

input标签

input标签type属性值不同，则功能不同。

语法：<input type="....">

input占位文本

占位文本：提示信息

<input type = "..." placeholder="提示信息">

文本框和密码框都可以使用

radio单选框

常见属性

file上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple属性可以实现文件多选功能。

checkbox多选框

多选框也叫复选框

默认选中：checked.

下拉菜单

标签: select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。

文本域标签

作用：多行输入文本的表单控件

例如：发QQ空间，发微博等

标签：textarea,双标签

label标签

作用：网页中，某个标签的说明文本。

用label标签绑定文字和表单的空间关系，增大表单控件的点击范围。

写法一：

label标签只包裹内容，不包裹表单控件

设置label标签的for属性值和表单控件的id属性值相同

写法二：

使用label标签包裹文字和表单控件，不需要属性

提示:支持label标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮标签

语法

type属性值

网页布局标签

作用：布局网页（划分网页区域,摆放内容）

标签：

div:独占一行

span:不换行

字符实体

作用：在网页中显示预留字符。

综合案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
    <ul>
        <li>
            <img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2024/5/1/1714530694127_16.jpg" alt="" height="250">
            <h3>长春亚泰坐镇主场迎战升班马深圳新鹏城，新帅能否带领长春亚泰走出困境？</h3>
        </li>
        <li>
            <img src="https://p2.img.cctvpic.com/photoAlbum/page/performance/img/2024/5/1/1714537137855_270.jpg" alt=""height="250">
            <h3>雄鹿队在东部首轮第五战主场以115-92战胜印第安纳步行者队。雄鹿队将总比分追至2-3</h3>
        </li>
        <li>
            <img src="https://p1.img.cctvpic.com/photoAlbum/page/performance/img/2024/5/1/1714525113733_774.jpg" alt="" height="250">
            <h3>纳达尔不敌莱赫奇卡无缘八强，这也是纳达尔生涯在马德里大师赛的最后一场比赛。</h3>
        </li>
    </ul>
</body>
</html

综合案例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <form action="">
        <h2>个人信息</h2>
        姓名：<input type="text" placeholder="请输入真实姓名"> <br><br>
        密码：<input type="password" placeholder="请输入密码"> <br><br>
        确认密码：<input type="password" placeholder="请输入确认密码"><br><br>
        性别：
        <label><input type="radio" name="gender"> 男 </label>
        <label><input type="radio" name="gender"> 女 </label>
        <br><br>
        居住城市：
        <select name="" id="">
            <option value="">上海</option>
            <option value="" selected>北京</option>
            <option value="">广州</option>
            <option value="">武汉</option>
        </select>
        <h2>教育经历</h2>
        最高学历：
        <select name="" id="">
            <option value="">小学</option>
            <option value="">初中</option>
            <option value="">高中</option>
            <option value="">大学</option>
            <option value="">硕士</option>
            <option value="" selected>博士</option>
        </select>
        <br><br>
        学校名称：
        <input type="text"> <br><br>
        所学专业：
        <input type="text"> <br><br>
        在校时间：
        <select name="" id="">
            <option value="" selected>2015</option>
            <option value="">2016</option>
            <option value="">2017</option>
            <option value="">2018</option>
            <option value="">2019</option>
        </select>
        --
        <select name="" id="">
            <option value="">2018</option>
            <option value="" selected>2019</option>
            <option value="">2020</option>
            <option value="">2021</option>
            <option value="">2022</option>
        </select>
        <h2>工作经历</h2>
        公司名称：
        <input type="text">
        <br><br>
        工作描述：<br>
        <textarea ></textarea>
        <br>
        <br>
        <input type="checkbox">已阅读同意以下协议：
        <ul>
            <li><a href="https://www.xiaoyezi.com/html/panda_agreement.html" target="_blank">《用户服务协议》</a></li>
            <li><a href="https://lz.cqrd.gov.cn/lzptyszc.html" target="_blank">《隐私政策》</a></li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <button type="restet"> 重新填写</button>
    </form>


</body>
</html>

CSS

css定义

层叠样式表(Cascading Style Sheets，缩写为CSS)，是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置: title标签下方添加style双标签，style标签里面书写CSS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始CSS</title>
    <style>
        /*CSS代码*/
        /*选择器{CSS属性}*/
        /*属性名和属性值成对出现->键值对*/
        p {
            /*文字颜色*/
            color: rgb(231, 13, 13);
            /*字号*/
            font-size: large;

        }

    </style>
</head>
<body>
    <p>体验CSS</p>
</body>
</html>

CSS引入方式

1.内部样式表：

CSS代码写在style标签里面

2.外部样式标表：

CSS代码写在单独的CSS文件中(.css)

在HTML中使用link标签引入

3.行内样式：

配合JavaScript使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--link引入外部样式表-->
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是P标签</p>
    <!--行内，style="CSS属性"-->
    <div style="color:brown; font-size: 30px;">这是div标签</div>
</body>
</html>

/*CSS代码文件*/
p {
    color: gold;

}

选择器

作用：查找标签，设置样式

基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

标签选择器

标签选择器:使用标签名作为选择器→选中同名标签设置相同的样式。
例如：p,h1,div,a,img.....

类选择器

作用:查找标签，差异化设置标签的显示效果。
步骤：

定义类选择器->.类名

使用类选择器->标签名class="类名"

类名自定义，不要用纯数字或中文，尽量用英文命名

一个类选择器可以供多个标签使用

一个标签可以使用多个类名，类名之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*定义*/
        .red {
            color: red;
        }
        .size {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!--使用--->
    <!--一个类选择器可以给多个标签使用-->
    <p class="red">1111</p>
    <p>2222</p>
    <!--一个标签可以使用多个类名，类名用空格隔开-->
    <div class="red size">div标签</div>
</body>
</html>

id选择器

作用:查找标签，差异化设置标签的显示效果。
场景:id选择器一般配合JavaScript使用，很少用来设置CSS样式

步骤：

定义id选择器→#id名

使用id选择器→标签添加id= "id名"

同一个id选择器在一个页面只能使用一次。

通配符选择器

作用:查找页面所有标签，设置相同样式。
通配符选择器 : *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

画盒子

目标:使用合适的选择器画盒子

属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画盒子</title>
    <style>
        .red {
            /*宽度*/
            width: 100px;
            /*高度*/
            height: 100px;
            /*背景色*/
            background-color: brown;
        }
        .orange{
            width: 200px;
            height: 200px;
            background-color: orange;
        }



    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>
</html>

文字控制属性

字体粗细

■ 属性名：font-weight

■ 属性值：

▶数字

▶关键字

字体倾斜

■作用：清楚文字默认的倾斜效果

■ 属性名：font-style

■ 属性值：

正常：normal

倾斜：italic

行高

■作用：设置多行文本的间距

■属性名：line-height

■属性值：

数字+px

数字(当前标签font-size属性值的倍数)

行高的组成

行高的测量方法:从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

行高---垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

字体族

属性名：font-family

属性值：字体名

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

Font复合属性

复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写)

注意：字号和字体值必须书写，否则font属性不生效。

文本缩进

属性名：text-indent

属性值：

数字+px

数字+em（推荐：1em=当前的字号大小）

文本对齐

作用：控制内容水平对齐

属性名：text-align

属性值

水平对齐方式-图片

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

我们可以将图片放入div标签中，在将div中的文字内容居中即可。

修饰线

属性名：text-decoration

属性值：

文字颜色

属性名：color

属性值：

综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center{
            text-align: center;
            font-weight: 400;
            font-size: 30px;
            color: #333;

        }
        div{
            font-size: 14px;
            color: #999999;
        }
        p{
            text-indent: 2em;
            font-size: 18px;
            color:#333;
        }

        .imgcenter{
            text-align: center;
        }
    
    </style>
</head>
<body>
    <h1 class="center">哥伦比亚要与以色列断交：巴勒斯坦亡了，人类就亡了</h1>
    <div>来源：2024年05月02日 07:56 新浪网 作者 观察者网</div>
    <p> <strong>（观察者网讯）</strong> 据法新社和英国广播公司（BBC）报道，当地时间5月1日，哥伦比亚总统佩特罗在哥伦比亚首都波哥大参加群众集会，庆祝国际劳动节。在讲话中，佩特罗宣布，由于以色列在加沙地带进行"种族灭绝"，哥伦比亚"将于明天"（即当地时间2日）起与以色列断绝所有外交关系。</p>

    <p>"明天，我们将与以色列断绝外交关系......"佩特罗表示，"因为以色列有一位种族灭绝的总统。我们不能眼睁睁地看着种族灭绝、整个民族被消灭的事情发生，却对此无动于衷。"</p>

    <p>
        佩特罗称："如果巴勒斯坦灭亡，人类也会灭亡。"话毕，在场群众一片欢呼。
    </p>

    <div class="imgcenter">
        <img src="https://k.sinaimg.cn/n/sinakd20240502s/261/w591h470/20240502/57d5-aaa9eef5611c0c5a95de30a755431c7a.jpg/w700d1q75cms.jpg?by=cms_fixed_width" alt="">
    </div>

    <p>
        对此，以色列方面给予强烈回应。当日晚些时候，以色列外长卡茨在社交媒体X平台发文写道："历史会记住，佩特罗选择站在人类所知的最可恶的怪物一边......而以色列和哥伦比亚一直保持着友好的关系。即使是一个反犹和充满仇恨的总统也不会改变这一点。"
    </p>
</body>
</html>

前端Web开发基础知识

HTML定义

标签的语法

HTML 基本骨架

标签的关系

注释

标题标签

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落标签

换行与水平线标签

文本格式化标签

图像标签

超链接标签

音频标签

视频标签

列表标签

表格标签

表单标签

input标签

input占位文本

radio单选框

file上传文件

checkbox多选框

下拉菜单

文本域标签

label标签

按钮标签

网页布局标签

字符实体

CSS

CSS引入方式

选择器

画盒子

文字控制属性

字体大小

字体粗细

字体倾斜

行高

字体族

Font复合属性

文本缩进

文本对齐

修饰线

文字颜色