哔哔哔哔
注意到
敲黑板
集中
重点知识来了
抓住那个家伙
领到知识点
学习
笔记
HTML 和开发环境概述
HTML 标签组织页面内容
简单的 HTML 标签
HTML 和开发环境概述
HTML 概述
HTML即Hypertext Markup Language,英文名称为HyperText Markup Language,是制作网页的标准标记语言。
您可以使用 HTML 来构建自己的 WEB 站点。 HTML 在浏览器上运行,由浏览器解析。
超文本标记语言是标准通用标记语言下的一种应用,也是一种规范,一种标准,它使用标记符号来标记要显示的网页的各个部分。
但是需要注意的是,不同的浏览器对于同一个标签可能会有不同的解释,从而产生不同的显示效果。
HTML 的历史版本
HTML 1.0:1993 年 6 月作为互联网工程任务组 (IETF) 工作草案发布。
HTML 2.0:于 1995 年 11 月作为 RFC 1866 发布,并在 2000 年 6 月发布后宣布过时。
HTML 3.2:1997 年 1 月 14 日,W3C 推荐标准。
HTML 4.0:1997 年 12 月 18 日,W3C 推荐标准。
HTML 4.01(小改进):1999 年 12 月 24 日,W3C 推荐标准。
HTML 5:HTML5被公认为下一代Web语言,极大地增强了Web在富媒体、丰富内容、丰富应用方面的能力。 它被誉为最终将改变移动互联网的重要推动力。 不支持 Internet Explorer 8 和更早版本。
开发环境
高效的网页编辑器——VS code
微软在 2015 年 4 月 30 日的 Build 开发者大会上正式发布了 VS Code 项目:一个跨平台的源代码编辑器,用于在 Mac OS X、Windows 和 Linux 上编写现代 Web 和云应用程序。
VS Code 集成了现代编辑器应有的功能,包括语法高亮、可定制的热键绑定、括号匹配和代码片段收集。
HTML 标签组织页面内容
基本标签 html、head 和 body
标签位于标签之后html获取输入框的值,也称为根标签,用于告诉浏览器这是一个HTML文档。 标签标记了 HTML 文档的开始,标记了 HTML 文档的结束,它们之间是文档的结尾。 标题和正文内容。
标签用于定义HTML文档的头部信息,也称为头部标签。 它跟在标签后面,主要用于封装文档头部的其他标签,如、、、等,描述文档的标题和作者。 以及与其他文件的关系。
标签用于定义要在 HTML 文档中显示的内容。 所有在浏览器中显示的文本、图片、音频、视频等信息都必须位于标签中,标签中的信息最终展示给用户。
一个HTML文档只能包含一对标签,标签必须在标签内,在head标签之后,并与标签平行。
为了让HTML标签提供更多的信息,可以使用HTML标签的属性来设置,其语法格式为:
网络元素
整个HTML页面的代码结构如下:
实体标签元素分类
块元素又称为块级元素(block elements),与其对应的行内元素(inline elements),两者都是HTML规范中的概念。 大多数 HTML 元素被定义为块级元素或内联元素。 当浏览器显示时,块级元素通常在新行开始(和结束)。
块级元素
①总是换行开始;
②高度、行高、外边距、内边距均可控制;
③默认宽度是其容器的100%,除非设置了宽度。
④可以容纳行内元素和其他块元素
行内元素
①与其他元素在一条线上;
②高度、行高、外边距和内边距不能改变;
③width为其文字或图片的宽度,不可更改
④内联元素只能容纳文本或其他内联元素
公共块元素
◎ 表格——互动表格
◎ h1 – 标题
◎ h2 – 副标题
◎ h3 – 三级标题
◎ h4 – 4级标题
◎ h5 – 5级标题
◎ h6 – 6级标题
◎ hr – 水平分隔线
◎ ol – 排序表格
◎ p-段落
◎ div – 通用块级容器
普通内联元素
◎ br – 换行符
◎ i – 斜体
◎ img – 图片
◎ input——输入框
◎ 强——大胆强调
◎ sub – 下标
◎ sup – 上标
特殊字符表
十二进制色卡
简单的 HTML 标签
文档结构元素
为网页内容提供块级格式化的标签。当浏览器解析
选项卡,在新段落前插入一个空行。
标签,文本内容强制换行。
Tab,可以在页面中产生一条水平线,分隔文本区域的内容。
标题标签和文字装饰标签
标签(1≤n≤6)称为标题标签。 其中,元素的内容与默认文本的大小基本相同html获取输入框的值, , 和元素的内容比网页中文本的默认大小大, and 元素的内容更小。
文本装饰标签用于设置文本样式。 标签可以设置字体、字号和颜色; 标签用于使文本加粗; 标签用于以上标形式显示文本; 标签用于以下标形式显示文本; 标签用于实现斜体; 标签用于实现下划线。
超链接和目标属性
当浏览者点击一个链接时,他或她可以直接进入相应的网页、图片、文件或邮箱等资源。 当链接的文件类型是压缩文件时,会发生文件下载。 格式:
<a href=" " target=" ">链接内容
target用于指定链接页面的打开方式,取值如下:
1、_self为默认值,表示当前窗口是打开的
2. _blank表示打开一个新窗口
列表标签
无序列表的各个列表项之间没有顺序级别,它们是并行的。 语法格式如下:
有序列表是具有排序顺序的列表,每个列表项都按照一定的顺序定义。 有序列表的语法如下:
表格和表格
创建表的基本语法:
用于定义一个表,主要属性如下:
主要属性如下:
主要属性如下:
形式
表单字段
表单域主要用于收集网站访问者的信息,它们位于 和 标签之间。
表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框、文件选择框等元素。
表单字段需要使用属性名称(当元素不唯一时使用)或 id(当元素唯一时使用)以便表单处理程序通过名称获取元素值。
除了多行文本框和列表选择框,大部分表单域都是使用标签创建的,类型由type属性的值决定。
对于文本框等表单域,属性值用于设置默认值。
当表单域数量较多时,可以使用标签进行分组(内嵌标签呈现分组标题)
表单域代码
按钮控制
表单按钮有多种功能:可以用来提交表单,也可以用来清除或重置表单,也可以用来触发客户端脚本。 按钮分为提交按钮、重置按钮、图片按钮和普通按钮。
学了这么久
让我们做测验
让我们测试一下我们学到了什么
01
HTML5 之前的 HTML 版本是什么?
A、HTML 4.1
B、HTML 4
C、HTML 4.01
D、HTML 4.9
点击选项查看答案
ps:下篇预告:CSS样式基础,感谢观看