html中的基本标签

Day 01学习笔记

一、讲在前面的知识

1.1 前端开发工程师在整个开发流程中的位置

• 产品经理：提需求
• UI设计师
• 前端设计师
• 后端工程师
• 测试工程师

1.2 前后端开发

• 前端：也叫客户端
• 后端：也叫服务端

1.3软件结构

• B/S：浏览器/服务器 客户端设备上有浏览器就可以

​ 优点：免安装，更新更及时

​ 缺点：没一次需要现下载代码，速度较c/s慢

• C/S:客户端/服务器 需要在客户端设备上安装客户端软件

​ 优点：速度快

​ 缺点：

1.4前端的技术

• html 结构
• css 样式
• javascript 行为

二、课程体系

• html和css样式JavaScript(基本语法，DOM操作，高级部分)
• JQuery.Bootstrap,PC项目
• 工程化的操作（Git，Node,模块化，webpack）
• Vue
• React
• 小程序

1.前端开发工具

1.1 代码编辑工具（代码编辑器）

vscode

1.2代码运行环境（代码运行工具）

chrome

html文件中主要由html标签组成

三、基本语法

3.1关于标签

• 也叫元素

• 不同的标签具有不同的语义，决定了标签的功能以及用在哪个位置

• 分为单标签和双标签

  <p>内容</p>
  <hr>
  或<hr/>
  

• 标签名不区分大小写

• 标签具有属性，通过标签可以设置标签的相关功能

<font color="" size=" ">内容</font>

** 掌握一个HTML标签，掌握以下3点**

1.标签的语义和功能

2.标签具有哪些属性，以及属性的值怎么设置

3.单标签还是双标签

3.2注释

<!--注释内容-->
<!--
wjeroi 
erjiojer 
rjwr[ 
-->

注释的作用：

1.对某一部分的代码进行解释说明

2.调试代码时，可以将一部分代码暂时忽略掉

3.3文档声明

！<doctype html>

作用：告诉浏览器使用标准模式来解析代码

四、html标签

4.1主体结构标签

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

4.2head标签

标签名		属性	单标签还是双标签
title	页面标题		双
meta	设置网页元信息	charset属性：指定字符集编码 name属性：指定要设置的元信息，值如keywords,description content:与name属性配合 http-equiv数:与name属性类似	单
link	引入文档与外部资源的关系	rel属性：值：shortcut icon stylesheet href属性：指定外部资源的地址	单

meta设置网页元信息

<!--设置字符集编码-->
<meta charset="utf-8">
<!--设置关键字和描述信息 用于seo-->
<meta name="keywords" content="关键字1,关键字2">
<meta name="description" content="页面信息的描述">
<!--页面重新跳转，重定向-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

设置网页的标题图标

<link rel="shortcut icon" href="图标地址">

4.3格式排版标签

标签名	语义和功能	属性	单标签还是双标签
h1~h6	内容标题，支持1寄到6级		双
p	段落		双
hr	分割线		单
br	换行		单
pre	按原文显示		双
div	没有语义，用于页面布局		双

注意：格式排版标签重要的不是他们在浏览器上的表现样式

重要的是他们的语义，合理使用这些格式排版标签对于SEO是友好的

4.4文本标签

标签名	语义	属性	双标签还是单标签
em	强调，默认斜体		双
strong	强调（语气更强），默认粗体字		双
del	表示已删除的文本		双
ins	表示新添加的文本		双
sub	下标字		双
sup	上标字		双