前端HTML
一、HTML简介
1.什么是html
- HTML的全称为超文本标记语言(HTML
How To Make LoveHyperText 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代码。
- 优点:
- Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML、CSS 以及其他 Web 标准。(注:根据自身需求选择版本)
-
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 智能提示。
- 联想查询，查找高亮。
- 代码重构。
- 代码检查，快速修复。
- 代码调试。
- 代码结构快速浏览和定位。
- 代码折叠。
- 自动提示代码包裹或去除包裹。
- 优点:
- “最强大的HTML5编辑器”、"最Webstorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了Intelli IDEA强大的JS部分的功能。(注:根据自身需求选择版本)
- HBuilderX
-
HBuilderX 是由 DCloud 开发的一款轻量级但功能强大的前端集成开发环境（IDE），专为现代前端开发设计。它支持多种编程语言，包括 HTML、CSS、JavaScript、Vue.js、TypeScript 等，适合各种前端开发需求。HBuilderX 提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能，提高编码效率，并拥有丰富的插件市场，提供各种实用的插件，包括代码检查、版本控制、框架支持等。
-
主要特点和优势
- 多语言支持：HBuilderX 支持多种编程语言，适合各种前端开发需求。
- 高效的代码编辑：提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能。
- 丰富的插件生态：拥有丰富的插件市场，提供各种实用的插件。
- UniApp 支持：作为 UniApp 的官方开发工具，HBuilderX 为 UniApp 项目提供一流的支持。
- 跨平台开发：支持跨平台应用开发，可以一次编写，编译到 iOS、Android、Web 等多个平台。
-
二、HTML基础语法
1.认识HTML的基本结构
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
- 注意：HTML语言不区分大小写
1.1 基本结构中各标签的作用
- 声明此页面为HTML5页面，简称H5
<!DOCTYPE html>
- 根标签，元素囊括了页面中所有其它元素，整个页面只需一个
<html>
- 头标签，包含的是那些不用于展现内容的元素，如
title，link，meta等
<head>
- meta标签，存放的是与页面有关的元数据，不会显示到页面中，可以配置编码集
<meta charset="utf-8" />
- 标题标签，定义页面的标题
<title>
- 体标签，定义页面的内容
</body>
2.HTML常用标签
2.1标题标签
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
2.2段落标签
<p>段落标签</p>
2.3图片标签
//各属性含义：
//src：图片地址
//alt：当照片出错时，图片的替代文字
//title：鼠标悬停提示文字
<img src="img/a.jpg" alt="" title=""/>
注意：
图片资源的相对路径和绝对路径
1.相对路径：以当前页面所在的位置为基准，而且不能以 / 开始。
- . / 代表当前目录
- …/ 代表上一级目录
2.绝对路径：以最原始位置为基准
- 如果访问本机资源，以盘符开始
- 如果访问非本机资源，以网络协议开始
2.4换行标签
<br/>
2.5超链接标签
//href：链接跳转的目标路径
//target属性：
//target=_blank，在新窗口打开。表示在新窗口中打开该链接。
//target=_self，在当前窗口打开。
<a href="https://www.baidu.com" target="_self">跳转到百度</a>
使用超链接标签实现锚记效果，例如返回顶部等等功能
<h1 id="top">一级标题</h1> <a href="#top">返回顶部</a>
2.6 无序列表
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
2.7有序列表
<ol>
<li>喜羊羊</li>
<li>美羊羊</li>
<li>懒羊羊</li>
</ol>
2.8 表格标签
<table border="1">
<tr>
<th>第一行第一列</th>
<th>第一行第二列</th>
<th>第一行第三列</th>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
border：边框宽度
style="border-collapse: collapse;"相邻单元格共用一个边框
table：整个表格的最外层标签
tr：行标签
th：表格标题标签
td：列标签，一个td，就是一个单元格
表格合并
- colspan：合并列
- rowspan：合并行
<table border="1">
<tr>
<th colspan="2">第一行第一列</td>
<th>第一行第三列</td>
</tr>
<tr>
<td rowspan="2">第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
2.9表单标签
表单标签属性
- readonly： 不可编辑,但可以选择和复制;值可以传递到后台
- disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台
- checked： 设置单选按钮和复选按钮的默认选中项
- selected： 设置下拉列表option的默认选中项
- 注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
checked=“true”
checked=“checked”
checked
这三种写法的效果都是一样的。
- form标签
-
form是表单最外层标签。
-
action属性：提交服务器地址
-
method属性：提交方式：get、post
-
<form action="" method=""></form>
- 文本框
- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息
<input type="text" placeholder="用户名" value="zhangsan" />
- 密码框
<input type="password"/>
- 单选按钮
<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" value="0" checked="true"/>男
- 复选框
<input type="checkbox" name="like" value="0" checked="true" />苹果
<input type="checkbox" name="like" value="1" />香蕉
<input type="checkbox" name="like" value="2" />梨
- 下拉列表
<select name="country">
<option value="0" selected="true">中国</option>
<option value="1">日本</option>
<option value="2">韩国</option>
</select>
- 文件域
<input type="file" name="files" />
- 文本域
<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>
- 提交按钮
- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮
<input type="submit" value="提交" />
- 重置按钮
<input type="reset" value="重置" />
- 普通按钮
<input type="button" value="点击我">
<button>点击我</button>
3.容器标签
- div标签
- 可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。
<div>
<h1></h1>
</div>
- span标签
- 内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。
<span></span>
![[CSS3]百分比布局](https://i-blog.csdnimg.cn/img_convert/48e558efd47474a9ad03b7ffe2549e86.png)
