目录
1. HTML的初步使用
1.1 vscode的使用
1.在官方网站上下载VScode
官方网站：https://code.visualstudio.com/
直接 下一步（Next），点击下一步安装完成。
2.修改VsCode为中文版本
运行VScode，打开页面后，等待几秒钟：
目前，VSCode有自动检测语言环境，如果出现这个弹窗，则之间点击 安装并重启 即可切换到中文。
当然，如果没有此弹窗，或者未点击消失了，则执行下面步骤修改：
到此界面选择安装
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
安装完成后，重启VSCode即可。
3.安装VSCode好用的插件（可选）
1.vetur（vue文件基本语法的高亮插件）
2.eslin（智能错误检测插件）
3.Auto Close Tag（自动闭合HTML/XML标签）
4.Auto Rename Tag（自动完成另一侧标签的同步修改）
5.JavaScript(ES6) code snippe（Es6语法输入及提示）
6.Vue VSCode Snippets（新生成页面时，可快速提供一个初始化的结构）
4.新建第一个项目
1.建立HTML文件夹（文件后缀为.html即可）
所有准备完毕后就可以开始编程了。
1.2 HTML的初步编译
1.编译一个基础的HTML文件
每个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>
</body>
</html>接着是网页的主体内容，直接在<body><body/>标签里面书写即可。
下面是一个简单示例：
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习1</title>
</head>
<body>
<h1> 春节的那些事
</h1>
1.节日名称<br>
2.节日习俗<br>
3.<a href="#xisu">具体习俗</a> <br>
<h2>节日名称</h2>
<p>春节(Spring Festival)，是中国民间最隆重最富有特色的传统节日之一。一般指除夕和正月初一，是一年的第一天，又叫阴历年，俗称“过年” ，从腊八或小年开始，到元宵节，都叫过年。
春节历史悠久，起源于早期人类的原始信仰与自然崇拜，由上古时代岁首祈岁祭祀演变而来，是一种原始的宗教仪式，人们会在年初之际举行祭祀活动，祈求来年五谷丰登、人畜兴旺。
这种祭祀活动随着时间的推移逐渐演变为各种庆祝活动，最终形成了今天的春节。“春节”一词开始使用是在辛亥革命以后。<br>
春节期间，中国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祖敬老、感恩祈福、阖家团聚、除旧布新、迎禧接福、祈求丰年为主要内容，带有浓郁的民族特色
。春节民俗众多，包括喝腊八粥、祭灶神、扫尘、贴春联、贴年画、倒贴福字、除夕守岁、吃饺子、压岁钱、拜年、逛庙会等 。
受到中华文化的影响，世界上一些国家和地区也有庆贺新春的习俗，非洲埃及到南美洲巴西，从纽约帝国大厦到悉尼歌剧院，中国农历新年在世界各地掀起了“中国风”。
春节内容丰富多彩,具有重要的历史、艺术和文化价值。2006年,春节民俗经国务院批准列入第一批国家级非物质文化遗产名录.
2025年春节起,春节放假4天(农历除夕、正月初一至初三)。<br></p>
<img src="C:\Users\龙雨树\Desktop\前端\前端练习1（基础标签）\练习1图片\7a899e510fb30f2442a76d97d2cdc643ad4bd113a555.webp">
<h2 id="xisu">节日习俗</h2>
<p>传统节日仪式与习俗活动，是节日元素的重要内容，在历史发展中，杂糅了多地多种民俗为一体，形成了一些较为固定的风俗习惯,
在历史发展中，杂糅了多地多种民俗为一体，形成了一些较为固定的风俗习惯，有许多还相传至今。<br>
这些活动，可大体归纳为如下几个方面：奉祀神灵，以应天时；崇宗敬祖，维护亲情；驱邪祛恶，以求平安；休闲娱乐，放松心情。春节虽定在农历正月初一，
但春节的活动却并不止于正月初一这天。从年尾小年起，人们便开始“忙年”：<a href="页面1.html" target="_blank">祭灶</a>、<a href="页面2.html"
target="_blank">扫尘</a>、<a href="页面3.html" target="_blank">购置年货</a>、贴年红、洗头沐浴、张灯结彩等等，
所有这些活动，有一个共同的主题，即“辞旧迎新”。</p>
<img src=" C:\Users\Desktop\前端\前端练习1（基础标签）\练习1图片\50da81cb39dbb6fd526657ec327cbc18972bd50799fb.webp">
<p>更多内容可以<a href="http://baidu.com" target="_blank">百度一下</a></p>
</body>
</html>编译完成后直接点击鼠标右键在浏览器中运行即可。
2.HTML基础标签（常用）
.标题标签（ tittle）
标签写法：<h1>-<h6>
标签作用：是标明文章、作品等内容的简短语句。
2.段落标签
标签写法：<p>
标签作用：在网页中描述具有一个相对完整的内容。
3.斜体标签
标签写法：<em>
标签作用：实现的一种倾斜的字体样式
不会换行
4.粗体标签
标签写法：<strong>
标签作用：实现的一种加粗的字体样式
不会换行
5.水平线标签
标签写法：<hr/>
标签作用：在网页中加入平行线用来区分上下文
6.换行标签
标签写法：<br/>
标签作用：跳到下一个新行
7.注释
标签写法: <!--注释内容-->
8.大于号
HTML源代码：>
9.小于号
HTML源代码：<
10.空格
HTML源代码：
11.引号
HTML源代码："；
12.注册商标
HTML源代码：®
13.
img 标签
(1) src 图片路径属性
相对路径：
/ 根路径
./ 同级路径
../ 上一级路径
绝对路径(不用)
(2) 宽度width px(像素)
高度height px(像素)
(3) alt 在图片不能正常加载时显示的提示语
(4) title 鼠标划上去显示的内容
14. 超链接
语法：<a href="链接地址" ></a>
15.列表标签
（1）有序列表：<ul>用来声明无序列表 <li>用来表示列表项。
（2）有序列表：<ol>用来声明有序列表。 <li>用来表示列表项。
...有兴趣可以自行了解。
2. css的初步使用
2.1 css的基础说明
1.什么是css
css是Cascading Style Sheet 层叠样式表，是一组样式设置的规则，用于控制页面的外观样式。
2.使用css的作用
实现内容与样式的分离，便于团队开发样式复用，便于网站的后期维护页面的精确控制，让页面更精美。
3.css的主要使用种类
1.标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称
以标签名作为样式应用的依据
2.类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
3.ID选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系
4.复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
5.组合选择器
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
6.嵌套选择器
在某个选择器内部再设置选择器，通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行2
注意（选择器优先级）：行内样式>ID选择器>类选择器>标签选择器
2.2 css的引用方式
1.内部样式
在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用
例如：
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css练习1</title>
<style>
.gray {
color: #888888;
font-size: 12px;
text-align: center;
}
.search {
color: #666;
width: 170px;
}
.fottor {
color: #888888;
font-size: 12px;
}
</style>2.行内样式
使用HTML标签的style属性定义，只对设置style属性的标签起作用
3.外部样式
使用.css文件定义，然后使用如下标签引入指令：
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
下面是一个css简单示例:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 150px;
height: 200px;
background-color: #f5f5f5;
}
.box img {
width: 100%;
}
.review {
height: 70px;
font-size: 12px;
padding: 0 10px;
margin-top: 3px;
color: #b0b0b0;
}
.info {
height: 70px;
font-size: 12px;
padding: 0 10px;
margin-top: 0;
color: #b0b0b0;
}
.info h4 {
display: inline-block;
}
a {
color: #333;
text-decoration: none;
}
.box1 {
width: 400px;
height: 200px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}3. 一个完整简单的网页示例
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css练习1</title>
<style>
.gray {
color: #888888;
font-size: 12px;
text-align: center;
}
.search {
color: #666;
width: 170px;
}
.fottor {
color: #888888;
font-size: 12px;
}
</style>
<link rel="stylesheet" href="1.css">
</head>
<body>
<h1>尹锡悦若罪名成立，最高可判死刑</h1>
<div class="gray">来源：<a href="http://www.people.com.cn/" target="_blank">人民日报网</a>
<input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button>
</div>
<hr>
<h4>前言</h4>
<p>尹锡悦若罪名成立，最高可判死刑，为何大多韩国总统都没有好下场?</p>
<p class="pic"> <img src="C:\Users\龙雨树\Desktop\前端\css练习1\练习1图片\下载.jpg"> </p>
<h4>韩国政坛再次陷入震荡！</h4>
<p>2024年12月的“紧急戒严”事件,将现任总统尹锡悦推向了政治生涯的悬崖边缘。</p>
<p>这场风波不仅暴露了韩国政治体系的脆弱性，也预示着尹锡悦的总统之路可能即将走向终结。</p>
<p>而总统尹锡悦的“审判”结果出炉，要求迅速将其逮捕，并被禁止离境，面临最高可判处死刑的严重指控。
戒严风波始末及后果，一场仓促的政治豪赌
戒严风波始末及后果，一场仓促的政治豪赌</p>
<p>2024年12月3日晚,一个看似平常的夜晚，韩国总统尹锡悦却做出了一个惊人的举动——宣布国家进入紧急戒严状态。</p>
<p class="pic"> <img src="C:\Users\龙雨树\Desktop\前端\css练习1\练习1图片\下载 (1).jpg"></p>
<p>这一消息迅速传遍全球，引发了国际社会的广泛关注和担忧。
而，更令人震惊的是，仅仅六个小时后，这场戒严便草草收场，
如同昙花一现，成为了国际新闻中的一个笑柄，也为尹锡悦的政治生涯蒙上了一层阴影。</p>
<h4>而尹锡悦的戒严令失败的原因是多方面的。</h4>
<p>首先，尹锡悦在军方缺乏足够的威望和支持。</p>
<p class="pic"> <img src="C:\Users\龙雨树\Desktop\前端\css练习1\练习1图片\下载 (3).jpg"></p>
<p>军队作为国家机器的重要组成部分，其态度对于戒严的成败至关重要。
还有就是尹锡悦在宣布戒严时，几乎与所有政客撕破了脸皮，为自己树立了太多的敌人，使其在政治上陷入了孤立无援的境地。
</p>
<p>而戒严风波的直接后果是灾难性的,尹锡悦不仅失去了民心和政治威信，还面临着多项指控，其中最严重的莫过于内乱罪首犯。
韩国国会迅速通过决议,要求立即逮捕尹锡悦等8名相关官员,并禁止其离境。要求迅速逮捕，最高可判死刑.</p>
<p class="pic"> <img src="C:\Users\龙雨树\Desktop\前端\css练习1\练习1图片\下载 (4).jpg"></p>
<p>尹锡悦的戒严闹剧，如同引爆了一颗政治炸弹，在韩国政坛引发了巨大的冲击波。
</p>
<p>国会、各政党以及司法机构纷纷行动起来，对尹锡悦及其相关人员展开调查和追责。
曾经的盟友纷纷与其划清界限，曾经的对手则抓住机会对其展开猛烈攻击。</p>
<p>2024年12月10日,韩国国会召开全体会议,以压倒性的多数票通过了要求迅速逮捕尹锡悦等8名相关官员的决议案,
191票赞成,94票反对,3票弃权,这组数字清晰地反映了韩国政坛对尹锡悦的强烈不满和不信任。</p>
<p class="pic"><img src="C:\Users\龙雨树\Desktop\前端\css练习1\练习1图片\下载 (5).jpg"></p>
<p>而在决议案里，最大在野党共同民主党更是直接斥责尹锡悦妄图颠覆国会，实乃内乱之罪魁祸首，理当即刻予以逮捕。
然而，共同民主党并未偃旗息鼓，反而宣称将持续推进弹劾案，直至其于国会得以通过.</p>
<p>值得注意的是，执政党的态度也发生了微妙的变化。</p>
<p class="pic"> <img src="C:\Users\龙雨树\Desktop\前端\css练习1\练习1图片\下载 (6).jpg"></p>
<p>虽然在弹劾案的初期，执政党出于维护自身利益的考虑，曾对尹锡悦表示支持，但随着事态的发展，
他们逐渐意识到尹锡悦已经成为了一个政治包袱。为了避免被尹锡悦拖累，执政党最终选择与尹锡悦切割，并开始推动其提前下台。</p>
<p class="fottor">来源:人民日报2024-12-09——《韩国总统尹锡悦被禁止离境》的报道</p>
</body>
</html>body {
font: 16px/28px 'Mrciofsoft YaHei';
}
h1 {
font-weight: 400;
text-align: center;
}
a {
text-decoration: none;
}
.btn {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic {
text-align: center;
}注意：本文章只提供基础网页知识，更深入了解如css盒子模型，网页布局，JS等相关内容请关注其他文章。
扫一扫
3778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
