HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
文章目录
1.HTML基本框架介绍
2.快捷键生成基础框架
- 二、内联元素和块级元素
1.内联元素
2.块级元素
- 三、HTML 文本格式化标签
- 四、HTML中 body元素
1.超链接
2.列表
3.表格
4.表单
5.按钮
6.图片
7.复选框/单选框
8.style
- 总结
前言
此篇博客仅适用于零基础人群。对于学过一点HTML的人来说，在这篇博客里你学不到任何东西，因为实在是太简单、太基础了。但对于没有接触过HTML的人来说这篇博客刚刚好，你能学到很多。
这篇博客可以说是我的学习笔记，在初学HTML的时候，我学习的网站是朋友推荐的菜鸟教程，还有自己在B站上找视频。
但菜鸟教程的太过于详细，有很多不常见不常用的东西，这对于初学者是很不友好的，初学者不知道那些重要，那些不常见。往往都进行了学习和记忆，但是到最后学完，有些都不一定能用上，对初学者造成了极大的负担。菜鸟教程适合了解一点HTML是做什么去看，菜鸟教程就像教科书，很详细却也很无味。
而B站的b视频大部分很繁琐，前面介绍什么是HTML及HTML的起源都能介绍好多，但是初学者又不知道哪些可以跳过哪些不可以，所以都看了，浪费了很多时间。但b站也有很简洁的教学视频，此篇博客就是借鉴那个视频，放在博客结尾，看完博客还觉得迷糊的可以去看看哦（还是气泡音呢，很好听的）
一、HTML基本框架及快捷键生成基础框架
1.HTML基本框架介绍
<!DOCTYPE html><!--解释文档类型为HTML-->
<html lang="en"><!--声明网页语言，“en”为英文，“zh-cn”为中文。html为开始标签-->
<head><!--头部-->
<meta charset="UTF-8"><!--定义网页编码格式为UTF-8 -->
<title>网页标题</title>
</head>
<body><!--主体-->
</body>
</html><!--结束标签-->以上为HTML最基本框架，后面文章内容皆为网页内部设计，皆写在<body> </body> 之中
2.快捷键生成HTML基本框架
新建一个HTML文件，输入“ ！”，再按 " tab"键，即可生成!
注："!",为英文输入法下的
二、块级元素和内联元素
1.块级元素
- 在页面以块的形式展现
- 出现在新的一行
- 占全部宽度
2.内联元素
- 通常在块级元素内
- 不会导致文本换行
- 只占必要的部分宽度
块级元素：如<div>,<h1>,<p>等等。
内联元素：如<a>,<img>,<em>,<strong>等等。
代码示例
<!DOCTYPE html><!--解释文档类型为HTML-->
<html lang="en"><!--声明网页语言，“en”为英文，“zh-cn”为中文。html为开始标签-->
<head><!--头部-->
<meta charset="UTF-8"><!--定义网页编码格式为UTF-8 -->
<title>网页标题</title>
</head>
<body><!--主体-->
<div>
<h1>标题</h1>
<P>正常字体大小</P>
<strong>加粗字体</strong>
</div>
</body>
</html>h1表示标题格式大小，p表示一个段落。
演示效果
三、HTML文本格式化标签
| 标签 | 描述 |
| <b> | 定义粗体文字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
还有如：换行<br> ，加横线<hr>等。
代码示例：
<!DOCTYPE html><!--解释文档类型为HTML-->
<html lang="en"><!--声明网页语言，“en”为英文，“zh-cn”为中文。html为开始标签-->
<head><!--头部-->
<meta charset="UTF-8"><!--定义网页编码格式为UTF-8 -->
<title>网页标题</title>
</head>
<body><!--主体-->
<b>定义粗体文字</b>
<br><!--换行-->
<em>定义着重</em>
<br><!--换行-->
<i>定义斜体字</i>
<br><!--换行-->
<small>定义小号字</small>
<br><!--换行-->
<strong>定义加重语气</strong>
<hr><!--加横线-->
</body>
</html><!--结束标签-->演示效果 ：
四、HTML中body 元素
1.超链接
<a href="###" target=" _blank"> Lorem </a>'###' 为超链接的来链接。
'targrt= _blank' 使超链接打开的内容，新建一个页面，而并非覆盖原本的页面。
’Lorem‘为超链接的按钮。
2.列表
代码示例：
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
<ol>
<li>List 1</li>
<li>List 2</li>
</ol><ul></ul> 为无序列表
<ol></ol> 为有序列表
注：此代码<body></body>内
效果演示：
3.表格
代码示例：
<table>
<thead><!--表头-->
<tr><!--行-->
<th>your Name</th>
<th>your Adress</th>
<th>your Age</th>
</tr>
</thead>
<tbody><!--表体-->
<tr><!--行-->
<td>Tom</td>
<td>US</td>
<td>18</td>
</tr>
</tbody>
</table>效果演示：
4.表单
代码示例：
<form action="form.js" method="post">
<div>
<label>Frist Name</label>
<input type="text" name="first name" placeholder="Ent First Name">
</div>
<input type="submit" name="submit" value="submit">
</form>action 里面的是文件名或者页面网址，点击提交后会跳转到网址的页面。也可以为action=' '或action='#',提交到当前页面。
method 表示数据类型，可以为get或post。两者区别为：
- get:明文提交，快速但不安全，不能提交大数据
- post:密文，安全，可以提交大数据
<label>为标签
type为种类，name为自己给这个部分起的名字，placeholder为内容框里未填写时显示的。
value为按钮上面显示的内容。
效果演示：
5.按钮
代码示例：
<button> this is a button</button><button> </button> 中间为按钮上显示的内容。
效果演示：
6.图片
代码示例：
<img style="width: 20%;" src="3.jpeg"alt="显示错误">style 可以设置图片大小，可以通过width 宽，height 高 来设置。
scr 为图片路径；
alt 为图片不能正常显示时，显示的内容 。
效果演示：
正常显示时
图片不能正常显示时：
7.复选框/单选框
复选框代码示例：
<label>你出门开什么车：</label><br>
<input type="checkbox"name="vehicle" >法拉利<br>
<input type="checkbox"name="vehicle" >布加迪<br>
<input type="checkbox"name="vehicle" >迈凯伦<br>
<input type="checkbox"name="vehicle" >兰博基尼<br>checkbox 为复选框，可以选多个。
复选框效果演示：
单选框代码示例：
<label>你出门开什么车：</label><br>
<input type="radio"name="vehicle" >法拉利<br>
<input type="radio"name="vehicle" >布加迪<br>
<input type="radio"name="vehicle" >迈凯伦<br>
<input type="radio"name="vehicle" >兰博基尼<br>
<input type="radio"name="vehicle" >没钱开不起车<br>radio为单选框，只能选一个。
单选框效果演示：
8.style
style，可以调整字体颜色，字体大小，背景颜色，文本对齐方式，设置各种不同效果字体，等作用。在先介绍几种简单常用的。
代码示例：
<p style="font-family:楷体;color: blue;font-size: 1cm;background-color: black;text-align: center;">我出门开红色法拉利</p>font-family 设置字体
color 字体颜色
font-size 字体大小
background-color 背景颜色
text-align 文本对齐方式。
效果演示：
总结
此篇文章简单的带初学者了解了HTML的一部分内容，这只是皮毛而已。想要深入了解更详细的HTML ，推荐菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
对此文章仍有不理解的，可以留言评论，或者点击此链接为初学者准备的：HTML 速成_哔哩哔哩_bilibili
观看推荐视频（气泡音，很好听很温柔的男声）。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
