目录
● HTML(HyoecIext Markup Language)超文本标记语言
一、 HTML概述
C/S结构（Client+Server）客户端+服务器：
需要在电脑上安装的重终端,qq,微信,腾讯会议要安装一个特定的客户端才能运行
B/S结构（Browserl+Server）浏览器+服务器：
百度,京东,腾讯新闻.…..浏览器输入网址访问网站
● HTML(HyoecIext Markup Language)超文本标记语言
文本：文字字符
超文本：网页内容
标记：标签、标识
html语言就是一种标记语言,提供许多的标签,不同的标签功能不同，网页就是通过这些标签描述出来的最终由浏览器解释运行成我们看到的网页
二、 HBuilderX 安装
● 下载地址
等待下载，下载下俩是一个压缩包文件，解压~然后打开
● 创建项目
文件 --- 新建 --- 项目
选择普通项目 ，创建基本HTML项目
三、 HTML基本语法
● 声明
html4的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5的文档声明
<!DOCTYPE html>
如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。
● Head标签
Head标签(标签)包含了所有的头部标签标签。
● 头部区域的标签标签为: <title>，<style>，<meta>，<link>，<script>
<title>标签：定义网页的标题
<meta> 标签：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签：位于文档的头部
<meta charset="utf-8" />
<link rel="icon" href="ico地址">：标题处添加图标
● 一个HTMl的基本结构
<!--
HTML的注释
-->
<!DOCTYPE html> <!-- 声明 HTML语言的版本信息，为html5版本，告诉浏览器以html5运行 -->
<html><!-- HTML标签是网页的根标签，所有的内容都应该卸载此标签中 -->
<head><!--头标签-->
<meta charset="utf-8" /> <!-- 网页字符集 -->
<meta name="keywords" content="家电，手机"/> <!-- 设置网页关键字，让搜索引擎能收到 -->
<title>我的第一张网页</title> <!-- 网页标题 -->
<link herf="img/baidu.ico" rel = "icon"/><!-- 网页题图 -->
<!-- 如果没有这张照片就现将这句删掉 -->
</head>
<body> <!-- 身体标签，用来写网页内容 -->
网页内容
</body>
</html>
记着写完之后要 Ctrl + s 保存 ，然后点击运行，随便选一个
PS：可以在设置里把失去焦点自动保存打开
结果：
● 标签
HTML中的标记指的就是标签，HTML使用标记标签来描述网页。
结构：
<标签名>标签内容</标签名> 闭合标签（有标签内容）
<标签名/> 自闭合标签（无标签内容）
<body> <!-- 身体标签，用来写网页内容 -->
网页内容<br />
<!--
标签结构 和 写法
1、<开始标签> </结束标签> 闭合标签（双标签）
2、完成一个特定的设置功能，没有标签体
<标签名 属性 = "" /> 自闭和标签（单标签）
<br/>换行标签
-->
<b>百度</b> <br/>新浪 <br />
</body>
● 标签属性
标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：<body text=”red”>
1.属性的格式 ：属性名 = “属性值“
2. 属性的位置： <标签名 属性名 = “属性值“ >xxx</标签名>
3. 添加多个属性： <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>
<body> <!-- 身体标签，用来写网页内容 -->
网页内容<br />
<!--
标签结构 和 写法
1、<开始标签> </结束标签> 闭合标签（双标签）
2、完成一个特定的设置功能，没有标签体
<标签名 属性 = "" /> 自闭和标签（单标签）
<br/>换行标签
-->
<b>百度</b> <br/>新浪 <br />
<!--
标签的属性：可以通过改变标签属性来改变原来的显示风格
属性写在标签的开始标签中
一个标签可以有多个属性
属性名 = " 值 "
-->
<font color="blue" size = "7">腾讯</font>
</body>
四、 基本常用标签
● 标题标签
标题标签<h1></h1>…..<h6></h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<body>
<!--标题标签 -->
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
</body>
● 段落标签
段落标签 <p></p>
换行标签 <br/>
<!-- 段落标签 -->
<p>日前，OpenAI 联合创始人、首席科学家 Ilya Sutskever 与 OpenAI 超级对齐团队共同领导人 Jan Leike 相继离开 OpenAI，
Leike 甚至在 X 发布了一系列帖子，称 OpenAI 及其领导层忽视安全而偏爱光鲜亮丽的产品。
这在业界引起了广泛关注，在一定程度上凸显了当前 AI 安全问题的严峻性。
</p>
<p>
5 月 21 日，图灵奖得主 Yoshua Bengio、Geoffrey Hinton 和姚期智联合国内外数十位业内专家和学者，
在权威科学期刊 Science 上刊文，呼吁世界各国领导人针对 AI 风险采取更有力的行动，
并警告说，“近六个月所取得的进展还不够”。
</p>
● 列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
<!-- 列表标签 -->
<!-- 有序列表 ,通过 ul分隔两个列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<!-- 无序列表 ,通过 ol分隔-->
<ol> <!-- 默认是从1开始编号 -->
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ol>
<ol type="A"> <!-- 通过英文字母 -->
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ol>
<ol type="I"> <!-- 通过罗马数字 -->
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ol>
● 超链接
超链接<a></a>标签：
HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。
<a href=“http://www.baiduc.om” target=“_blank”>百度</a>
<a href=“login.html” target =“_blank”>登录</a>
target:默认值为_self
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
URL(Uniform Resource Locator) 统一资源定位符
● 图片标签
<body>
<img src=“img/demo.jpg”width=“300”height=“150“border= ” 1 ”/>
</ body >
<body>
<!-- 超链接标签 -->
<!--
herf = "链接地址"
target : 默认值为 _self ； _blank 为新窗口打开
-->
<a href="http://www.baidu.com"> 百度（当前窗口打开） </a> <!-- 当前窗口打开 -->
<br />
<a href="http://www.baidu.com" target="_blank"> 百度（新窗口打开） </a> <!-- 新窗口打开 -->
<br />
<a href="index.html">首页</a>
<br />
<!-- 图片标签 -->
<a id="top"></a> <!-- 定义一个用于回到顶部的锚点 -->
<a href="#p1">图片1</a>
<a href="#p2">图片2</a>
<a href="#p3">图片3</a>
<a href="#p4">图片4</a>
<a href="#p5">图片5</a>
<!-- <a id="p1"> </a> 在网页中定义一个锚点-->
<h2><a id="p1"> 图片1 </a></h3>
<img src="img/1.png" />
<h2><a id="p2"> 图片2 </a></h3>
<img src="img/2.png" />
<h2><a id="p3"> 图片3 </a></h3>
<img src="img/3.png" />
<h2><a id="p4"> 图片4 </a></h3>
<img src="img/4.png" />
<h2><a id="p5"> 图片5 </a></h3>
<img src="img/5.png" />
<p align="right">
<a href="#top">返回顶部</a> <!-- 引用顶部的锚点 -->
</p>
</body>
五、 特殊符号转义
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。
为了可以使用这些预留字符，我们必须在html中使用字符转义。
小于号< ：<
大于号> ：>
空格 ：
版权(©) ：©
商标(™)：™
注册商标(®)：®
<body>
<p>
<!-- 小于号< --><
<!-- 大于号> -->>
<!-- 空格 -->
<!-- 版权 © -->©
<!-- 商标 ™ -->™
<!-- 注册商标 ® -->®
</p>
</body> 
六、 表格
表格的基本构成标签
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头
td标签：表格单元格
● 基本结构
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
<body>
<table border="1"> <!-- table表示一个表格 -->
<tr> <!-- 添加一行 -->
<th>姓名</th> <!-- th表示一个表头，内容会加粗且居中 -->
<th>Java</th>
<th>Python</th>
<th>C语言</th>
</tr>
<tr> <!-- 再添加一行 -->
<td>张三</td> <!-- td表示一个单元格 -->
<td>80</td>
<td>90</td>
<td>88</td>
</tr>
<tr> <!-- 再添加一行 -->
<td>李四</td>
<td>80</td>
<td>90</td>
<td>88</td>
</tr>
<tr> <!-- 再添加一行 -->
<td>王五</td>
<td>80</td>
<td>90</td>
<td>88</td>
</tr>
</table>
</body>
● 表格属性
width（宽）
height（高）
cellspacing（单元格边距（为 0时单元格之间无缝隙）
cellpadding（单元格内边距（为 0时数据顶格）
在单元格中使用
align（设置单元格内容水平对齐方式：center（居中）left（左）right（右））
valign（竖直方向：top（置顶）bottom（置底））
cospan（合并列）
rowspan（合并行）
<body>
<!--
快速生成4*4表格
table>tr*4>td*4
-->
<!--
合并列：colspan 从哪列开始，就在哪列添加colspan，然后删去当前行的其他单元格
合并行：rowspan 然后删去其他行对应列的单元格
-->
<table border="1" width="600" height="200">
<tr>
<td colspan="4"></td> <!-- 要将多余的删去 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- 删去这一格 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- 删去这一格 -->
</tr>
</table>
</body> 
● 练习
用HTML实现下列报表
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">财务报表</p>
<table border="1" cellspacing="0" align="center" height="" width="600">
<tr align="center">
<td colspan="2" >品牌</td>
<td colspan="3" >春装</td>
<td colspan="3" >夏装</td>
</tr>
<tr align="center">
<td colspan="2"></td>
<td>男装</td>
<td>女装</td>
<td>童装</td>
<td>男装</td>
<td>女装</td>
<td>童装</td>
</tr>
<tr align="center">
<td rowspan="2">价钱</td>
<td>牛仔系列</td>
<td>116</td>
<td>98</td>
<td>68</td>
<td>88</td>
<td>86</td>
<td>46</td>
</tr>
<tr align="center">
<td>休闲系列</td>
<td>120</td>
<td>100</td>
<td>80</td>
<td>98</td>
<td>88</td>
<td>50</td>
</tr>
</table>
</body>
</html>效果：
七、 表单
● form：表单
网页表单中有许多可以输入或选择的组件，用户可以在表单中填写信息，最终提交表单，把客户端数据提交至服务器。
<form action= “http://www.sohu.com”method= “post”>
……
</form>
● 表单-文本
<input type=“text name=“username” value=“张三” readonly=“readonly”
placeholder=“请输入” disabled=“disabled” >
● 表单-其它表单
• 密码框基本语法
<input type=“password ” value=“ 123456 ” />
<!--密码输入框-->
密码：<input type="password" name="密码">
<br />• 单选按钮基本语法
<input type="radio" value="男" checked="checked“/>
<!--单选按钮框-->
<!-- 注意：单选框通过name属性来分组，name相同是一组才可实现单选 -->
性别：
<input type="radio" name="性别" value="男" checked="男">男
<input type="radio" name="性别" value="男">女
<br />• 复选框基本语法
<input type=“checkbox” name="cb2“ value="talk“/>
注意：单选框通过name属性来分组，name相同是一组才可实现单选。单选和复选不能输入内容，所以必须指定value的值。
<!--复选框-->
科目：
<input type="checkbox" name="科目" value="语文">语
<input type="checkbox" name="科目" value="数学">数
<input type="checkbox" name="科目" value="英语">英
<input type="checkbox" name="科目" value="政治">政• 文件选择框语法
<input type=“file” name=“img”/>
accept=“.文件后缀名,.文件后缀名… “ 限制文件类型
● 表单-下拉框
<select name="bmon">
<option value=“” >选择省份</ option >
< option value=“100”>山西</ option >
< option value=“101” selected = ” selected ” >陕西</ option >
< option value=“102”>河南</ option >
</select>
下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。
● 表单-多行文本域
<textarea name= "textarea" cols= "40" rows= "6"> 文本域中的内容 </ textarea >
● 表单-按钮
<input type=“reset” value=“ 重填 ”> 重置表单内容
<input type=“submit” value=“提交”> 提交表单内容到服务器
<input type=“button” value=“按钮”> 普通按钮没有功能，只能被点击触发事件用
● 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="server.html" method="get">
<!--
单行文本输入框
属性：
name="account" 定义组件的名字 向后端提交用的
value=" " 组件的值
readonly 设置组件只读 不能修改 提交表单时可以被提交
placeholder="输入框提示词"
disabled 禁用组件 提交时不会提交内容到服务器
-->
账号：<input type="text" name="account" value="" placeholder="这是输入框的提示词"/>
<br />
<!--密码输入框-->
密码：<input type="password" name="密码">
<br />
<!--单选按钮框-->
<!-- 注意：单选框通过name属性来分组，name相同是一组才可实现单选 -->
性别：
<input type="radio" name="性别" value="男" checked="男">男
<input type="radio" name="性别" value="男">女
<br />
<!--复选框-->
科目：
<input type="checkbox" name="科目" value="语文">语
<input type="checkbox" name="科目" value="数学">数
<input type="checkbox" name="科目" value="英语">英
<input type="checkbox" name="科目" value="政治">政
<!-- 由于单选和多选框都不能输入值，所以必须指定value的值 -->
<br />
<!--文件选择框-->
文件选择：
<input type="file" name="file">
<br />
<!-- 下拉框 -->
省份：
<select name="province"> <!-- 省份 -->
<option >请选择</option>
<option value="101">北京</option> <!-- 最终提交选中的选项值 -->
<option value="102" selected>上海</option> <!-- 默认选择selected -->
<option value="103">广东</option>
<option value="104">深圳</option>
</select>
<br />
<!--
多行文本框
属性：
rows：行数
cols：每行的字数
-->
地址：
<textarea name="地址" cols="30" rows="3"></textarea>
<br />
<!-- 提交按钮 -->
<input type="submit" value="保存"/>
<!-- 重置按钮：回到默认值 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="登录" onclick="alert('你好')">
</form>
</body>
</html>