1 认识前端

前端的技术栈：

HTML+CSS+JavaScript

HTML:超文本标记语言 ->框架 -> <head>

CSS：层叠样式表 ->美化 -> <style>

JavaScript:一门语言 ->功能实现 -> <script>

一对HTML及CSS的初步认识

1 HTML：超文本标记语言，提供一种方法来描述文件中内容的结构

2 CSS：层叠样式表（cascading style sheets),可以描述要如何表现你的内容；提供一种方法来告诉浏览器页面中的元素如何显示

代码text1：

<!DOCTYPE html>

<head>

<title>Starbuzz Coffee </title>

body {

background-color: #d2b48c; /* 背景色是土黄色 */

margin-left:20%; /* 左边距占页面20% */

margin-right:20%; /* 右边距占页面20% */

border: 2px dotted black; /* 黑色虚线边框 */

padding:10px 10px 10px 10px; /* 内容和边框之间的内边距 */

font-family:sans-serif; /* 字体库中非常大气的英文字体 */

}

</style>

</head>

<body>

<h1>Starbuzz Coffee Beverages</h1>

<h2>

House Blend,$1.49

</h2>

<p>A smooth,mild blend of coffees from Mexico,Bolivia and Guatemala.</p>

<h2>

Mocha cafe Latte,$2.35

</h2>

<p>Espresso,steamed milk and chocolate syrup.</p>

<h2>

Cappuccino,$1.89

</h2>

<p>A mixture of espresso,steamed milk and foam.</p>

<h2>

Chai Tea,$1.85

</h2>

<p>A spicy drink made with black tea,spices,milk and honey</p>

</body>

</html>

代码text2：

<!DOCTYPE html>

<head>

<title>Mission</title>

body{

background-color:blanchedalmond;

margin-left:10%;

margin-right:30%;

border:2px dotted black;

padding:20px 20px 20px 20px;

font-family: sans-serif;

}

</style>

</head>

<body>

<h1>Starbuzz Coffee's Mission</h1>

<p>provide all the caffeine that you need to power your life.</p>

<p>Just drink it</p>

</body>

</html>

备注快捷键：

向上移动行：Alt+↑

复制到下一行：shift+Alt+↓

撤销返回上一步：Ctrl+z

多行移动：向左Ctrl+[ 向右Ctrl+]

注释：单行注释Ctrl+/ 块注释Alt+Shift+A

posted @ 2021-09-06 22:26 会飞的胖鱼阅读(77) 评论(0) 收藏举报

刷新页面返回顶部

会飞的胖鱼

1 认识前端

1 认识前端

公告