前端三剑客之HTML
前端HTML
一、HTML简介
1.什么是html
- HTML的全称为超文本标记语言(HTML How To Make Love HyperText Markup Language )，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
- HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面 [12]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML定义网页的结构
CSS样式定义了网页的样式
js定义了网页动态样式，动态资源
2.HTML的开发工具
-
Adobe Dreamweaver
- Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML、CSS 以及其他 Web 标准。(注:根据自身需求选择版本)
- 优点:
- 制作效率。
- 操控能力强。
- 网站管理迅速简单。
- 全面的 CSS 支持。
- 学习资源多，如 DW 社区。
- 缺点:
- 效果难以精确达到与浏览器一致的显示效果。。
- 不便监控生成干净准确的 HTML代码。
-
DevExtreme
-
DevExtreme 是高性能的HTML5,CSS和Java移动开发框架，可以直接在Visual studio集成开发环境，构建移动应用程序。从 Angular 和 React 到ASPNET MVC或 Vue，DevExtreme 包括一系列高性能和响应式 U| 小部件，用于传统的Web和下一代移动应用程序。目前，DevExtremeV19.1.6 全新发布，是Visual studio开发人员开发跨平台移动产品的首选工具。(注:根据自身需求选择版本)
-
JetBrains WebStorm
- “最强大的HTML5编辑器”、"最Webstorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了Intelli IDEA强大的JS部分的功能。(注:根据自身需求选择版本)
- 优点:
- 智能的代码补全，支持不同浏览器的提示。
- 代码格式化，规则自定义。
- HTML 智能提示。
- 联想查询，查找高亮。
- 代码重构。
- 代码检查，快速修复。
- 代码调试。
- 代码结构快速浏览和定位。
- 代码折叠。
- 自动提示代码包裹或去除包裹。
- HBuilderX
-
HBuilderX 是由 DCloud 开发的一款轻量级但功能强大的前端集成开发环境（IDE），专为现代前端开发设计。它支持多种编程语言，包括 HTML、CSS、JavaScript、Vue.js、TypeScript 等，适合各种前端开发需求。HBuilderX 提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能，提高编码效率，并拥有丰富的插件市场，提供各种实用的插件，包括代码检查、版本控制、框架支持等。
-
主要特点和优势
- 多语言支持：HBuilderX 支持多种编程语言，适合各种前端开发需求。
- 高效的代码编辑：提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能。
- 丰富的插件生态：拥有丰富的插件市场，提供各种实用的插件。
- UniApp 支持：作为 UniApp 的官方开发工具，HBuilderX 为 UniApp 项目提供一流的支持。
- 跨平台开发：支持跨平台应用开发，可以一次编写，编译到 iOS、Android、Web 等多个平台。
二、HTML基础语法
1.认识HTML的基本结构
示例代码：
- 注意：HTML语言不区分大小写
1.1 基本结构中各标签的作用
- 声明此页面为HTML5页面，简称H5
- 根标签，元素囊括了页面中所有其它元素，整个页面只需一个
- 头标签，包含的是那些不用于展现内容的元素，如 title，link，meta 等
- meta标签，存放的是与页面有关的元数据，不会显示到页面中，可以配置编码集
- 标题标签，定义页面的标题
- 体标签，定义页面的内容
2.HTML常用标签
2.1标题标签
一级标题标签
二级标题标签
三级标题标签
四级标题标签
五级标题标签
六级标题标签
2.2段落标签
段落标签
2.3图片标签
//各属性含义： //src：图片地址 //alt：当照片出错时，图片的替代文字 //title：鼠标悬停提示文字
注意：
图片资源的相对路径和绝对路径
1.相对路径：以当前页面所在的位置为基准，而且不能以 / 开始。
- . / 代表当前目录
- …/ 代表上一级目录
2.绝对路径：以最原始位置为基准
- 如果访问本机资源，以盘符开始
- 如果访问非本机资源，以网络协议开始
2.4换行标签
2.5超链接标签
//href：链接跳转的目标路径 //target属性： //target=_blank，在新窗口打开。表示在新窗口中打开该链接。 //target=_self，在当前窗口打开。 跳转到百度
使用超链接标签实现锚记效果，例如返回顶部等等功能
一级标题
返回顶部2.6 无序列表
- 张三
- 李四
- 王五
2.7有序列表
- 喜羊羊
- 美羊羊
- 懒羊羊
2.8 表格标签
第一行第一列 第一行第二列 第一行第三列 第二行第一列 第二行第二列 第二行第三列 第三行第一列 第三行第二列 第三行第三列 border：边框宽度
相邻单元格共用一个边框
table：整个表格的最外层标签
tr：行标签
th：表格标题标签
td：列标签，一个td，就是一个单元格
表格合并
- colspan：合并列
- rowspan：合并行
第一行第一列 第一行第三列 第二行第一列 第二行第二列 第二行第三列 第三行第二列 第三行第三列 2.9表单标签
表单标签属性
- readonly： 不可编辑,但可以选择和复制;值可以传递到后台
- disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台
- checked： 设置单选按钮和复选按钮的默认选中项
- selected： 设置下拉列表option的默认选中项
- 注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
checked=“true”
checked=“checked”
checked
这三种写法的效果都是一样的。
- form标签
-
form是表单最外层标签。
-
action属性：提交服务器地址
-
method属性：提交方式：get、post
- 文本框
- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息
- 密码框
- 单选按钮
女 男
- 复选框
苹果 香蕉 梨
- 下拉列表
中国 日本 韩国- 文件域
- 文本域
--这里输入个人简介--
- 提交按钮
- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮
- 重置按钮
- 普通按钮
点击我
3.容器标签
- div标签
- 可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。
- span标签
- 内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。
- 内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。
- span标签
- 可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。
- div标签
- 普通按钮
- 重置按钮
- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮
- 提交按钮
- 文本域
- 文件域
- 下拉列表
- 复选框
- 单选按钮
- 密码框
- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息
- 文本框
-
- form标签
- 注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
- 体标签，定义页面的内容
- 标题标签，定义页面的标题
- meta标签，存放的是与页面有关的元数据，不会显示到页面中，可以配置编码集
- 头标签，包含的是那些不用于展现内容的元素，如 title，link，meta 等
- 根标签，元素囊括了页面中所有其它元素，整个页面只需一个
- 声明此页面为HTML5页面，简称H5
- 注意：HTML语言不区分大小写
-
-
- HBuilderX
- 优点:
- “最强大的HTML5编辑器”、"最Webstorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了Intelli IDEA强大的JS部分的功能。(注:根据自身需求选择版本)
- 优点:
- Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML、CSS 以及其他 Web 标准。(注:根据自身需求选择版本)
-
