html -Hubuild工具使用

最新推荐文章于 2023-12-20 09:38:04 发布

吃咸菜码代码

最新推荐文章于 2023-12-20 09:38:04 发布

阅读量192

点赞数

文章标签： html 算法前端

本文链接：https://blog.csdn.net/qq_61549190/article/details/133941250

版权

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>

运行结果

换行标签

标签 ---- 段落标签

<body>
		<p>
			TV动画《鬼灭之刃1：立志篇》的第1话-第5话整合而成的剧场版。</p><font color=#ff0000>显示换行</font> 主要讲述了鬼灭之刃的世界观，以及心地善良的男主卖炭的时候，家人全被恶鬼所杀，唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子，痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子，并遇到了自己的指引人帮助他前进。
			
		</p>
	</body>

运行结果

标签 ---- 换行标签

<body>
		<p>
			TV动画《鬼灭之刃1：立志篇》的第1话-第5话整合而成的剧场版。<br/><font color=#ff0000>显示换行</font> 主要讲述了鬼灭之刃的世界观，以及心地善良的男主卖炭的时候，家人全被恶鬼所杀，唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子，痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子，并遇到了自己的指引人帮助他前进。
			
		</p>
	</body>

运行结果

标签与 标签相比 p标签会换行且空出整整一行,而 br标签简单的换行

注意的是: 如果只是无尽加空格,也只会空格一次

初始状态

运行结果

空格很多次

格式化标签

标签 ---- 加粗标签

标签 ---- 加粗标签

<body>
		<p>
			<strong>TV动画《鬼灭之刃1：立志篇》</strong>的第1话-第5话整合而成的剧场版。
</p>主要讲述了<b>鬼灭之刃</b>的世界观，以及心地善良的男主卖炭的时候，家人全被恶鬼所杀，唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子，痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子，并遇到了自己的指引人帮助他前进。
			
		</p>
	</body>

运行结果

标签 ---- 倾斜标签

标签 ---- 倾斜标签

<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>标签 ---- 下划线标签

标签 ---- 下划线标签

<body>
		<p>
			<ins>TV动画《鬼灭之刃1：立志篇》</ins>的第1话-第5话整合而成的剧场版。
</p>主要讲述了<u>鬼灭之刃</u>的世界观，以及心地善良的男主卖炭的时候，家人全被恶鬼所杀，唯一活下来的的只有接触了鬼的血而变成鬼的妹妹祢豆子，痛不欲生的炭治郎下定决心要用尽所有办法将妹妹变回原来的样子，并遇到了自己的指引人帮助他前进。
			
		</p>
	</body>

图片标签

基本格式

输入图片名字记得要图片建包封装

img src 表示图片来源 alt 表示找不到图片显示的文字

效果图

效果图

像素单位是px

height 填写高度像素最好widt和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="">空值</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属性：表示要将数据以何种方式提交

后续待更新

吃咸菜码代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html -Hubuild工具使用

<dt>鬼灭之刃之柱</dt><dd>蝴蝶忍虫柱</dd><dd>宇髓天元音柱</dd><dd>甘露寺蜜璃恋柱</dd><dd>伊黑小芭内蛇柱</dd><dd>时透无一郎霞柱</dd><dd>富冈义勇水柱</dd><dd>炼狱杏寿郎炎柱</dd><dd>不死川实弥风柱</dd><dd>悲鸣屿行冥岩柱</dd>
复制链接

扫一扫