1-初识html
1.简介
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。
CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户
HTML和CSS之间的关系？
-
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
-
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
2.开发环境搭建
编写HTML的编译工具
-
记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；
-
Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；
-
VSCode（推荐）：特点：丰富的插件支持、可进行git管理；
-
Idea：特点：集成开发工具、类似DW,node,npm...运行速度较慢；
浏览器
Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果
主流浏览器：Google Chrome（谷歌）、Firefox（火狐）
这里我用到VSCode 以及Firefox（火狐）浏览器
3.快速生成初始文档
一切准备好后，打开VSCode，新建xxx.html 文件
在页面输入 "!" / "html:5" 生成基本的html5结构
4.注释
<!-- 注释十分重要，用于解释说明，便于阅读维护 -->
利用 “ ctrl+/ ”
5.各种含义
<!-- h5文档头 -->
<!DOCTYPE html>
<!-- 根标签 （一个网页只有一个根标签） -->
<html lang="en">
<!-- head 头部标签 里面的内容不会显示在浏览器中 -->
<head>
<!-- 字符集编码 用来声明当前文档的编码方式为utf-8 -->
<meta charset="UTF-8">
<!-- viewport 设备的屏幕
width=device-width width属性控制设备的宽度，确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放
简单来说，这行代码就是来用适应不同的设备屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 选项卡标题 -->
<title>初识html</title>
就是将来运行在浏览器中，选项卡的名字
</head>
<!-- 网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
<body>
123
body中的内容会显示在浏览器的内容页面里
</body>
</html>
扫一扫
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
