Day01_HTML课堂笔记

最新推荐文章于 2021-09-11 20:34:19 发布

人生本该如此

最新推荐文章于 2021-09-11 20:34:19 发布

阅读量76

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_48733024/article/details/119186210

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

Day01 HTML 课堂笔记

3 Markdown 的用法

3.1 markdown 格式

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

* 列表项
* 列表项
* 列表项


```
代码块中的内容
代码块中的内容
```

文本中需要**强调**的内容

3.2 typora - markdown 编辑工具

1. 视图 -> 源代码模式
2. 视图 -> 大纲

4 HTML 基本语法

4.1 HTML 文件

html 代码写在 html 类型的文件中
html 类型的文件使用代码编辑工具（NodePad++）进行代码编辑，使用浏览器运行代码

4.2 文档声明

<!doctype html>

文档声明的作用： 让浏览器使用标准模式渲染页面！

4.3 HTML 标签

1. HTML 标签分为双标签和单标签； 单标签中的 / 可以省略
2. HTML 标签不区分大小写，建议小写
3. HTML 标签具有语义，决定该标签的功能，决定什么地方使用什么标签
4. 标签之间（双标签的开始标签和结束标签之间）可以包裹文本内容也可以包裹其他标签; 被嵌套的标签注意缩进！

<meta charset="utf-8">
<meta charset="utf-8" />

<title>标题内容</title>
<TITLE>标题内容</TITLE>

<div>
    <h1>文本内容</h1>
    <div>
        <div></div>
    </div>
</div>

4.4 标签的属性

1. 不同的标签具有不同的属性
2. 属性由属性名和属性值组成，属性值可以使用单引号或双引号包裹，也可以不使用引号包裹.
3. 属性同样不区分大小写
4. 同一个标签不要设置相同的属性，会导致后面的设置无效

<font color="red" size="6">锄禾日当午</font>
<font color='red' size="6">锄禾日当午</font>
<font color=red size=6>锄禾日当午</font>

<FONT COLOR="green" size="5">汗滴禾下土</FONT>

<font color="green" size="5" color="yellow">汗滴禾下土</font>

4.5 如何掌握一个 HTML 标签

1. 该标签的语义、功能
2. 该标签有哪些属性以及属性的值如何设置
3. 该标签是单标签还是双标签

4.6 HTML 注释

什么是注释？

注释就是对代码的注解和说明，浏览器不会被注释的内容进行解析，也不会显示在页面中；注释是给开发者用的。

注释有什么作用？

对代码进行解释说明。
暂时不需要执行的代码可以注释掉。

HTML 中注释的语法：

<!-- 注释的内容 -->
<!--
	注释的内容
	注释的内容
-->

4.7 基本页面模板

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面基本模板</title>
	</head>
	<body>
		
	</body>
</html>

5 HTML 标签总结

5.1 主体结构标签

标签名	语义和功能	单标签还是双标签
html	页面根标签	双标签
head	页面头部	双标签
body	页面主体	双标签

5.2 HEAD 中的标签

标签名	语义和功能	属性	单标签还是双标签
meta	设置页面元信息	charset：设置字符集编码，值： utf-8、gbk、gb2312	单标签
title	设置标题栏标题		双标签

5.3 格式排版标签

标签名	语义和功能	单标签还是双标签
h1 ~ h6	一级标题 ~ 六级标题	双标题
p	段落	双标签
hr	分隔线	单标签
br	换行	单标签
pre	原样格式显示	双标签
div	没有语义	双标签

任务作业

1. 整理笔记 梳理今日知识点
2. 课堂案例
3. 作业
   自我介绍的小网页

人生本该如此

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day01_HTML课堂笔记

Day01 HTML 课堂笔记3 Markdown 的用法3.1 markdown 格式# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题* 列表项* 列表项* 列表项```代码块中的内容代码块中的内容```文本中需要**强调**的内容3.2 typora - markdown 编辑工具1. 视图 -> 源代码模式2. 视图 -> 大纲4 HTML 基本语法4.1 HTML 文件htm
复制链接

扫一扫