传智播客前端就业班学习笔记(标签)

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

视频:传智播客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> 兄弟姐妹

介绍几个常用标签

注释标签

<!-- CSDN专业IT社区 -->

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

换行标签

<body>
CSDN专业IT社区<br>
CSDN专业IT社区
</body>

加入br标签后浏览器效果

未加入br标签效果

下划线标签

<body>
CSDN专业IT社区<br>
CSDN专业IT社区
</body>

浏览器运行效果图

段落标签

<body>
<p>CSDN专业IT社区</p>
<p>CSDN专业IT社区</p>
</body>

浏览器运行效果图

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

标题标签(h1-h6)

<body>
<h1>CSDN专业IT社区</h1>
<h2>CSDN专业IT社区</h2>
<h3>CSDN专业IT社区</h3>
<h4>CSDN专业IT社区</h4>
<h5>CSDN专业IT社区</h5>
<h6>CSDN专业IT社区</h6>
</body>

浏览器运行效果图

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

<body>
<font size="3" color="red">CSDN专业IT社区</font><br>
<font size="2" color="blue">CSDN专业IT社区</font><br>
<font face="verdana" color="green">CSDN专业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>

浏览器运行效果图


注:推荐上述标签,标签名称具有语义化,方便记忆

sublime Text 3下载地址:链接:https://pan.baidu.com/s/12uWUOC8ZhAiT4dU7K7x3zA 密码:60pf







         


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页