初识HTML与CSS

HTML，即HyperText Markup Language(超文本标记语言)，它是一种用于告诉浏览器如何构造页面的标记语言。HTML可通过标记符号来标记要显示的网页中的各个部分。

CSS (Cascading Style Sheets) 层叠样式表是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者 SVN）的语言，可以将文档以更优雅的形式呈现给用户。

如果用一种通俗的比喻去描述HTML与CSS的关系，那么HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

而为创建功能丰富、视觉吸引且易于使用的网页，通常会一起用到HTML、CSS、JavaScript，在网页开发中，它们的关系非常紧密，被称为前端技术的三大基石。HTML 是基础：HTML 定义了网页的结构和内容，是网页的骨架。
CSS 负责美化：CSS 负责网页的样式和布局，让网页更加美观和易于阅读。
JavaScript 负责交互：JavaScript 使网页具有交互性，响应用户的操作并更新网页内容。

 

接下来讲述HTML的开发环境以及语法结构；

1.开发环境

可用于编写HTML的编译工具有很多

  记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；

o    Sublime  （推荐）：特点：运行速度快、代码提示、高亮显示、插件拓 展、 html 插件emmet、sublime text3 安装emmet插件；

  VSCode （推荐）：特点：丰富的插件支持、可进行git管理；

  Ide：特点：集成开发工具、类似DW,node,npm...运行速度较慢；

Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产 生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试；

主流浏览器： Google Chrome （谷歌）、Firefox （火狐）、 Opera、 Safari 、MicrosoftEdge。

2.语法结构

2.1注释

使用<!-- 注释内容 -->在HTML代码中添加注释，以提高代码的可读性和可维护性。

2.2元素

单标签元素，仅有一个标签（<meta /> 、<img />、<br/>）

双标签元素，由开始标签和结束标签组成（div></div>

<p></p>）

2.3属性

HTML中每个标签都有属于自己的属性，例如

id：唯一标识

class：标识一类元素

style：样式

 

3.块级元素

作用：搭建网页结构 

特点：

  独占一行空间

  默认宽度为100%

  高度由子元素或内容决定   可以通过css指定其宽度

元素： html 、body 、div 、p 、h1~h6 、ul->li 、ol->li 、dl->dd/dt 、header、footer 、nav 、article 、section、aside 、address... （建议：不要将块级元素嵌套在行内元素中。）

 

4.行内元素

作用：在结构中填充网页内容 

特点：

  与其他行内元素共享一行空间

   宽高由自身决定

  由于不用来搭建网页结构，所以也无需通过css指定其宽度 

  行内元素中不可以嵌套块元素

元素：span 、a 、img 、strong 、b 、i 、em 、sub 、sup...