HTML/CSS入门（1）

最新推荐文章于 2024-09-12 18:22:06 发布

Arrebolo

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量173

点赞数 3

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/m0_58815458/article/details/117453752

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于HTML,我们先来了解一下什么是HTML，那所谓的HTML（Hyper Text Markup Language）呢，实际上是叫超文本标记语言，那对于HTML语言它有什么特点呢，接下来我们来看看，对于简易、可扩展、与平台无关这些特点HTML都享受到了，哈哈，然后呢它的一个重点是标签，那这里就要引申出什么是标签了，那所谓的标签是通过一对<>包裹组成的一个页面，因此HTML文档又叫做Web页面，我们今天先从以下几个方面来进行HTML的入门修行~

一、HTML文档结构

看到这张图先别急哈，用你们可爱的眼睛花几秒钟时间看看它。注意：<html>与</html>分别标志着文档的开始与结束。

二、HTML标签

那先来了解一下基础的HTML标签吧！这个地方方便大家看，我就用表格来呈现吧更直观一些，毕竟大家都不太喜欢千篇一律的文字，哈哈哈！！！

标签	描述
<!DOCTYPE>	定义文档类型
<html>	定义一个HTML文档
<title>	为HTML文档定义一个标题（显示在状态栏）
<body>	定义HTML文档主体
<h1>~<h6>	定义HTML标题
<p>	定义一个段落
<br>	定义折行
<hr>	定义水平线
<!--....--->	定义一个注释
<u>	定义下划线文本
<i>	定义斜体文本
<b>	定义粗体文本
<em>	定义强调文本

HTML 主要用于描述网页里的元素是什么(内容)，CSS主要用于描述网页里的元素是什么样子(外观)，而JavaScript 则用于增强网页的交互能力和逻辑控制能力。它们之间应尽可能地各行其道，避免过多耦合。因此，应只使用HTML来说明网页中的元素是什么，而尽量避免使用HTML来描述元素的外观。极端点说，诸如:<font> 、<b> 、<u>、<i>这样的标签就是HTML标签中的"怪胎"，应避免使用。

这里给大家推荐一个网站，这些标签大家不懂的可以在此网站上仔细研究（https://www.w3school.com.cn/）。

三、元素分类

按照本身的特点可分为行级元素（元素在一行内并排显示，用来显示内容）和块级元素（独占一行）。

常用的行级元素：<a>、<span>、<img>

块级元素：<div>、<h1>~<h6>、<p>

好了，今天就简单让大家尝一下HTML的小菜，哈哈哈，大家下去一定要去练习，自个儿动手去实践，那这个地方先给大家两个简单的网页（在此之前先给大家介绍开发工具，那么目前公司里主流的是VSCode，安装链接：577A3493-1DF8-49AE-9648-251E689076C0.exe），其次是关于浏览器的问题，对于程序员来说，我们应该要用Google Chrome才是正常操作哈，开个玩笑，哈哈哈。

第一个练习：

代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>糖醋排骨</title>
</head>
<body>
<div>
    <h1>&lt;&lt;糖醋排骨&gt;&gt;的制作方法</h1>
    <p><strong>菜名名称:糖醋排骨</strong></p>
    <p><strong>市场价格:</strong>26</p>
    <p><strong>会员价格:</strong><span style="color:red;">24</span></p>
    <p><strong>使用配料:</strong>排骨、糖、醋 </p>
    <p><strong>菜品类型:</strong>炒菜</p>
    <h5><strong><i><u>做法:</u></i></strong></h5>
    <p>1.猪小排洗净,晾干水份备用;</p>
    <p>2.锅内倒少量油，烧热之后，爆香姜片;</p>
    <p>3.放入排骨，一直编炒到排骨变色后，表面金黄微焦;</p>
    <p>4.此时就可以放入黄金比例中的调料了，顺序是:先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋最后四汤勺白糖,炒匀;</p>
    <p>5.再倒入能没过排骨的开水，调中小火焖20分钟;</p>
    <p>6.20分钟后调入盐，开大火收汁，收到十浓色亮时，撒入芝麻点缀即可出锅（锅里剩下的姜片丢掉不用，最后大火收汁时注意多翻动锅内的排骨，避免烧焦哟!）。</p>
    <hr/>
    <p><span style="position:absolute;top:1;left:2;font-size: 4px;">&copy;</span>&nbsp;2015&nbsp;阿婆私房菜</p> 
</div>
</body>
</html>

效果图：

第二个练习：

代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>楚乔传</title>
</head>
<body>
    <div>
    <h1>楚乔传</h1>
    <p>中国大陆 67集（TV版）/58集（DVD版）</p>
    <p>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1] </p>
    <img src="./1.jpg" alt="" style="hight=200px;width:200px;">
    <p>第1集&nbsp;<a href="#">第2集</a>&nbsp;<a href="#">第3集</a>&nbsp;第4集&nbsp;第5集</p>
    <h4>第1集（以TV版为准）</h4>
    <p>&nbsp;&nbsp;&nbsp;西魏年间乱世混战，大批平民在战乱中沦为
            官方公布剧照 工作照
            官方公布剧照 工作照(55张)
             奴隶，命如草芥。奴籍少女楚乔（赵丽颖饰）被送入人猎场供贵族娱乐射杀，幸得燕北世子燕洵暗中相救，随后她被带进权倾朝野的门阀宇文家。目睹兄姐相继惨死，立誓要带妹妹逃出牢笼。
            楚乔受到开明贵族宇文玥关注，被迫接受严厉训练的同时，更与燕洵结下深厚友谊。西魏门阀争斗，燕洵一家满门被灭，深陷绝境，楚乔与他生死相守并力助他逃脱困局。然而回到西凉后，燕洵野心膨胀，不惜以满城百姓性命为代价割据称雄。楚乔在绝望中与燕洵分道扬镳，燕洵设计在冰湖陷害宇文玥, 楚乔与宇文玥坠入冰湖生死未卜[7]  。
            赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。2006年，因获得雅虎搜星比赛冯小刚组冠军而进入演艺圈；同年，在冯小刚执导的广告片《跪族篇》中担任女主角。2007年，参演个人首部电影《镖行天下之牡丹阁》。2011年，因在古装剧《新还珠格格》中饰演晴儿一角而被观众认识。2013年，凭借古装剧《陆贞传奇》获得更多关注。2014年10月，在第10届金鹰电视艺术节举办的投票活动中被选为“金鹰女神”；12月，凭借都市爱情剧《杉杉来了》获得第5届国剧盛典内地最具人气女演员奖；</p>
        </div>
    </body>
</html>

效果图：