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

最新推荐文章于 2023-08-15 20:41:09 发布

LingLong_roar

最新推荐文章于 2023-08-15 20:41:09 发布

阅读量523

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_40969467/article/details/107078355

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在学习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 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</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 表格

LingLong_roar

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML 基本框架及一些基础命令

最近在学习HTML，是在菜鸟教程进行学习的，下面只是对自己所学习的只是进行总结，并对一些基础命令进行记录，便于自己后面使用的查找。1.一个基本的HTML框架就是这样的。HTML也是文本语言，可以用txt，notepad++文本编辑器进行编辑，当然还是更推荐使用专门的HTML编辑器来编辑。菜鸟教程中推荐的是VS Code(https://code.visualstudio.com/)和sublime(http://www.sublimetext.com/)；我朋友给我推荐的是HBuilder(ht
复制链接

扫一扫

专栏目录