传智播客前端就业班学习笔记（标签）

最新推荐文章于 2023-01-20 11:33:20 发布

原创最新推荐文章于 2023-01-20 11:33:20 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

这篇博客记录了前端学习过程，重点讲解了HTML、CSS和JS的标准以及它们在网页中的作用。HTML作为结构标准，CSS负责表现，JS实现行为。博客还介绍了HTML的常用标签，如注释、换行、标题等，并提到了代码编辑工具Sublime Text 3。

声明：此博客仅为记载前端学习之路上的心得体会。在记录的过程还会有许多不足之处，希望大家给出意见，一起交流进步。大佬勿喷。

视频：传智播客web前端14期（就业班）

工具：sublime text 3(文末附有下载地址)

接下来开始正题

首先web共有三个标准，它们分别为 html,CSS,JS

Html 结构标准相当于人的身体

CSS 表现标准相当于给人化妆，变得更漂亮

js 行为标准相当于人在唱歌，页面更灵动

HTML：超文本传输语言，通过浏览器向用户传达信息。

HML结构标准

<doctype html> 

<html>  
<head>  
<title></title> 
</head>
<body>  
</body>
</html>

其中：<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

<title>标签用于向用户显示浏览器标题

<body >元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTml标签分类
单标签:<!doctype html>
双标签：<html></html> <head></head> <title></tltle>
HTml标签关系分类
包含（嵌套关系） <head><title></tltle></head> 父子

并列关系 <head></head><bady></body> 兄弟姐妹

介绍几个常用标签

注释标签

<!-- 优快云专业IT社区 -->

浏览器不会显示注释标签中的内容。加注释是为了方便日后的代码管理，在以后的工作中给客户或管理人员观看。

换行标签

<body>
优快云专业IT社区<br>
优快云专业IT社区
</body>

加入br标签后浏览器效果

未加入br标签效果

下划线标签

<body>
优快云专业IT社区<br>
优快云专业IT社区
</body>

浏览器运行效果图

段落标签

<body>
<p>优快云专业IT社区</p>
<p>优快云专业IT社区</p>
</body>

浏览器运行效果图

特点：自动生成空白行。<br/>标签不会生成空白行

标题标签（h1-h6）

<body>
<h1>优快云专业IT社区</h1>
<h2>优快云专业IT社区</h2>
<h3>优快云专业IT社区</h3>
<h4>优快云专业IT社区</h4>
<h5>优快云专业IT社区</h5>
<h6>优快云专业IT社区</h6>
</body>

浏览器运行效果图

<font> 规定文本的字体、字体尺寸、字体颜色。

<body>
<font size="3" color="red">优快云专业IT社区</font><br>
<font size="2" color="blue">优快云专业IT社区</font><br>
<font face="verdana" color="green">优快云专业IT社区</font><br>
</body>

浏览器运行效果

文本格式化标签

<body>
<!-- 文本格式化标签 -->
<!-- 加粗标签：尽量使用strong -->
<strong>前端工程师</strong><br>
<b>前端工程师</b><br>
<!-- 文本倾斜标签：尽量使用em -->
<em>前端工程师</em><br>
<i>前端工程师</i><br>
<!-- 删除线标签：尽量使用del -->
<del>1680.3</del><br>
<s>1680.3</s><br>
<!-- 下划线标签：尽量使用ins -->
<ins>前端工程师</ins><br>
<u>前端工程师</u><br>
</body>

浏览器运行效果图