前端基础-HTML
HTML
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 的关键是标签，其作用是指示将出现的内容。
页面F12看代码
是注释语句。<! >这不是，这是放在第一行的声明，指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
对于中文网页需要使用 声明编码，否则会出现乱码
<!DOCTYPE html> //声明版本
<html> //根元素
<head> //包含文档元数据
<meta charset="utf-8">
<title>标题</title> //文档标题
</head>
<body> //可见的页面部分
<h1>我的第一个标题</h1> //h1 -- h6
<hr> //一条水平线
<p>我的第一个段落。</p>
<a href="https://www.runoob.com">这是一个链接</a>
//<a是标签 href是属性
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
<b>加粗文本</b>
<i>斜体文本</i>
<sub> 下标</sub>
</body>
</html>
（1）元素 & 标签
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 大多数 HTML 元素可拥有属性
- HTML 标签对大小写不敏感：
等同于
（2）属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签 <>里面
- 属性总是以名称/值对的形式出现，比如：name="value"。
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
（3）可添加在头部的标签
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
| 标签 | 描述 |
|---|---|
<title> |
搜索引擎以及收藏夹中的标题 |
<base> |
定义了页面链接标签的默认链接地址 |
<link> |
文档和外部资源之间的关系 |
<style> |
定义了HTML文档的样式文件 |
<meta> |
定义了文档的元数据 |
<script> |
定义了客户端的脚本文件 |
（4）CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。使用方法：
- 内联样式- 在HTML元素中使用"style" 属性
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
- 内部样式表 -在HTML文档头部
<head>区域使用<style>标签 来包含CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
</body>
</html>
- 外部引用 - 使用外部 CSS 文件（适合一个样式应用与多个页面）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
（5）script脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
- 使用
<script>标签，可以在<head>也可以在<body>
<script>
document.write("Hello World!");
</script>
浙公网安备 33010602011771号