HTML 基本框架及一些基础命令

    技术2022-07-12  65

    最近在学习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 表格

     

    Processed: 0.021, SQL: 12