html 编译器
Hbuild 下载地址: HBuilderX-高效极客技巧
Hbuild 工具使用
新建 html 文件
html 基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。
你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,
<!DOCTYPE html> 告诉浏览器使用的html语言
< html> </html> 文件编译语言使html 语言
<head> </head> 头部元素包含关于文档的概要信息,也被称为元信息
<title> </title> 定义网页标题
<body> </body> 表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容
浏览器运行
html常用标签
<h>标签 ---- 标题标签
h1- h6 代表标题大小 h1 :代表 一级标题 h6 : 代表6级标题 数字越大标题显示越小
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
</body>
运行结果
换行标签
<p>标签 ---- 段落标签
<body>
<p>
TV动画《鬼灭之刃1:立志篇》的第1话-第5话整合而成的剧场版。</p><font color=#ff0000>显示换行</font> 主要讲述了鬼灭之刃的世界观,以及心地善良的男主卖炭的时候,家人全被恶鬼所杀,唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子,痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子,并遇到了自己的指引人帮助他前进。
</p>
</body>
运行结果
<br>标签 ---- 换行标签
<body>
<p>
TV动画《鬼灭之刃1:立志篇》的第1话-第5话整合而成的剧场版。<br/><font color=#ff0000>显示换行</font> 主要讲述了鬼灭之刃的世界观,以及心地善良的男主卖炭的时候,家人全被恶鬼所杀,唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子,痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子,并遇到了自己的指引人帮助他前进。
</p>
</body>
运行结果
<p>标签 与<br>标签相比 p标签会换行且空出整整一行,而 br标签简单的换行
注意的是: 如果只是无尽加空格,也只会空格一次
初始状态
运行结果
空格很多次
格式化标签
<strong>标签 ---- 加粗标签
<b>标签 ---- 加粗标签
<body>
<p>
<strong>TV动画《鬼灭之刃1:立志篇》</strong>的第1话-第5话整合而成的剧场版。
</p>主要讲述了<b>鬼灭之刃</b>的世界观,以及心地善良的男主卖炭的时候,家人全被恶鬼所杀,唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子,痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子,并遇到了自己的指引人帮助他前进。
</p>
</body>
运行结果
<em>标签 ---- 倾斜标签
<i>标签 ---- 倾斜标签
<body>
<p>
<em>TV动画《鬼灭之刃1:立志篇》</em>的第1话-第5话整合而成的剧场版。
</p>主要讲述了<i>鬼灭之刃</i>的世界观,以及心地善良的男主卖炭的时候,家人全被恶鬼所杀,唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子,痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子,并遇到了自己的指引人帮助他前进。
</p>
</body>
运行结果
<del>标签 ---- 删除线标签
<s>标签 ---- 删除线标签
<body>
<p>
<del>TV动画《鬼灭之刃1:立志篇》</del>的第1话-第5话整合而成的剧场版。
</p>主要讲述了<s>鬼灭之刃</s>的世界观,以及心地善良的男主卖炭的时候,家人全被恶鬼所杀,唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子,痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子,并遇到了自己的指引人帮助他前进。
</p>
</body>
<ins>标签 ---- 下划线标签
<u>标签 ---- 下划线标签
<body>
<p>
<ins>TV动画《鬼灭之刃1:立志篇》</ins>的第1话-第5话整合而成的剧场版。
</p>主要讲述了<u>鬼灭之刃</u>的世界观,以及心地善良的男主卖炭的时候,家人全被恶鬼所杀,唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子,痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子,并遇到了自己的指引人帮助他前进。
</p>
</body>
图片标签
基本格式
<img src ="想要放的图片" alt = "找不到图片显示的文字">
输入图片名字 记得要图片建包封装
img src 表示 图片来源 alt 表示找不到图片显示的文字
效果图
<img src ="想要放的图片" alt = "找不到图片显示的文字" title = "想要提示图片提示的文本">
效果图
<img src ="想要放的图片" alt = "找不到图片显示的文字" width = "填写宽度像素">
像素单位是px
height 填写高度像素 最好widt和height最好只填一个 它会按照比例等比缩放
<img src ="想要放的图片" alt = "找不到图片显示的文字" width = "填写宽度像素" height = "填写高度像素">
这样填容易导致图片变形(不知道图片比例情况下)
像素查找方法
右键图片---- 属性 ---- 详情信息 ---- 分辨率
超链接标签
基本格式
<a href="填写路径">此处必须填写超链接跳转文字 </a>
<body>
<p>
<a href="https://www.bilibili.com/bangumi/play/ep466761?bsource=baidu_aladdin">b站观看鬼灭之刃</a>
</body>
跳转超链接
注意这个打开此超链接会覆盖原有的旧IP地址
要想保留原有旧ip地址 就需要引用 target = "_blank"
跳转超链接
禁止跳转链接
<a href="javascript:void(0);"> 或者 <a href="javascript:;">
路径空值跳转链接
a href="">空值</a>
两者区别
空值跳转 页面会有刷新 不过还是会显示原来内容
禁止跳转 页面不会有刷新 且显示原来的内容
表格标签
able标签:表示整个表格
tr:表示表格的一行
td:表示表格的一个单元格
th:表示表头单元格 居中加粗
thead:表格的头部部分
tbody:表示表格的主体区域
tfoot:表示表格的页脚(脚注或表注)
合并单元格
跨行合并: rowspan="n"
跨列合并: colspan="n”
n: 代表需要合并的几行或几列
这边上面东西结合起来
<table border="1" width="420px" height = "400px" align="center" >
<thead>
<th colspan="5" height="50px">
鬼灭之刃
</th>
</thead>
<tbody>
<tr>
<th>
主演
</th>
<td>灶门炭治郎</td>
<td>灶门祢豆子</td>
<td>我妻善逸</td>
<td>嘴平伊之助</td>
</tr>
<tr>
<th>
配音演员
</th>
<td>花江夏树</td>
<td>鬼头明里</td>
<td>下野纮</td>
<td>松冈祯丞</td>
</tr>
</tbody>
<tfoot >
<tr>
<th colspan="5">热血 催泪</th>
</tr>
</tfoot>
</table>
运行结果
列表标签
无序列表
1.无序列表:最外层为ul 内层li 没有明确标识的列表
<ul>
<li>蝴蝶忍 虫柱</li>
<li>宇髓天元 音柱</li>
<li>甘露寺蜜璃 恋柱</li>
<li>伊黑小芭内 蛇柱</li>
<li>时透无一郎 霞柱</li>
<li>富冈义勇 水柱</li>
<li>炼狱杏寿郎 炎柱</li>
<li>不死川实弥 风柱</li>
<li>悲鸣屿行冥 岩柱</li>
</ul>
运行结果
有序列表
2.有序列表: 外层ol 内部li
<ol>
<li>蝴蝶忍 虫柱</li>
<li>宇髓天元 音柱</li>
<li>甘露寺蜜璃 恋柱</li>
<li>伊黑小芭内 蛇柱</li>
<li>时透无一郎 霞柱</li>
<li>富冈义勇 水柱</li>
<li>炼狱杏寿郎 炎柱</li>
<li>不死川实弥 风柱</li>
<li>悲鸣屿行冥 岩柱</li>
</ol>
运行结果
自定义表格
使用dl外部 dt为自定义列表的头部 dd为内容
<dl>
<dt>
鬼灭之刃之柱
</dt>
<dd>蝴蝶忍 虫柱</dd>
<dd>宇髓天元 音柱</dd>
<dd>甘露寺蜜璃 恋柱</dd>
<dd>伊黑小芭内 蛇柱</dd>
<dd>时透无一郎 霞柱</dd>
<dd>富冈义勇 水柱</dd>
<dd>炼狱杏寿郎 炎柱</dd>
<dd>不死川实弥 风柱</dd>
<dd>悲鸣屿行冥 岩柱</dd>
</dl>
表单标签
1.from标签
只要要将表单提交 整个表单就要包含在from标签中
action属性:表示要把数据提交到那个地址
method属性:表示要将数据以何种方式提交
后续待更新