本文详细介绍了HTML的基本概念，包括HTML的标记语言性质、元素、属性、注释和中文问题。接着，讲解了HTML的基础元素，如标题、粗体、斜体、预定义文本、图像、超链接、列表、字体、内联框架和表格，包括表格的各种设置。最后，讨论了HTML的表单元素，如文本框、密码框、单选框、复选框、按钮、下拉列表和文本域。
一、HTML基本概念
1、简介
HTML是Hyper Text Markup Language 超文本标记语言 的缩写；HTML是由一套标记标签 （markup tag）组成，通常就叫标签； 标签由开始标签和结束标签组成。
<p>开始标签
结束标签(斜线)</p>
<p>标签之间的文本是内容</p>
2、元素
元素指的是从开始标签到结束标签之间所有的代码，包括开始标签和结束标签； 一个完整的HTML文件，至少包含 html元素，body 元素，head 元素 以及里面的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
有的特殊元素，没有内容，即开始和结束标签直接放在一起例如：
<!--换行元素-->
<br>
<!--页面下划线-->
<hr>
3、属性
属性用来修饰标签的，例如：设置标题居中
<h1 align="center">居中标题</h1>
写在开始标签里的 align = “center” 是属性；
align 是 属性名 、center 是 属性值 ；
属性值需要使用双引号括起来，这是标签属性最基本的使用方式。
4、注释
编程人员在编写代码时通常使用注释来解释部分代码的具体含义等；
注释不会显示在HTML网页上，对于用户是透明的。
<!--这是注释的内容！-->
<h1 align="center">居中标题</h1>
5、中文问题
通常情况下，部分IDE在新建.html文件时，会自动在 < head >部分添加中文设置，尽量避免中文乱码问题。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
二、HTML基本元素
1、标题
Header 1 to Header 6
标题会粗体、字体放大、换行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
这里重点记忆标题标签可以自动换行，其次是粗体和字体放大。
2、粗体（文本）
Bold and Strong
< b > 仅仅表示该文本是粗体的，并不暗示这段文字的重要性;
< strong> 虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性;
推荐使用< strong > 。
<p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>
这里需要注意实际在页面上两者表现的效果是相同的，重要性的强调侧重于编程者本身，所有我建议记忆英文单词Bold的首字母b来记忆该标签。
还以一点是无论是< b >还是< strong > 都是不自动换行的。
3、斜体（文本）
斜体标签有两种，跟粗体类似；Italic < i > and Emphasized < em>
<p>无斜体效果</p>
<i>i标签</i>
<em>em标签</em>
<!--嵌套-->
<strong><em>同时有粗体和斜体</em></strong>
具体使用细节同粗体相同。
这里需要注意的是粗体标签和斜体便签，仅仅对标签内的文本有效果，所以在如今页面编写中，其实很少使用，因为使用范围太小。
4、预定义
预定义格式（文本 ）Preformatted pre
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体；
< pre > 标签的一个常见应用就是用来表示计算机的源代码。
<pre>
该标签可以将其中的文字排版、
格式等原封不动的呈现出来
</pre>
该标签在大学学习中实际并不常用，知道即可。
5、图像
相对路径
（1）同级目录图像
.html文件同图片在相同的目录下，可以使用以下的路径格式：
<img src = "示例.gif">
（2）上级目录图像
图片文件位于.html文件上级目录里的另一个文件夹里：
<img src = "../图片/示例.gif"/>
绝对路径
（3）具体图像地址
<img src = "file://C:\Users\users\Desktop\示例.gif"/>
属性
（1）图片大小
<img width="200" height="200" src="示例.gif">
（2）图像位置
<!--左对齐-->
<div align="left">
<img src="示例.gif">
</div>
<!--居中-->
<div align="center">
<img src="示例.gif">
</div>
<!--右对齐-->
<div align="right">
<img src="示例.gif">
</div>
（3）替代文本
当图片无法显示时，原本图片所在位置会出现替代文本。
<img src="示例1.gif" alt="这有一张图片"/>
这里需要注意，相对路径和绝对路径的使用时图像标签比
最低0.47元/天 解锁文章
扫一扫
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
