最近在学习HTML,是在菜鸟教程进行学习的,下面只是对自己所学习的只是进行总结,并对一些基础命令进行记录,便于自己后面使用的查找。
1.一个基本的HTML框架就是这样的。HTML也是文本语言,可以用txt,notepad++文本编辑器进行编辑,当然还是更推荐使用专门的HTML编辑器来编辑。
菜鸟教程中推荐的是VS Code(https://code.visualstudio.com/)和sublime(http://www.sublimetext.com/);
我朋友给我推荐的是HBuilder(https://www.dcloud.io/hbuilderx.html)和WebStorm(https://www.jetbrains.com/webstorm/download/#section=windows)。
我使用的是Hbuilder,个人觉得挺好用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习(来源于网站:菜鸟教程)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
只有body区域(白色部分)才会在浏览器中显示。
2.基础命令
HTML标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.
//字体大小从h1到h6依次减小
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
HTML 段落
HTML 段落是通过标签 <p> 来定义的.
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
HTML 链接
HTML 链接是通过标签 <a> 来定义的.
<a href="http://101.132.145.240:8080/">这是一个链接</a>
<a href="https://www.runoob.com/" target="_blank">访问我的网站!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
<img src="/images/logo.png" width="258" height="39" />
<img src="http://101.132.145.240:8080/dist/images/logo/logo.png" width="258" height="39" />
(注:前面的路径可以是绝对路径或相对路径,如果是绝对路径,把文件发给别人,别人可能没有这个路径,图片就会挂掉;因此可以使用相对路径,把图片和HTML文件放一起发给别人,更好的方法就是使用下面的方法,图片使用的是网上的图片,这样就不会存在路径问题。)
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
<!-- 这是一个注释 -->
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:
这是一个换行符<br>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
HTML字体加粗,斜体,上下标,放大缩小
这个文本是<b>加粗的</b><br>
这个文本是<strong>加粗的</strong><br><br>
这个文本是<i>斜体的</i><br>
这个文本是<em>斜体的</em><br><br>
这个文本包含<sup>上标</sup><br>
这个文本包含<sub>下标</sub><br><br>
这个文本字体<big>放大</big><br>
这个文本字体<small>缩小</small><br><br>
这个文本包含<del>删除线</del><br>
这个文本包含<ins>下划线</ins><br><br>
HTML缩写和首字母缩写
<!-- 以下是缩写形式 -->
<abbr title="etcetera">etc.</abbr><br />
<!-- 以下是首字母缩写形式 -->
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!-- 带有边框 -->
<table border="1">
<!-- 表格有标题 -->
<caption>Monthly savings</caption>
<tr>
<!-- 表格有表头 -->
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
更多属性设置:HTML 表格