前端课程——HTML概述
HTML概述
第一个HTML页面
创建
在vscode中输入html选择html:5即可
结构
-
!doctype声明<!DOCTYPE html>告诉浏览器当前html页面的版本 -
html基本结构 <html lang="en"> <!-- 根元素，包含其他所有HTML元素 --> <head></head> <!-- 定义头部基本信息：标题，关键字，作者等 --> <body></body><!-- 表示当前HTML的主体，定义最终在浏览器窗口显示的内容 --> </html>
HTML标签
- 元素（Element）：是用来包含文字、图片或者音视频的内容，一般是由标签和内容组成。
- 标签（Tag）：是元素的组成部分，一般分为开始标签和结束标签。
注意：
- html标签对大小写不敏感，但W3C组织强制元素名使用小写
开始标签与结束标签
8e5d91d2-5cf7-4431-8f6a-b919360f1ec5.png
d99a21c9-54be-417a-b6d9-87f1b8fc67c8.png
元素的属性
57d37c30-1019-42e6-b4c0-2991487fd559.png
- 属性名（attribute name）：其数量和作用都是 HTML 给定的。
- 属性值（attribute value）：属性对应的值，建议使用一对双引号进行包裹。
同一元素允许多个不同属性。
HTML头部
- head元素
- 定义页面标题
<title>Document</title> - 定义所有相对URL的根URL
一个HTML页面只能定义一个base元素，如果定义一个，则只有第一个生效
<base target="_blank" href="http://www.example.com/"> - 定义HTML页面引入外部资源
<link href="link-element-example.css" rel="stylesheet">引入外部图标文件<link rel="icon" href="favicon.ico"> - css样式，一般称为内嵌样式表 <style type="text/css"> body { color:red; } </style>
- 定义元数据信息 <meta charset="UTF-8">
- 可执行脚本 <script type="text/javascript"> console.log('打印一个测试信息.'); </script>
- 定义页面标题
- meta
- 为搜索引擎定义关键词： <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 为网页定义描述内容： <meta name="description" content="Free Web tutorials on HTML and CSS">
- 定义网页作者： <meta name="author" content="KingJ">
- 每30秒中刷新当前页： <meta http-equiv="refresh" content="30">
- HTML5 版本定义编码格式： <meta charset="UTF-8">
- 定义 HTML 页面的视口： <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 注释
<!-- -->
CSS概述
CSS 是个缩写形式，其全称为 Cascading Style Sheets，翻译成中文的含义为层叠样式表。
如何使用
- 内联样式
- 内嵌样式表
- 外联样式表
内联样式
<div style="color: lightcoral;">这是测试内容.</div>
c25f627c-5ec7-49f2-8a82-d441ef2c6fbd.png
优点 | 缺点 |
|---|---|
简单、直接 | 强耦合，不能实现网页的内容和样式的有效分离 |
不同元素设置相同css，导致冗余代码 | |
内嵌样式表
<style type="text/css">
p {
color: lightcoral;
font-size: 24px;
}
</style>优点 | 缺点 |
|---|---|
使网页的内容和样式有效的分离 | 如果存在大量样式，导致HTML文件很大 |
为不同元素设置相同样式，只需要定义一次代码 | |
外联样式表
引入外部css文件
<link rel="stylesheet" href="style/demo.css">
- rel 属性：用来定义引入文件与当前 HTML 页面的关系，该属性值必须是链接类型值。
- href 属性：用来定义引入文件的 URL。
一个 HTML 页面允许引入多个 CSS 文件，多个 CSS 文件的加载顺序按照 HTML 页面引入的顺序进行加载。
加载过程
- 加载HTML并解析
- 析到
<link>元素引入的 CSS 文件，并通过 href 属性读取到 CSS 文件的路径。 - 根据读取的路径，开始加载 CSS 文件并进行解析。
语法
e0a990bd-459e-47d5-814a-2c9abf15cb26.png
注释
859610c3-fffb-4560-a0e3-2a690a05e701.png
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-01-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
