HTML与CSS入门-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45158336/article/details/119331703

html是超文本标记语言，并非编程语言

HTML特点

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

3.平台无关性：无关系统区别，机器区别，均可使用

4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

css层叠样式表

为html提供样式设计，说白了就是美化

HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML

一个网页的设计离不开 html的结构设计，css的样式设计，JS的行为设计（响应用户的操作）

开始学习html

html是基于浏览器的，所以选择一个好的浏览器就拥有一个良好的开端

目前主流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Microsoft Edge

360和QQ浏览器不建议使用，因为框架不同会造成很多位置问题

VScode

下载好软件，个人建议安装的插件：

HTML CSS Support - Html提示Css自动补全

HTML Preview - 提供预览HTML文档的功能

HTML Snippets - 完整的HTML标签，包括HTML5片段

Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能

open in browser - 可以在默认浏览器或应用程序中打开当前文件。

点击扩展，搜索栏搜索对应下载即可，如果遇到重复名字的，下载那些下载量多的就好，

上述插件在初学阶段应该够用，并且为学习提供很大的帮助

VScode打开方式也很简单

新建文件夹，将文件夹拖到桌面上的vscode的图标即可打开

后缀名加.html即可创建一个新的html文件

当安装插件之后，在英文状态下输入一个！回车，即可自动生成上面模板

<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
    如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- 
	html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
  <!--
				meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
        meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/ 
  -->
  <!-- 
        字符编码，浏览器会根据字符编码进行解析
        常见的字符编码有：gb2312、gbk、unicode、utf-8。
  -->
  <meta charset="UTF-8">
  <!-- 
        viewport 设备的屏幕
        width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，				 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
        initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
     -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 浏览器选项卡上的名字 -->
  <title>Hello HTML</title>
</head>
<!--
	body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
  <!-- 在body里的内容都是显示在浏览器的视图区的 -->
  <!-- 
    	在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一定要简单明了		
    -->
</body>
</html>