全栈：前端第一天_前端框架设计课程开学第一课-优快云博客

本文链接：https://blog.youkuaiyun.com/Jourkern/article/details/141847663

一、前端的第一课

二、前端开发的结构

即学习 HTML代码，CSS定位， JS 就是前端学习的重中之重！

三、现在重新来声明什么是HTML

HTML是一种标记语言，并不是一种编程语言

那么何为HTML标记语言

以标签分类：

是开始标签，也称开放标签是结束标签，也称闭合标签

四、HTML的开始

首先认识HTML最基础的框架

初识标签

标题标签，作为网页标题，有h1-h6，大小随等级逐级减小

一、前端的第一课

认识什么是HTML:

作为互联网开发的两个重要分支之一，前端与后端的开发一直都是缺一不可

相较于后端的数据开发和数据网络，前端设计的主要项目在于页面开发，UI交互界面的设计开发等，简单直白的就是人与界面的交互设计。

二、前端开发的结构

前端开发的结构总共有三层：

1.结构层：（文字图片，音视频，表格等）这部分可以概括为HTML的主体代码。

2.表现层：（定义结构层的内容如何显示）该部分为CSS定位

3.行为层：（用户与应用中元素的交互）该部分为JavaScript。

所以学习前端的具体流程就是学习搭建HTML主体来显示内容，通过css定位等来增加表现样式，通过JavaScript来进行动效的进行和交互的完成。

即学习 HTML代码，CSS定位， JS 就是前端学习的重中之重！

三、现在重新来声明什么是HTML

HTML是一种标记语言，并不是一种编程语言

HTML的中文解析为 超文本（HyperText）标记（Markup）语言（Language）是一种用于创建网页的标准标记语言，运行在浏览器上，一般以.html作为后缀拓展名。（早年的前端代码或许是以.htm结尾的，这是因为计算机的位数不同和当时技术落后的原因。）

那么何为HTML标记语言

HTML标记语言实际上是一套标记标签，或者可以称为HTML标签。其有一个特点就是常常成对出现在代码格式中。（<html> </html>）

以标签分类：<html>是开始标签，也称开放标签 </html> 是结束标签，也称闭合标签

而HTML网页包含了HTML标签以及文本内容 <开始标签> 文本内容 </结束标签>

<h1>这是一个标题标签内的文本内容<h1>

四、HTML的开始

首先认识HTML最基础的框架

<!DOCTYPE html>
<!-- 这是声明网页的编码格式为html  -->

<html>
    <!-- 这是网页的根标签 -->

    <head>
        <!-- 这是头部标签 -->
    </head>

    <body>
    <!-- 这是主体标签     -->
    </body>
    
</html>

作为html的主体框架，其开头需要先定义声明该文档的编码格式,

拆解为 < ! （表示强调）DOC（文档）TYPE（类型） html（声明html格式）

<head>是网页的头部标签，包含了各种给浏览器看的元数据

<body>是网页的主体标签，包含了内容，文字，图片，音视频等等

初识标签

<title> 网页标签，作为显示网页上方小窗口标签

<head>
    <!-- 这是头部标签 -->
    <title>这是title标签</title>
</head>

<h> 标题标签，作为网页标题，有h1-h6，大小随等级逐级减小

<body>
    <!-- 这是主体标签     -->
    <h1>这是各级标题标签</h1>
    <h2>这是各级标题标签</h2>
    <h3>这是各级标题标签</h3>
    <h4>这是各级标题标签</h4>
    <h5>这是各级标题标签</h5>
    <h6>这是各级标题标签</h6>
    <h7>这是各级标题标签</h7>
</body>

从图片中可以看到从h1-h6都是遵循规律逐级变小，而h7的格式却不同。

h1-h6 和h7的区别

可以看到h1的标签自带各种样式，这种格式包括了h1-h6都自带有样式。

而从这里看到h7标签并不自带有各种样式，可以个人定义样式。

<p> 段落标签，作为段落文本使用

    <p>这是一个段落标签的演示</p>

段落标签并没有特殊的格式，可以在开始标签内定义属性值

一些属性标签

    <b>字体加粗</b><br>
    <i>字体倾斜</i><br>
    <u>下划线</u><br>
    <strong>表示语气上的加重，形式上的加粗，用于网页阅读</strong><br>
    <em>表示语气上的加重，形式上的倾斜，用于网页阅读</em><br>
    <ins>下划线，插入文本</ins><br>
    <s>表现为横线文本，英文全称为strike</s><br>
    <del>表现为删除线</del><br>
    <small>字体缩小</small><br>
    <span>上标<sup>上标</sup></span>
    <span>下标<sub>下标</sub></span>

一些功能标签

<br> 强制换行标签,类似于回车

<nobr> 强制不换行标签，打断自动换行

<hr> 分割线

五、行标签（行内标签）和块标签

标签也分为两种格式：

块标签：元素独占一行/块，前后元素自动换行。（h标签， p标签）
行内标签：元素在一行内显示，直到当前行被占满，前后元素不会自动换行（b标签， u标签，，i 标签等）

六、HTML头部中的补充内容

<head>包含了所有的头部标签元素，在<head>中可以插入：脚本（Script），样式文件（CSS），以及各种meta信息。

title	1.定义不同的文档的标题 2.显示在搜索引擎结果页面的标题 3.添加书签时，默认的标题
meta	1.给HTML文档提供元数据，不会显示在客户端，但是会被浏览器解析 2.通常可以指定网页的描述（description）,关键词（keywords），作者（author）
base	为网页所有的链接设置默认URL
script	定义客户端的脚本文件
noscript	用于浏览器不支持脚本文件时替换内容
style	定义HTML文档的文件
link	1.定义文档和外部资源的关系（链接外部资源） 2.链接CSS文件 3.设置标题小图标

title标签在上面已经有所演示，下面是meta标签的用法：

<meta charset="utf-8">
<!--表明网页所用的字符集-->
<meta name="description" content="演示" />
<meta name="keywords" content="关键词" />
<meta name="author" content="Lou" />

对于script的演示如下：

编写一个脚本文件，可以在浏览器上方显示弹窗，而当禁用js时，noscript就可以在网页中显示你所定义好的文本内容。

	<script>
		window.onload = function () {
			alert("弹窗演示图")
		}
	</script>

	<noscript>
		<h2>这是一个弹窗，被禁用了</h2>
	</noscript>

style标签用于定义内部样式，下列定义了网页的主体显示部分是红色，该部分在CSS层叠样式表中会有具体的学习。

	<style>
		body 
        {
			background-color: red;
		}
	</style>

link标签（链接）中：

rel属性（relationship）：定义当前文档与被链接文档之间的关系

type属性：规定被链接文档的类型

href属性：定义链接文档的位置


	<link rel="stylesheet" type="text/css" href=" 样式表.css" />
	<link rel="shortcut icon" href=" 小图标" type="image/x-icon" />

全栈：前端第一天

一、前端的第一课

二、前端开发的结构

即学习 HTML代码 ，CSS定位， JS 就是前端学习的重中之重！

三、现在重新来声明什么是HTML

HTML是一种标记语言，并不是一种编程语言

那么何为HTML标记语言

以标签分类：<html>是开始标签，也称开放标签 </html> 是结束标签，也称闭合标签

四、HTML的开始

首先认识HTML最基础的框架

初识标签

<title> 网页标签，作为显示网页上方小窗口标签

<h> 标题标签，作为网页标题，有h1-h6，大小随等级逐级减小

h1-h6 和h7的区别

<p> 段落标签，作为段落文本使用

一些属性标签

一些功能标签

五、行标签（行内标签）和块标签

六、HTML头部中的补充内容

即学习 HTML代码，CSS定位， JS 就是前端学习的重中之重！