关于HTML的基础知识

最新推荐文章于 2021-06-04 01:12:39 发布

hjm_7

最新推荐文章于 2021-06-04 01:12:39 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/m0_46362939/article/details/105603002

版权

本着完成任务的和学习新事物的激动心情，开始了我的第一次使用markdown写文章。本文是我对HTML的一些的个人小结，适用零基础小白，想系统学习可以参考网络上其它文章或教程。

文章目录

1.什么是HTML？
2.它有哪些特点？
3.编写方式和推荐的编写工具
4.示例
5.总结

1.什么是HTML？

HTML 的英文全称是(HyperTextMarkupLanguage)，中文叫做“超文本标记语言”。
HTML 不是一种编程语言，而是一种标记语（markuplanguage），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。一个HTML文件的后缀名是.htm或者是.html。用文本编辑器就可以编写HTML文件。

2.它有哪些特点？

普遍特点：
简易性、可扩展性、平台无关性、通用性
书写特点：
1.由尖括号包围，比如 <html>.
2.通常成对出现，比如 <div>和</div> ；标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签。
3.也有单独呈现的标签，如：<img src="1.jpg" />等。
4.一般成对出现的标签，其内容在两个标签中间，如<h1>标题</h1>。单独呈现的标签，则在标签属性中赋值，如<input type="text" value="按钮" /> 。

3.编写方式和推荐的编写工具

编辑HTML其实是编辑文本，它需要浏览器的解释去呈现效果，它的编辑器大体可以分为三种，基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，使用编辑器。我个人推荐使用的编辑器：如Sublime Text，Hbuilder，Dreamweaver等.

4.示例

简单示例参考如下：

<!DOCTYPE html> 
<html>
<head>
   <meta charset="utf-8"/>
   <title>示例</title>
</head> 
<body>
   <!--这是注释-->
   <p>Hello World!</p>
</body>
</html>

分析

<html>代码都写在它里面.
<title>标签中间是网页的名字，放在头部head中.
<p>网页中显示的文本语句，放在body中.
<body>放主要要展示的内容.
注释，中间内容用来给自己看.

基础标签

接下来介绍一些基础标签

标题等级

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5> 
<h6>六级标题</h6>

查看效果: 在这里插入图片描述

显示图片

//src图片来源，title提示文本，width图片宽，height图片高
<img src="" title="" width="" height="">图片</a>

超链接

//href是超链接的目标地址，title是提示文本
<a href="" title="">这是一个超链接</a>

换行
换行使用<br>标签
空格
不管你输入多少个空格，浏览器只显示一个，要显示多个可以用空格专用&nbsp

文本格式

标签	说明
`<b>`	加粗
`<i>`	斜体
`<ins>`	删除线
`<sub>`	上标
`<sup>`	下标
`<hr>`	水平线

列表

分为有序列表和无序列表，有序列表用<ol> </ol>，无序列表用<ul> </ul>，每个列表项用<li> </li>

表格

表格使用 <table> </table>标签.
<tr> </tr> 是行，<td> </td> 是列，所以有两行，行里包含三对列，那么就是两行三列，列标签中的字显示在表格中.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <table border="1px" >
      <tr >
          <td>1</td>  <td>2</td>     <td>3</td>
      </tr>
      <tr>
          <td>4</td>  <td>5</td>     <td>6</td>
      </tr>
    </table>
</body>
</html>