一、什么是HTML?
HTML是超文本标记语言的缩写，被我我们用于构建web页面。超文本的含义在于的将单个网站和或多个网站内的网页链接在一起，实现万物互联。
HTML的最新版本HTML5的doctype的格式变得十分简洁，使用HTML5，任何格式的命令都可以，无论大小写，带不带引号，带不带结束符号。为了照顾浏览器，向后兼容已有内容，HTML5中不含有废弃元素，却含有大量过时元素和属性。HTML5中，可以将多个元素封装在一个元素中，唯一需要注意，不可以将a元素嵌套在另一个a 元素中。
二、使用环境
HTML和CSS语言没有专门的编译器，可以使用Notepad++编辑器，但是更加推荐vscode，插件齐全，使用更加轻便快捷。
三、HTML文档的构成
先来看一个简单的html文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>test</title>
</head>
<body>
<h1>阿布的第一个Web页</h1>
<p>当前有点丑：！</p>
<!-- 换行 -->
<p>我可以写的更好看<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
</body>
</html>
web效果图：
html文档的内容基本结构便是如此，后期不断添加元素，以及使用css设置样式就可以得到一个美观的web页面了；
这个简单的html文档的构成如下：
- 声明文档类型（可有可无）
<!DOCTYPE html>
- html根元素 包裹了整个完整的页面，也就是说要使用的html要全部放在这个元素里边
<html></html>
- head容器元素包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容
<head></head>
- 字符集编码元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字
<meta charset="utf-8">
- 指定页面图标出现在浏览器标签上
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- 设置页面标题 包含可以在页面看到的所有内容
<body></body>
- 注释 在 code 软件中，输入Ctrl + /即可快捷的进行注释！
<!-- <p>注释的内容</p> -->
四、一些学习记录
-
HTML标记语言主要是对其语法、标签（元素）已经元素的学习。HTML的语法其实就是用要求书写格式是Browser 接受和支持的即可，需要注意与HTML、XHTML、HTML5中的书写的细节；
HTML标签一般分为文档结构标签、文本格式标签、字符格式标签、列表标签、链接标签、表格标签和表单标签8类，掌握了这八类标签，HTML学习就到位了；
html的属性指的是每一类标签都有什么属性，但是现在除了name、id、class、style这些属性，其他的属性都用css代替了。所以可以说，HTML标记语言的学习其实就是对其的八大类标签属性的学习。 -
标题： HTML中提供了标题元素提供了六种不同的标题，1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题；CSS可以设置改变的标题的大小，颜色、样式等。
//html
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
- 文本格式标签
文本格式标签用于设置文本的格式，如加粗、强调、下划线、删除线、上下标等。
<p>阿布的web页面 <del>好看</del> <ins>丑的</ins>!</p>
<!-- <del> 和 <ins> 一起使用，描述文档中的更新和修正。 -->
<p>阿布<mark>highlight</mark> text.</p>
<p><del>删除线</del></p>
<p><s>标记错误的文字</s></p>
<p><u>下划线</u></p>
<p><small>小字体</small></p>
<p><strong>加粗文本</strong></p>
<p><em>突出强调文本</em></p>
<p> <b>加粗文本</b></p>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<!-- 定义上标下标 -->
注：虽然说在文本格式的标签中，有两个或者两个以上的标签显示的效果是一样，但是它们本质是有所差别的，如b 的效果是加粗，strong(强调)的效果也是加粗，在web中，强调不仅仅是可以用加粗强调，还可以通过下划线、颜色等强大，b不能代替strong，但是strong某个情况的时候是可以替代b标签的使用，就比如本列中的强调就效果是一样，可以交替使用。
还有要注意就是，像strong这种标签还可以通过css设置属性，得出想要的效果。
- 链接
链接在整个web中是极为重要的，是实现的万物互联的关键之处，可以通过链接插入图片、文档、网页等内容。
<a href="https://blog.csdn.net/weixin_45970808/article/details/122177628?spm=1001.2014.3001.5502" target="_blank">阿布的博客</a>
注：使用target属性可以定义链接的文档或者是网页在何处显示，如此处的_blank定义新页面在新窗口打开，不添加任何target属性就是在原来页面显示。
在网页中还可以通过超链接去设置一个标签，如从一个网页一个内容跳转到另外一个内容。
css样式表可以用来使用修改链接的文本的颜色、字体背景色、大小、点击时发生的变化等
- 图像
插入的图像可以是自己电脑目录下的某个文革，同杨也可以插入来自某个服务器的图像。也可以使用图片创建一个链接。
<p>创建图片链接:
<a href="https://blog.csdn.net/weixin_45970808/article/details/122177628?spm=1001.2014.3001.5502">
<img border="5" src="cat.jpg" alt="阿布的博客" width="32" height="32"></a></p>
注：src属性为要显示图片文件的位置 URL，即图片文件的路径；alt属性当获取图片出现问题时显示的文字（占位符）；height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
图像如果是要用网页上面的，把url改为网页链接即可
此处的边框使用css的边框样式，可以设定边框的样式大小、位置、形状、颜色等，同样在设置表格或者是文字的边框的也是一样的原理。
- 表格
HTML中插入表格一般是用table标签，HTML中可以通过简单的标签设置水平标题或者是垂直标题，设置边框的属性，更加的好看的表格需要使用到css设置。
<h4>水平标题:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直标题:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
- 列表
列表有有序列表和无序列表，HTML语言可以进行简单的实现，无序列表使用ul标签，默认使用实心圆点作为每项的标志，空心圆为circle，实心方块square；有序列表使用ol标签，可以通过设置type类型设置每项的标志如"type=A"表示使用大写字母显示。
<h4>小写字母列表：</h4>
<ol type="a">
<li>啊啊啊</li>
<li>嗷嗷嗷</li>
<li>哎哎哎</li>
<li>唉唉唉</li>
</ol>
注：列表还可以设置嵌套列表，自己定义新的列表，自定义列表以 dl标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以dd开始，列表项内部可以使用段落、换行符、图片、链接以及其他列表。
- 表单
HTML 表单用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
表单一般涉及制作按钮、复选框、单选框、文本域、下拉列表等内容；
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="user">
</label>
<button>Save</button><br>
密码：<br>
<input type="password" name="ps" placeholder="password">
</label>
<button>Save</button>
<br>
年龄：<br>
<!-- 数字输入框，注意 min 和 value 属性-->
<input type="number" name="age" min="18" max="40" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期：<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
注：表单本身是不可见的，一个文本字段的默认宽度是20个字符；
txet类型是输入普通的文本，可见的；password中的字符是隐藏的，不可见的；input控件输出一个文本框；placeholder值设置初始在文本框显示的内容；button定义一个点击按钮；option定义下拉列表中的选项；select定义了下拉选项列表；label定义 input 元素的标签，一般为输入标题；
表单中的单选按钮可以设置value、name、checked这三种属性，value提交数据到服务器的值； name为控件命名； checked当设置 checked=“checked” 时，该选项被默认选中。如果需要禁用某选项，设置为disabled即可，hidden可设置该选项不显示在下拉列表里面，
五、总结
目前来说，我已经是学习完了HTML的一些基本元素的内容，写个简单网页啥完全没有问题，就是还比较丑陋啊！
HTML它定义了网页内容的含义和结构，建立起来了一个网页基本框架，是制作网页的基础，有了基础才可以往上添加新东西，做出更加美观新颖的网页。
html我其实学的时候就觉得挺简单的，简单让我有点无聊了，就是要记的元素挺多的，修改属性起来也比较麻烦，还不能把页面做的很好看，希望在后面css的学习甚至是更为深入的学习中我可以把页面做的好看，努力做到平时看到那种网站的水平！
8929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
