最近在学习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 标题(Heading)是通过<h1> - <h6> 标签来定义的.
//字体大小从h1到h6依次减小 <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6>HTML 段落是通过标签 <p> 来定义的.
<p>这是一个段落。</p> <p>这是另外一个段落。</p>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 图像是通过标签 <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文件放一起发给别人,更好的方法就是使用下面的方法,图片使用的是网上的图片,这样就不会存在路径问题。)
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
<p>这是一个段落。</p> <hr> <p>这是一个段落。</p> <hr>可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
<!-- 这是一个注释 -->如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:
这是一个换行符<br><br /> 元素是一个空的 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 表格