• 03.模块一 前端基础html、css、js

    文章目录

    HTML 详解

    • ---- 老孙

    • 课程目标

      • 1 、HTML 介绍与规范

      • 2 、HTML 的使用

      • 3 、HTML5新特性

    1.HTML介绍 & 规范

    1.1 介绍

    • HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)

    • 专门制作网页的计算机语言

    • 普通的文本就是英文单词，英文字母一样的存在。

    • 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。

    • 比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，

    • 普通人是没有执法权的。

    • 字母img只是普通的字母，没什么特殊的含义。而被加上尖括号后，在网页的世界中，就具备了

    • 显示图片的作用。

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

    • 在计算机任意的位置，创建一个空白的记事本

    • 重点：文件的后缀名必须是 “htm” 或 “html”

    • 鼠标右键文件，选择打开方式为"记事本"，输入下面代码

    • 保存文件，双击文件会以计算机默认的浏览器运行，你的第一个网页就制作完成了！

    • 注意：

      1.标签它代表当前页面是一个HTML

      2.标签中可以声明HTML页面的相关信息

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

      3.标签中它主要是用于显示页面信息

      4.标签要有开始，有结束， 成双成对

      4.开始标签与, 结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭

      5.大多数标签它具有属性,属性值要使用引号引起来。

      6.HTML它本身是不区分大小写的。

    1.3 下载和安装 VSCode

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

    1.3.1 下载地址

    • https://code.visualstudio.com/

    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

    在这里插入图片描述

    • 老孙在这里推荐使用chrome谷歌浏览器，精简，速度快。

    • 先安装好chrome浏览器

    • 修改默认的浏览器：首页的设置
      在这里插入图片描述
      在这里插入图片描述

    • 添加代码

      "open-in-browser.default":"chrome"

      • 1

    • 保存成功后，使用默认浏览器打开页面就是chrome了，当然你也可以修改成自己喜欢的浏览器，比如火狐等

    • 打开网页乱码可能是：
      在这里插入图片描述

    1.3.5 修改软件主题颜色

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

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

    2.HTML的使用

    2.1 文件标签

    • 标签： 代表当前书写的是一个HTML文档

    • 标签：存储的本页面的一些重要的信息，它不会显示

    • 标签：有一个子标签它是用于定义页面的标题的

    • 标签：书写的内容会显示出来

    • \ 标签的属性

      1. text 用于设置文字颜色

      2. bgcolor 用于设置页面的背景色

      3. background 用于设置页面的背景图片
        在这里插入图片描述

    2.2 排版标签

    2.2.1 HTML注释

    在这里插入图片描述

    2.2.2 换行标签


    • 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。

    • 有/是html语言的标准化，但是html语言是一门不那么严谨的语言

    2.2.3 段落标签

    • 在

      标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.

    • 常用属性 align 它的作用是设置段落中的内容对齐方式 可取值有 left right center

    在这里插入图片描述

    2.2.4 水平线标签

    • 标签会在页面上产生一个水平线

    • 对于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：局部划分
        在这里插入图片描述

    • 上图，两个div的区别是显而易见的，后面我们再具体学习css语法

    2.3 字体标签

    2.3.1 字体标签

    • 标签可以设置字体，字的大小及颜色，常用属性：

    • face:用于设置字体，例如 宋体 隶书 楷体

    • size:用于设置字的大小（大小默认设置1-7， 7 最大，想更大，往后学css即可）

    • color:用于设置字的颜色

    • 注：

      • 我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。

      • 每一种颜色的饱和度和透明度都是可以变化的，用 0 ～ 255 的数值来表示。如纯红色表示为（ 255 ， 0 ，0 ），十六进制表示为#FF0000。

      • 按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。

      1. 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可简化成 #c30 这种方式

        <body bgcolor="#666">

        • 1

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

        <body bgcolor="#666">

        • 1

      • （在线颜色选择器： http://www.86y.org/code/colorpicker/color.html ）
        在这里插入图片描述

      • 百度搜索：字魂网，下载一个免费的字体，并安装到计算机中。在我们的网页中显示出来！

    2.3.2 标题标记

    • 给一段文字起一个标题

    • -----

      • h1最大 h6最小，它们代表的是标题，

      • 自动换行，字体加粗，标题与标题之间产生一定的距离

      • 注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

    在这里插入图片描述

    2.3.3 格式化标签

    • ：字体加粗

    • ：字体倾斜

    • ：删除线

    • ：下划线
      在这里插入图片描述

    2.4 列表标记

    • ol：有序列表

      • type=‘A’：字母排序

      • type=‘I’：罗马排序

      • start=“3” 序列从几开始

    • ul：无序列表

      • type=“disc”：默认，实心圆

      • type=“square”：方块

      • type=“circle”：空心圆

    在这里插入图片描述

    2.5 图像标签

    • 它可以让我们在网页引入一张图片，常用属性：

    1. src 代表的图片的路径

    2. width 图片的宽度

    3. height 图片的高度

    4. border 用于设置图片的边框

    5. alt 如果图片不可以显示时，默认显示的文本信息

    6. title鼠标悬停图片上，默认显示的文本信息

    7. align 图片附件文字的对齐方式，可取值有

      • left：把图像对齐到左边

      • right：把图像对齐到右边

      • middle：把图像与中央对齐

      • top：把图像与顶部对齐

      • bottom：把图像与底部对齐（默认）

    在这里插入图片描述

    2.6 超连接标签

    在这里插入图片描述

    2.7 表格

    • ：定义一个表格

    • border：边框，取值是像素为单位

    • width 代表的表格的宽度

    • align 代表表格的对齐方式；取值

    • left 左对齐表格

    • right 右对齐表格

    • center 居中对齐表格

    • cellspacing：单元格间距（通常设置 0 表示单线表格）

      • ：表格中的行 （Table Row）

    • align 代表表格的对齐方式；取值

    • left 左对齐内容（默认值）

    • right 右对齐内容

    • center 居中对齐内容（th 元素的默认值）

      • ：表格中的数据单元格 （Table DataCell）

    • colspan 指示列的合并

    • rowspan 指示行的合并
      在这里插入图片描述

      • <table border="1" width="400px" align="center" cellspacing="0">
	<tr align="center">
		<td colspan="3">计划统计表td>
	tr>
	
	<tr>
		<td rowspan="3">收入金额td>
		<td>5td>
		<td>6td>
	tr>
	
	<tr>
		<td>8td>
		<td>9td>
	tr>
	
	<tr>
		<td>11td>
		<td>12td>
	tr>
table>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

      2.8 表单标签

      • 表单可以让我们将录入信息携带到服务器端。

      • 简单说，通过表单可以将要提交的数据提交到指定的位置。

      • 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务 器。

      • 常见的 登录页面、注册页面 都离不开表单的应用
        在这里插入图片描述

      2.8.1 form属性

      • action：整个表单提交的目的地

      • method：表单提交的方式

        • get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url 后面会显示提交的数据，不适合用于登录）

        • post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

      2.8.2 表单中的元素(控件)

      • 元素的type属性

        • text：默认值，普通的文本输入框

          	 placeholder属性：提示文本
	
	 maxlength属性：最多能输入字符数量

          • 1
          • 2
          • 3

        • password：密码输入框

        • checkbox：多选框/复选框

          checked：被选中

          • 1

        • radio：单选按钮

        • file：上传文件

        • reset：重置按钮

        • submit：提交按钮

        • button：普通按钮