HTML学习笔记
一.HTML是什么
HTML(Hyper Text Markup Language)用来描述网页的一种超文本标记语言。
HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
html文本被称为html标签，是由尖角号包围的关键词，通常成对出现，比如：<html> </html>。
二.看看常用的标签有哪些吧
1.基础标签
<title>定义网页标题</title>
我们平时看到的浏览器上面的网页标题就是这个标签实现的。
<body>
我是主题标签,网页上所有要显示的内容都放在我的标签内
<!-这里是注释-->
<body/>
效果图
<!- --> 这个标签，它的作用是提醒自己 或 帮助用户了解该文件的内容，所以注释标签不会显示在浏览器中。
2.格式标签
<b>可以将文字加粗</b>
<br /> <!-换行标签-->
<strong>我还是加粗标签</strong>
<i>文字变斜体</i>
<em>我也是斜体</em>
<u>添加下划线</u>
<del>添加删除线</del>
<hr>这是一个分割线</hr>
效果图如下：
注意：网页源代码中的回车在浏览器中并不表示换行。
<p>p标签表示一个段落</p>
<span style="color: pink;font-size: 25px">用来修饰文本，</span>
3.div标签
<div>div标签是一个标准的块标签，主要用来布局。</div>
块标签：指的是div、p、hr、hn这些标签，这种标签和行内标签不同，即便是内容不够一行，也会 沾满一行，这样就其他必须换行输出。
4.音频 视频 图像标签
<img src="img/a.jpg”>用来定义图片
<video src="img/a.mp4”>定义视频，可以在网页中放入你想要的视频。
<audio src="img/a.mp3”>音频标签，在网页中用音频播放，就用这个标签。
| img标签中的属性名称 | 功能 (属性值) |
|---|---|
| width | 图片的宽(数字+px) |
| height | 图片的高(数字+px) |
| border | 图片的边距(数字+px) |
| align | 图片的对齐方式(left,center,right) |
| hspace | 图片与文字的垂直距离(数字+px) |
| alt | 图片的替换文本（字符串） |
资源路径问题：
路径是指一个文件存储的位置，分为 相对路径 和 绝对路径。
相对路径是指以当前文件所在位置为参考点而建立的路径。
5.超链接标签
HTML 文件重要的应用之一就是超链接，通过网页上提供的超链接功能，用户可以链接到网络上 的其他网页。 实现超链接的标签是a。
<a href="1.html" target="_blank">这里</a>转到第二个文件。
6.表格标签
表格在网页制作中主要的作用是用来描述具有二维结构的数据。包括的标签有table、thead、 tbody、tfoot、tr、td。
<table width="300" border="1">
<!--thead标签元素定义头-->
<thead>
<tr><!--用于定义一行 -->
<td>this text is in the head.</td><!--td标签用来定义一列，td也叫做单元格，必须放在tr中 -->
</tr>
</thead>
<!--tbody元素定义主干 -->
<tbody>
<tr>
<td>this is in the tbody.</td>
</tr>
</tbody>
<!--tfoot元素定义尾 -->
<tfoot>
<tr>
<td>this text is in the footer.</td>
</tr>
</tfoot>
</table>
运行如图下：
表格的合并：
1.跨行合并
<table border="1" width="300">
<tr>
<td rowspan="2">总成绩</td>
<td>A科成绩</td>
<td>80</td>
</tr>
<tr>
<td>B科成绩</td>
<td>90</td>
</tr>
</table>
效果如下
2.跨列合并
<table border="1" width="300">
<tr>
<td colspan="2" align="center">总成绩</td>
</tr>
<tr>
<td align="center">A成绩</td>
<td align="center">B成绩</td>
</tr>
<tr>
<td align="center">80</td>
<td align="center">90</td>
</tr>
</table>
效果如下
7.表单标签form
表单标签用form标签定义。
<form name="表单名称" method="表单提交方式" action="处理表单的文件"></form>
form标签三个重要属性：
| 属性名称 | （作用）属性值 |
|---|---|
| action | 表单提交后，处理表单的文件 (文件路径) |
| method | 用来明确确表单的提交方式 (请求方式) |
| name | 表单名称 (字符串) |
表单元素中input标签
<input type="元素类型" name="元素名称" value=”元素值”id="客户端唯一标识">
input表示表单元素，type 是非常重要的属性，type 不同的值表现为不同的元素类型，如：text单行文本框，pssword密码框，checkbox多选按钮，submint提交按钮等多个类型。
扫一扫
19万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
