HTML&CSS入门_Part 1type
status
date
slug
summary
tags
category
icon
password
@ZZHow(ZZHow1024)
参考视频：
bilibili 使用 HTML 和 CSS 构建响应式真实世界网站（中英文字幕）https://b23.tv/lGCRXvW
~P8
- What is HTML(Hyper Text Markup Language)
- Markup Language（标记语言）而不是Programming language（编程语言）
- 不同的元素：paragraphs,links,headings,images,videos,etc.
- 浏览器可以理解HTML并渲染
- Anatomy(剖析) of an HTML element
- Opening tag:元素的名称 < >
- Content:元素的内容
- Closing tag:结束标签</ >
~P9
- 省事做法，输入一个!然后按下TAB，VS Code会自动补充HTML文件的结构
- 如何关闭VS Code的自动填充Closing tag功能
- Settings搜索auto close tags第一项(Files:Auto Closing tags) 取消勾选
- 学习HTML结构：
<!DOCTYPE html>告诉浏览器这个文档的使用- 添加元素
<html> </html>每一个HTML文档的开始<head> </head>包含页面标题和附加信息等<title> </title><body> </body>在页面上可见的<h1> </h1>
~P10
- 有6个h元素(heading)
- h1又称为“主标题”
- 从h1到h6字体依次减小
- p元素(段落元素)
<p> </p>
- 注释
<!-- 注视注释 -->
b元素(显示粗体)<b> </b>- 但这不是一个好习惯，b没有语义
- 从HTML5开始应使用strong元素 ↓↓↓
- strong元素(显示粗体)(更重要的文本)
<strong> </strong>
i元素(显示斜体)<i> </i>- 但这还不是一个好习惯，b没有语义
- 应该开始应使用em元素 ↓↓↓
- em元素(显示斜体)(强调的文本)
<em> </em>
~P11
- ol元素(有序列表)
<ol> </ol>- 在ol元素中使用li元素(列表项)
<li> </li>
- ul元素(无序列表)
<ul> </ul>- 在ul元素中使用li元素(列表项)
<li> </li>
~P12
- img元素(图像元素)
<img 属性 />- src属性
- 显示的图片
- alt属性
- 图像的描述
- width属性
- 图片的宽度
- height属性
- 图片的高度
- html元素的属性
- lang属性
- 网页的语言
- 例：
<html lang="en">
- meta元素的属性（meta元素在head元素下）
- charset属性
- 网页的字符集编码
- 例：
<meta charset="UTF-8" />