HTML基础知识

努力的IT小胖子
338 阅读10分钟

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

1.HTM L介绍 & 规范

1.1 介绍

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

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

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

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

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

  • 1.html标签它代表当前页面是一个HTML
  • 2.head标签中可以声明HTML页面的相关信息
  • 3.body标签中它主要是用于显示页面信息
  • 4.标签要有开始，有结束，成双成对
  • 4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭
  • 5.大多数标签它具有属性,属性值要使用引号引起来。
  • 6.HTML它本身是不区分大小写的。

1.3 下载和安装 VSCode

1.3.1 下载地址

code.visualstudio.com/

1.3.2 初始中文设置

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

image.png

点击安装后，右下角会弹出重启的窗口

image.png

1.3.3 创建项目

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

1.3.4 运行页面

需要安装插件 “open in browser ”

image.png

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

image.png

先安装好chrom e浏览器 修改默认的浏览器：首页的设置

image.png

image.png

添加代码

" open- i n- br ows er . def aul t " : " chr ome"

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

2.HTML的使用

2.1 文件标签

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

2.2 排版标签

2.2.1 HTM L注释

<!-- -->

2.2.2 换行标签

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

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:用于设置字的颜色

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它可以让我们在网页引入一张图片，常用属性：

  • src 代表的图片的路径
  • width 图片的宽度
  • height 图片的高度
  • border 用于设置图片的边框
  • alt 如果图片不可以显示时，默认显示的文本信息
  • title鼠标悬停图片上，默认显示的文本信息
  • align 图片附件文字的对齐方式，可取值有
  • left：把图像对齐到左边
  • right：把图像对齐到右边
  • middle：把图像与中央对齐
  • top：把图像与顶部对齐
  • bottom ：把图像与底部对齐（默认）

2.6 超连接标签

a标签,可以实现跳转到其它页面操作.

超链接内容不仅可以是文本，也可以是图片等信息 常用属性:

  1. href 代表的我们要跳转的路径
  2. target 这个属性规定在何处打开这个链接文档，可取值：
    • blank 在新窗口中打开页面
    • self 默认。在本窗口打开页面

功能性连接：

1.发邮件

<ahr ef =" mailto: sunguoan@163.com" >联系站长</ a>

2.QQ聊天窗口

<ahr ef =" tencent://message/?uin=19998539&Menu=yes" >
<img	border =" 0"	src=" http://wpa.qq.com/pa?p=1:615050000:7" / >
</ a>

2.7 表格

2.7.1 table：定义一个表格

  • border：边框，取值是像素为单位
  • width 代表的表格的宽度
  • align 代表表格的对齐方式；取值
  • left 左对齐表格
  • right 右对齐表格
  • center 居中对齐表格
  • cellspacing：单元格间距（通常设置0表示单线表格）

2.7.2 tr：表格中的行 （Table Row）

  • align 代表表格的对齐方式；取值
  • left 左对齐内容（默认值）
  • right 右对齐内容
  • center 居中对齐内容（th 元素的默认值）

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

  • colspan 指示列的合并
  • rowspan 指示行的合并
<tabl e	border =" 1"	width=" 400px "	align=" center " cellspacing=" 0" >
<tr align=" center" >
<td colspan=" 3" >计划统计表</ t d>
</tr>
<tr >
<td	rowspan=" 3" >收入金额</ t d>
<td>5</td>
<td>6</td>
</tr>
<tr >
<td>8</td>
<td>9</td>
</tr >
<tr >
<td>11</td>
<td>12</td>
</tr >
</table>

2.8 表单标签

表单可以让我们将录入信息携带到服务器端。 简单说，通过表单可以将要提交的数据提交到指定的位置。 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务 器。

2.8.1 for m 属性

  • action：整个表单提交的目的地
  • method：表单提交的方式
  • get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url
  • 后面会显示提交的数据，不适合用于登录）
  • post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交
  • 的数据）

2.8.2 表单中的元素(控件)

  • input元素的type属性

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

  • placeholder属性：提示文本

  • maxlength属性：最多能输入字符数量

  • password：密码输入框

  • checkbox：多选框/复选框

  • checked：被选中

  • radio：单选按钮

  • file：上传文件

  • reset：重置按钮

  • subm it：提交按钮

  • button：普通按钮

  • select：下拉列表/下拉框

  • option：列表中的项

  • selected：被选中

  • textarea：文本域（多行文本框）

          - 可以通过cols 和rows 属性来规定，textarea 的尺寸，不过更好的办法是使用	CSS 的height和width 属性。

  • button：按钮 在form 表单中，作用和subm it一样 不在form 表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

注意事项：

  1. 所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不 同）
  2. 单选框要想可以一次只选择一个，要具有相同的nam e值
  3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的nam e值

2.9 框架标签

通过和框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。

注意，框架标签和body标签不共存。“有你没我，有我没你”

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<frameset rows="10%,*,13%">
<frame src="top.html"></frame>
<frameset cols="15%,*">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
<frame src="foot.html"></frame>
</frameset>
</html>

2.10 其它标签与特殊字符

2.10.1 meta标签

meta标签必须写在head标签之间.

<meta	char set =" UTF- 8" >
<meta	name=" viewport" content =" width=device-width,initial-scale=1. 0" >
<meta	http-equiv="X-UA-Compatible"	content ="ie=edge" >
  1. 当前页面的字符编码 gbk：中文简体
  2. 这里的名字是viewport （显示窗口）,数据是文本内容content="width=device-width, initial-scale=1.0",也就是显示窗口宽度客户端的屏幕宽度（就是满屏 ！），显示的文字和图形的初始比例是1.0
  3. 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面
<meta	http-equiv="refresh"	content ="5;url =http://www.111.com" >

注意：在htm l中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。

2.10.2 link标签

后面我们会使用link标签来导入css 注意:link标签也必须写在标签中。

3. HTM L5新特性

3.1 HTM L4与HTM L5的区别

H5包含h4

    1. 大小写不敏感

    • (1) 标签
    • (2) 属性
    • (3) 属性的值
    1. 引号可省略
    1. 省略了结尾标签

3.2 新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此 新增许多语义化标签，让div“见名知意”

  • section标签：表示页面中的内容区域，部分，页面的主体部分
  • article标签：文章
  • aside标签：文章内容之外的，标题
  • header标签：头部，页眉，页面的顶部
  • hgroup标签：内容与标题的组合
  • nav标签：导航
  • figure标签：图文并茂
  • foot：页脚，页面的底部

3.3 媒体标签

想在网页上播放视频，就要使用video，属性有：

  • src：媒体资源文件的位置
  • controls：控制面板
  • autoplay：自动播放（谷歌失效，360浏览器可以）
  • loop：循环播放

3.4 新增表单控件

  • input，修改type属性：
  • color：调色板
  • date：日历
  • month：月历
  • week：周历
  • num ber：数值域
  • min：最小值（默认值是1）
  • max：最大值（默认值无上限）
  • step：递增量
  • range：滑块
  • search：搜索框（带×号，可一键删除框中内容）
  • progress:进度条
  • mark:高亮
  • datalist :联想输入框（模糊查询）
  • option:选项
avatar
文章
阅读
粉丝