HTMLCSS基础_代码初识-1

最新推荐文章于 2023-12-06 21:32:27 发布

wzp121500

最新推荐文章于 2023-12-06 21:32:27 发布

阅读量697

点赞数

本文链接：https://blog.csdn.net/wzp121500/article/details/17342443

版权

前端开放语言：

html(Hypertext Markup Language)—— 结构

超文本标记语言

css(Cascading Style Sheets)—— 样式

层叠样式表

js(javascript)—— 行为

Html 的第一个页面

html超文本标记语言
< 标记
<html> 标签
<html> </html> 标签对
<!DOCTYPE HTML> 声明文档类型
<meta charset="utf-8"/> 代码编码格式 单标签:直接在后面斜杠结束的标签叫做单标签。

<!DOCTYPE HTML>
!声明注意
doc document 文档
type 类型

参考： http://www.divcss5.com/html/h22.shtml

代码编码格式，它是指出的文件里面代码编码格式（代码编码格式提供给了编译器使用的！），不是文件编码格式。浏览器一开始打开的文件编码格式。文件编码格式决定了这个文件里面所有内容的存放对应二进制数。这些二进制数在通过浏览器按照代码编码格式来解读他们的。
utf-8 国际标准

天 001
？ 110
gb2312 中文简体标准
天 110
？ 001
文件的编码格式和代码编码格式统一。

参考：http://www.divcss5.com/html/h53.shtml

<div style="width:400px; height:200px; background:red;">块</div>
一个块，宽度300像素，高度是200像素，背景蓝色
<div style="width:300px; height:200px; background:blue;"></div>
<!-- 
行间样式
 -->
<!-- html 注释 -->

行间样式表是指将CSS样式编码写在HTML标签中，格式如下

<h1 style="font-size:12px;color:#000FFF">
我的CSS样式。
</h1>
行间样式表由HTML元素的HTML元素的style支持，只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:400px; height:200px; background:red;}
/* 
内部样式表
*/ 

/* css 注释 */

</style>
</head>
<body>

<div id="box">块</div>

</body>
</html>

内部样式表与行间样式表相似都是把CSS代码写在HTML页面中，稍微不同的是前者可以将样式表放在一个固定的位置.

内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。

<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" rev="stylesheet" href="style.css">
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
在style.css中的代码为
#box{width:400px; height:200px; background:red;}

外部样式表是CSS应用中最好的一中形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用一个样式文件表，这样能够实现代码的最大限度的重用及网站文件的最优化配置，

我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式，并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。