Web前端一站式开发手册学习笔记
作者：互联网
Web前端一站式开发手册学习笔记 — HTML5（1）
这是我的第一篇博客，我的初衷是能够通过写博客可以记录笔记并深化记忆，同时站在和我同样处境的同学的角度来作为自己的学习笔记!!! 希望能有所帮助
HTML5学习目录
1.前言
HTML5是学习前端网页的基础部分，他是网页的框架。如果说HTML5是一只鸟的骨架，内容是鸟的血肉，那么CSS使得这只鸟有了颜色和形态，JavaScript使得这只鸟能够拍动翅膀展翅翱翔，学习HTML5的第一章步骤我放在了下面，希望大家能够采纳，这都是我的学习笔记
下面案例可供学习参考，关于web的基础认识认知这里不再一一罗列，有想了解的可以百度搜索Web前端认识。
2.网页中的文字、段落、图片
为了方便书写记忆，直接使用HBuilder编辑界面作为笔记的书写地址
下面展示代码以及笔记内容 内联代码片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页中的文字、段落、图片</title>
</head>
<body>
<!-- 一、网页中文字和段落：
0.基础段落标签：<p>文字</p>还有各种标题段标签h标签<h1>~<h6>
1.文字对齐：align="对齐方式"：Left、Center、Right
2.文字字体和颜色：<font face="楷体" color="red" size="16px">font属性的用法</font>
3.段落换行：<br>
4.文字的上下标：<sup>上标</sup> <sub>下标</sub>
5.文字删除线：<strike>文字</strike> 或者 <s>文字</s>
6.去除因浏览器限制而自动换行的效果：<nobr>不许换行的文字</nobr>
7.文字加粗：<b>需要加粗的文字</b>
8.空格：
二、网页中的图片样式：
网页中图像格式通常的三种".jpg（JEPG)",".GIF",".PNG"
插入图片：
<img src="图片文件地址" alt="替换文字(若图片不能正常显示时用这个alt显示文字)" width="图片宽度"
height="图片高度" border="图片边框" hspace="多个图片的水平间距" title="图片提示文字(鼠标指针放在图片上面时显示文字)"> -->
<p align="center"> <font size="30px" color=blue face="楷体">文字、段落、图片举例</font></p>
<h1>这是一行实验性的文字，对注释中的所有标签知识点可以有一个举例的地方，下面是一些敷衍性的文字：</h1>
<h2>这还是一行实验性的文字，使用h2标签</h2>
<h3>这还是一行实验性的文字，使用h3标签</h3>
<h4>这还是一行实验性的文字，使用h4标签</h4>
<h5>这还是一行实验性的文字，使用h5标签</h5>
<h6>这还是一行实验性的文字，使用h6标签</h6>
<p>下面是一些实验性的了:</p>
<p><b>短篇童话故事：乐于助人的小蜜蜂</b><br> 有一天，一小蜜蜂正在花丛中嗡嗡的飞着，它看见一群小蚂蚁在忙绿地搬家，<br>
小蜜蜂好奇地问道：小蚂蚁，你们为什么要搬家呢一只小蚂蚁回答道：因为天快要下雨了。小蜜蜂听后，就急急忙忙地往家赶。飞到半路上，忽然雷声大作，<br>
下起了哗哗的大雨。小蜜蜂加快速度往家赶。它飞啊飞，突然听到不远处传来一阵呜呜的哭声。它寻声望去，只见一只小蝴蝶躲在一顶蘑菇伞下哭泣。<br>
小蜜蜂忙迎上去，问小蝴蝶，你为什么哭呀小蝴蝶哭着说：我迷路了，我回不了家了。小蜜蜂说：别着急，我带你回家吧!小蜜蜂一边安慰道，一边帮<br>
它擦眼泪。雨渐渐小了，小蝴蝶在小蜜蜂的指引下安全地回到了家。雨停了，太阳出来了。一条彩虹挂在天空。小蜜蜂高高兴兴地回家了。</p>
<p><strike>文字删除线strike</strike><br><s>文字删除线s</s></p>
<nobr>小青蛙听见了，他们“扑噜，扑噜”从水里钻出头来，对猪小弟说：“猪小弟，猪小弟，你别害怕，把眼睛往前瞧，别往水下看，
你挺起胸，直起腰，迈开步，一二，一二，就过去啦!” 猪小弟听小青蛙的话，抬起头，眼睛向前看，挺起胸，直起腰，迈开大步，
一二，一二!嘿，真过去了。过去以后，眼泪还没干，猪小弟就高兴地笑了。</nobr><br>
在数学方程式中的应用上下标的效果：<br>
X <sup>2</sup>+7X <sup>3</sup>-28=0 <br>
X <sub>2</sub>+7X <sub>3</sub>-28=0 <br>
<img src="../插入图片视频/img/606266.jpg" alt="人物" title="伯爵" width="250px" height="200px"border="2" hspace="20px" >
<img src="../插入图片视频/img/606266.jpg" alt="人物" title="伯爵" width="250px" height="200px"border="2" hspace="20px" >
</body>
</html>
标签：文字,Web,实验性,一站式,标签,笔记,手册,小蜜蜂,HTML5 来源： https://blog.csdn.net/qq_45988328/article/details/116102786