前端基础-第三阶段模块一_前端第三阶段-CSDN博客

本文链接：https://blog.csdn.net/qq_26533003/article/details/120713492

1.HTML介绍 & 规范

1.1 介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在。
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，
普通人是没有执法权的。
字母img只是普通的字母，没什么特殊的含义。而<img>被加上尖括号后，在网页的世界中，就具备了
显示图片的作用。

1.2 使用记事本开发第一个网页

在计算机任意的位置，创建一个空白的记事本
重点：文件的后缀名必须是 "htm" 或 "html"
鼠标右键文件，选择打开方式为"记事本"，输入下面代码

<html>
    <head>
        <title>拉钩有我</title>
    </head>
    <body>
        必须火！
    </body>
</html>

保存文件，双击文件会以计算机默认的浏览器运行，你的第一个网页就制作完成了！
注意：
1.<html>标签它代表当前页面是一个HTML
2.<head>标签中可以声明HTML页面的相关信息
3.<body>标签中它主要是用于显示页面信息
4.标签要有开始，有结束，成双成对
4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭<br/>
5.大多数标签它具有属性,属性值要使用引号引起来。
6.HTML它本身是不区分大小写的。

1.3 下载和安装 VSCode

记事本编写网页太难了，我们推荐一款编写网页的神器！

1.3.1 下载地址

Visual Studio Code - Code Editing. Redefined

1.3.2 初始中文设置

安装vscode之后，在界面的左侧，选择安装中文插件。

1.3.3 创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如: vscode目录
然后打开vscode软件，在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹
右键目录，创建子目录lagou-html，在lagou-html目录下创建文件，输入Test1.html
在代码编辑区，最上面输入！回车，就是见证奇迹的时刻

1.3.4 运行页面

需要安装插件 “open in browser ”
安装完插件，右键想要运行的页面文件，或者使用快捷键 alt+b

1.3.5 修改软件主题颜色

文件 -> 首选项 -> 颜色主题

字体大小：文件 -> 首选项 -> 设置 -> 文本编辑器 -> 字体

2.HTML的使用

2.1 文件标签

<html> 标签：代表当前书写的是一个HTML文档
<head>标签：存储的本页面的一些重要的信息，它不会显示
<head>标签：有一个子标签<title>它是用于定义页面的标题的
<body>标签：书写的内容会显示出来
<body>标签的属性
1. text 用于设置文字颜色
2. bgcolor 用于设置页面的背景色
3. background 用于设置页面的背景图片

2.2 排版标签

2.2.1 HTML注释

2.2.2 换行标签

<br/> 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。
有/是html语言的标准化，但是html语言是一门不那么严谨的语言

2.2.3 段落标签

在<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.
常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right center

2.2.4 水平线标签

<hr>标签会在页面上产生一个水平线
对于hr标签它有常用属性:
align：可取值有left right center 代表水平线位置
size：代表水平线厚度（粗细）
width：代表水平线宽度
color：水平线的颜色

单位：size="5"，5是默认的单位，为"像素"/"像素点"，像素就是构成计算机图片的最小单位！
也可以使用百分比，size="50%"

2.2.5 分区标签

div是一个块标签，用来进行布局的
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版
div与span都是“容器”的作用，具体区别:
div会自动换行，我们也叫这样的标签为块级元素
span标签它不会自动换行，我们也叫它为行内元素
div：整体划分区块
span：局部划分

2.3 字体标签

2.3.1 字体标签

font>标签可以设置字体，字的大小及颜色，常用属性：
face:用于设置字体，例如宋体隶书楷体
size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）
color:用于设置字的颜色
注：
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0，
0），十六进制表示为#FF0000。
按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。
1. 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可简化成 #c30 这种方式

2. RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓

（在线颜色选择器： http://www.86y.org/code/colorpicker/color.html ）

2.3.2 标题标记

给一段文字起一个标题
<h1> ----- <h6>
h1最大 h6最小，它们代表的是标题，
自动换行，字体加粗，标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

2.3.3 格式化标签

<b>：字体加粗
<i>：字体倾斜
<del>：删除线
<u>：下划线

2.4 列表标记

ol：有序列表
type='A'：字母排序
type='I'：罗马排序
start=“3” 序列从几开始
ul：无序列表
type="disc"：默认，实心圆
type="square"：方块
type="circle"：空心圆

2.5 图像标签

<img>它可以让我们在网页引入一张图片，常用属性：
1. src 代表的图片的路径
2. width 图片的宽度
3. height 图片的高度
4. border 用于设置图片的边框
5. alt 如果图片不可以显示时，默认显示的文本信息
6. title鼠标悬停图片上，默认显示的文本信息
7. align 图片附件文字的对齐方式，可取值有
left：把图像对齐到左边
right：把图像对齐到右边
middle：把图像与中央对齐
top：把图像与顶部对齐
bottom：把图像与底部对齐（默认）