在vscode
中输入html
选择html:5
即可
!doctype
声明
<!DOCTYPE html>
告诉浏览器当前html页面的版本
html
基本结构
<html lang="en"> <!-- 根元素,包含其他所有HTML元素 --> <head></head> <!-- 定义头部基本信息:标题,关键字,作者等 --> <body></body><!-- 表示当前HTML的主体,定义最终在浏览器窗口显示的内容 --> </html> 注意:
同一元素允许多个不同属性。
<title>Document</title>
<base target="_blank" href="http://www.example.com/">
<link href="link-element-example.css" rel="stylesheet">
引入外部图标文件
<link rel="icon" href="favicon.ico">
<!-- -->
CSS 是个缩写形式,其全称为 Cascading Style Sheets,翻译成中文的含义为层叠样式表。
<div style="color: lightcoral;">这是测试内容.</div>
优点 | 缺点 |
---|---|
简单、直接 | 强耦合,不能实现网页的内容和样式的有效分离 |
不同元素设置相同css,导致冗余代码 | |
<style type="text/css">
p {
color: lightcoral;
font-size: 24px;
}
</style>
优点 | 缺点 |
---|---|
使网页的内容和样式有效的分离 | 如果存在大量样式,导致HTML文件很大 |
为不同元素设置相同样式,只需要定义一次代码 | |
引入外部css文件
<link rel="stylesheet" href="style/demo.css">
一个 HTML 页面允许引入多个 CSS 文件,多个 CSS 文件的加载顺序按照 HTML 页面引入的顺序进行加载。
加载过程
<link>
元素引入的 CSS 文件,并通过 href 属性读取到 CSS 文件的路径。