本文详细介绍了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="这有一张图片"/>
这里需要注意，相对路径和绝对路径的使用时图像标签比较常用的知识点，需要重点学习，其次编者在这里仅仅列举了图像便签的部分常用属性，其他属性还需继续学习，最后< img >标签不是块级元素（独占一行），是行内元素。
6、超链接
部分基本属性：
href：链接的目标;
target：规定在何处打开链接文档；
title：光标悬浮至超链接处的提示文字。
<a href="https://www.bilibili.com/" target="_blank" title="B站"> 小破站 </a>
图片超链接：
<a href="https://www.baidu.com" title="百度首页">
<img src="图片.gif"/>
</a>
7、列表
列表分无序和无序 ，分别用< ul >标签和< ol >标签表示；
Unordered List ul
Ordered List ol
- OWL
- LOL
- OWL
- LOL
<!--无序列表-->
<ul>
<li>OWL</li>
<li>LOL</li>
</ul>
<!--有序列表-->
<ol>
<li>OWL</li>>
<li>LOL</li>
</ol>
8、字体
<font color="green">绿色默认大小字体</font>
<font color="blue" size="+2">蓝色大2号字体</font>
<font color="red" size="-2">红色小2号字体</font>
这里需要注意该标签已经很少使用，了解即可。
9、内联框架
通过内联框架可以实现在网页中“插入”网页；
height 和 width 属性用于规定内联框架的高度和宽度；
属性值的默认单位是像素，但也可以用百分比来设定；
<iframe src="https://baidu.com/" width="1000px" height="500px"></iframe>
另外， frameborder 属性规定是否显示 iframe 周围的边框；
设置属性值为0就可以移除边框；
10、表格
1、简单案例
table row tr 表格中的一行
table data cell td 表格中的一个单元格
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
| 3.1 | 3.2 | 3.3 |
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
2、表格边框
border 属性默认为“0” 即不显示表格边框，当值为“1”时，可以显示边框；
| 1 | 2 |
| 3 | 4 |
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
3、设置表格宽度
| 1 | 2 |
| 3 | 4 |
<table border="1" width="200px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
4、单元格（列）宽度
< td > 标签属性width ，用于设置当前单元格所在列在表格中的宽度；
其他列的宽度则根据已设置宽度的列所改变；
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
| 3.1 | 3.2 | 3.3 |
<table border="1" width="300px">
<tr>
<td width="80%">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
5、单元格水平对齐
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
| 3.1 | 3.2 | 3.3 |
<table border="1" width="300px">
<tr>
<!--单元格左对齐-->
<td align="left">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<!--单元格居中-->
<td align="center">2.1</tdalign>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<!--单元格右对齐-->
<td align="right">3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
6、单元格垂直对齐
<table border="1" width="300px" style="height:200px">
<tr>
<td valign="top">1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td valign="middle">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td valign="bottom">3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
7、横跨两列, 水平合并
| 1，2 | |
| 3 | 4 |
<table border="1" width="200px">
<tr>
<td colspan="2" >1，2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
8、横跨两行, 垂直合并
| 1 | 2 |
| 4 | |
| 5 | 6 |
<table border="1" width="200px">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
9、背景色
不推荐使用，使用CSS样式表会更灵活。
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
<table border="1" width="200px">
<tr>
<td bgcolor="red">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td bgcolor="pink">6</td>
</tr>
</table>
11、< div >
< div > 可定义文档中的分区或节；
< div > 标签可以把文档分割为独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联；
如果用 id 或 class 来标记 < div >，那么该标签的作用会变得更加有效；
< div > 是一个块级元素，这意味着它的内容自动地开始一个新行。实际上，换行是 < div > 固有的唯一格式表现，可以通过 < div > 的 class 或 id 应用额外的样式。
<!--正常情况下，如果超链接代码如下，则在HTML页面中两个超链接位于同一行。-->
<a href="https://www.bilibili.com/" target="_blank" title="B站"> 小破站</a>
<a href="https://www.baidu.com/" target="_blank"> 百度</a>
<!--而如果使用<div>则链两个超链接则会换行。-->
<div>
<a href="https://www.bilibili.com/" target="_blank" title="B站"> 小破站</a>
</div>
<div>
<a href="https://www.baidu.com/" target="_blank"> 百度</a>
</div>
三、HTML表单元素
1、文本框
type="text"
<!--size：设置文本框大小 value：设置文本框初始内容 placeholder：设置文本框背景文字-->
<input type="text" size="10" value="初始内容" placeholder="背景文字"> 即表示文本框；
2、密码框
type="password"
输入内容会自动显示为星号（***），即隐藏输入内容；
<input type="password" value="密码框">
3、单选框
type = "radio"
<label>
<!--checked="checked" 默认选择-->
<!--name="same" 实现分组-->
A<input type="radio" name="same">
B<input type="radio" name="same" checked="checked" >
C<input type="radio" name="same">
D<input type="radio" name="same">
</label>
4、复选框
type = "checkbox"
<label>
A<input type="checkbox">
B<input type="checkbox" checked="checked">
C<input type="checkbox">
D<input type="checkbox">
</label>
5、按钮
<!--普通按钮-->
<input type="button">普通按钮，不具备提交from的效果;
<!--提交按钮-->
<input type="submit">提交按钮,用于提交form，把数据提交到服务端;
<!--重置按钮-->
<input type="reset">重置按钮,可以把输入框的内容重置;
< button >与< input type=“button”>比较：
< button >即按钮标签 与< input type=“button”>不同的是，标签功能更为丰富 ；
按钮标签里的内容可以是文字也可以是图像 ；
如果< button> 的 type=“submit” ，那么它就具备提交form的功能。
<!-- button是文字 -->
<button>按钮</button>
<!-- button是图片 -->
<button> <img src="示例.gif"> </button>
<!-- 提交数据 -->
<button type="submit">登陆</button>
6、下拉列表
<select >
<option >一</option>
<option >二</option>
<option >三</option>
</select>
<!--设置列表高度，多于部分将出现滑轮滚动-->
<select size="5" >
<option >一</option>
<option >二</option>
<option >三</option>
<option >四</option>
<option >五</option>
<option >六</option>
</select>
<!--多选,使用ctrl或者shift进行多选-->
<select size="5" multiple="multiple" >
<option >一</option>
<option >二</option>
<option >三</option>
<option >四</option>
<option >五</option>
<option >六</option>
</select>
<!--默认选中 selected="selected"-->
<select size="5" multiple="multiple">
<option >一</option>
<option selected="selected">二</option>
<option> 三</option>
<option >四</option>
<option >五</option>
<option >六</option>
</select>
7、文本域
cols：宽度，rows：行数；
文本域可以有多行，并且可以有滚动条；
可根据自定义的宽度和行数自动换行；
<textarea>
abc
def
</textarea>
<textarea cols="10" rows="6">
1234567890123
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
</textarea>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
