HTML简介|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

标题：「前端与 HTML」第四届字节跳动青训营 - 前端专场

网址：live.juejin.cn/4354/yc_fro…

HTML的概念

HTML是一种超文本标记语言

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。

标记语言

由标签构成的语言。<标签名称> html，xml等

HTML结构

<!DOCTYPE html>                                    //决定版本
<html>
<head>                                            //头标签用户不需要看到
	<meta charset="utf-8">
	<title></title>
</head>
<body>                                            //体标签展示给用户
	<h1>dom 你好</h1>
</body>
</html>

文件标签：构成html最基本的标签

html:html文档的根标签
head：头标签。用于指定html文档的一些属性(引入外部的资源)
title：标题标签。
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

文本标签：和文本有关的标签

注释：<!-- 注释内容 -->
<br>：换行标签
<h1> to <h6>：标题标签
h1~h6:字体大小逐渐递减
<p>：段落标签
<hr>：展示一条水平线

属性定义：

1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：
    0~255  如  rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。
     如： #FF00FF
 width：
数值：width='20' ,数值的单位，
      默认是 px(像素)
2. 数值%：占比相对于父元素的比例

DOM树

用来识别标签的属性值方便控制和调整

graph TD
 document --> html-->head & body
 head --> meta & title
 body --> h1 & p

让我们来写一个小网页吧

<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<title>HTML新手上路</title>
</head>
<body>
	<h1>
		菜鸟的定义
	</h1>
	<hr color="yellow">
<p>
	<font color="red">"菜鸟"</font>是一个<b><i>网络用语</i> </b>，一指<b>新手 </b>，二指在某方面应用<b>水平较低者</b>。
</p>
<p>
	某个人刚刚加入某个团队，或某个组织刚刚进入某个行业，适应环境，接受新的事物，都是需要一个过程的，处在这个过程阶段的人或组织，就叫菜鸟。
</p>
<hr color="blue">
<footer>
	<font color="gray">
		<center>
			江傲寒<br>第一次开发
		</center>
			
	</font>

</footer>
</body>
</html>

如图为展示效果