🧑作者简介
📮首页：小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主
🕴职业：👨🎓在校大学生
😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步
🏆擅长：单片机的基本原理，java基本原理
🎉🎉欢迎来首页阅读我的博客🎉🎉
📖主要内容
💦💦💦💦💦💦💦💦💦💦💦
💦💦主要是要了解html文件的基本结💦💦
💦💦，然后对每个标记进行解读，代💦💦
💦💦码编写，结果演示，简单且有效💦💦
💦💦的理解html代码，这为以后java💦💦
💦💦💦💦web打下坚实的基础💦💦💦💦
💦💦💦💦💦💦💦💦💦💦💦
📋目录
❤️一、html文件的基本结构
✨1.html标记
✨2.head标记
✨3.titile标记
✨4.body标记
✨5.html的基本结构代码
❤️二、html文件的文本标记
✨代码及其结果展示
🖼（1）换行模块
🖼（2）标题模块
🖼（3）居中模块
🖼（4）无序列表模块
🖼（5）有序列表模块
🖼（6）行内和块标记模块
🖼（7）表格模块
🖼（8）表单模块
🖼（9）下拉菜单模块
🖼（10）文本域模块
🖼（11）超连接模块
🖼（12）图片模块
👇👇开始学习👇👇
❤️一、html文件的基本结构
💨html主要由四部分组成，每个部分都不可或缺，这四个部分类似于我们人的身体。
✨1.html标记
该标记是html的主体部分，他相当于我们人的基本架构，所以说他是整个html文件的开头，以</html>结尾
✨2.head标记
该标记是html文件的头标记,存放文件信息,例如:CSS样式代码，类似于我们人体的大脑部分，看不见，摸不着
✨3.titile标记
该标记的标题标记，一般在<head>中
✨4.body标记
是html文件的主体标记，页面内容都在该标记中，相当于我们人体的四肢，执行大脑的指令
✨5.html的基本结构代码
<html><head>脑部<title>页面标题</title></head><body>执行大脑指令</body></html>
❤️二、html文件的文本标记
🎈<br>换行标记,该标记是一个单独标记🎈<p>段落标记,前后空1行🎈<hx>标题标记,x为数字1,2,3,4,5,6共6个等级🎈<span>行内标记🎈<div>块标记🎈<center>居中标记🎈<ul>无序列表标记,<li>为列表项🎈<ol>有序列表标记,<li>为列表项🎈<span>行内区域标记🎈<div>块区域标记🎈<table>表格标记💎<caption>表格标题标记💎<th>表头标记💎<tr>行标记💎<td>列标记🎈<from>表单标记,💎<input>表单输入标记🎈<select>下拉菜单标记,💎<option>列表添加内容标记🎈<textarea>文本域标记🎈<a>超链接标记🎈<img>图像标记
✨代码及其结果展示
<html><head><!-- html文件的头标记 --><title>网页前端基础html篇</title><!-- 页面的标题 --> <style>.one{color:red;}</style> </head><body><!-- html文件的主体标记 --> <b>登高</b> <b class="one">加粗标记</b><br>风急天高猿啸哀，处清沙白鸟飞回。 <b class="one">换行标记</b><br>无边落木萧萧下，不禁长江滚滚来。<br>万里悲秋常作客，百年多病独徘徊。<br>艰难苦恨繁霜鬓，潦倒新停浊酒杯。<h1>写作三要素</h1> <b class="one">标题标记</b><h2>是什么？</h2><p>是什么，也可译为提出问题，一般为作文开头</p> <b class="one">段落标记</b><h2>为什么？</h2><p>为什么，也可译为分析问题，一般为作文正文部分</p><h2>怎么办？</h2><p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p><center><h1>写作三要素</h1></center> <b class="one">居中标记</b><center><h2>是什么？</h2></center><center><p>是什么，也可译为提出问题，一般为作文开头</p></center><center><h2>为什么？</h2></center><center><p>为什么，也可译为分析问题，一般为作文正文部分</p></center><center><h2>怎么办？</h2></center><center><p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p></center><br><center><h1>写作三要素</h1></center><ul> <b class="one">无序列表标记</b><h2><li>是什么？</h2> <b class="one">列表标记</b><p>是什么，也可译为提出问题，一般为作文开头</p><h2><li>为什么？</h2><p>为什么，也可译为分析问题，一般为作文正文部分</p><h2><li>怎么办？</h2><p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p></ul><br><center><h1>写作三要素</h1></center><ol> <b class="one">有序列表标记</b><h2><li>是什么？</h2> <b class="one">列表标记</b><p>是什么，也可译为提出问题，一般为作文开头</p><h2><li>为什么？</h2><p>为什么，也可译为分析问题，一般为作文正文部分</p><h2><li>怎么办？</h2><p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p></ol><br><b class="one">注：行内标记作用范围比块标记小</b><b class="one">行内标记</b><br><span>行内标记效果</span><b class="one">块标记</b><div>块标记效果</div> <br><table><b class="one">表格标记</b><caption>表格</caption> <b class="one">标题标记</b><th align="center" valign="middle">表头</th> <b class="one">表头标记</b><tr> <b class="one">行标记</b><td align="center" valign="middle">第一行第一列</td> <b class="one">列标记</b><td align="center" valign="middle">第一行第二列</td></tr><tr><td align="center" valign="middle">第二行第一列</td><td align="center" valign="middle">第二行第二列</td></tr></table><br><b class="one">表单标记</b><br><form action="index.jsp"name="信息输入界面"method="post">姓名:<input name="name"type="text"id="Name"maxlength="20"><br>学号:<input name="id"type="text"id="Id"maxlength="20"><br>性别:<input name="sex"type="radio"class="noborder"value="男"checked>男 <input name="sex"type="radio"class="noborder"value="女"checked>女<br>喜欢的科目:<input name="chinese"type="checkbox"id="Chinese"value="语文">语文<!-- 表单输入标记 --><input name="math"type="checkbox"id="Math"value="数学">数学<input name="chinese"type="checkbox"id="Chinese"value="英语">英语<br><input name="Submit"type="submit"class="grey"value="保存"><input name="Reset"type="reset"class="black"value="取消"><input name="Image"type="image"src="2.jpg"></form><br><b class="one">下拉菜单标记</b><br>下拉列表框:<select name="下拉框"><option>第一个框</option><option>第二个框</option><option>第三个框</option></select> <!-- 下拉菜单标记 -->多行列表框:<select name="多行列表框"size="3"><option>第一个框</option><option>第二个框</option><option>第三个框</option></select><br><b class="one">文本域标记</b><br><textarea name="textarea"cols="40"rows="5"wrap="hard">登高风急天高猿啸哀，处清沙白鸟飞回。无边落木萧萧下，不禁长江滚滚来。万里悲秋常作客，百年多病独徘徊。艰难苦恨繁霜鬓，潦倒新停浊酒杯。</textarea><br><b class="one">超链接标记</b><br><a href="index.jsp">跳转界面</a> <br><b class="one">图片标记</b><br><img src="2.jpg"width="200"weight="500"></body></html>
🖼（1）换行模块
🖼（2）标题模块
🖼（3）居中模块
🖼（4）无序列表模块
🖼（5）有序列表模块
🖼（6）行内和块标记模块
🖼（7）表格模块
🖼（8）表单模块
🖼（9）下拉菜单模块
🖼（10）文本域模块
🖼（11）超连接模块
🖼（12）图片模块
相信大家到这里应该已经读完了吧！😁😁
觉得写得好的话点个赞再走呗！😊😊
