html学习总结

最新推荐文章于 2024-09-25 09:01:21 发布

#9400D3

最新推荐文章于 2024-09-25 09:01:21 发布

阅读量1.5k

点赞数 31

文章标签： html5

本文链接：https://blog.csdn.net/2301_80842172/article/details/135655690

版权

本文详细介绍了HTML的基本语法规范，包括标签的使用、结构（如根标签、头部、主体等）、文档类型声明、语言设置、各种常用的标签如标题、段落、换行、图像、超链接、表格和列表，以及注释和特殊字符处理。

摘要由CSDN通过智能技术生成

一.html基本语法规范

1，html标签是通过尖括号<>包围起来的关键词，如<html>；

2，大多html标签成对出现，统称为双标签，其中第一个为开始标签，最后一个为结束标签；当然还存在单标签，如<br />；

3.双标签存在两种关系：包含关系（也可理解为嵌套），并列关系；

4.HTML文档的后缀名必须为.html或.htm。

二，html基本结构标签

<html></html> 该标签为HTML标签，称为根标签；

<head></head> 该标签为文档头部，在该标签中必须有title标签；

<title></title> 该标签为文档（网页）的标题；

<body></body> 该标签为文档的主体，包含文章内容；

<html>
   <head>
          <title>文章标题</title>
   </head>
   <body>
          文章内容
   </body>
</html>

三，文档类型声明标签

<!DOCTYPE>为文档类型声明，用以指出当前页面是何版本来显示网页，其位于文档最前处，需注意它不是一个~~html标签~~，它是文档类型声明标签；

四，lang语言种类

lang语言用来定义当前文档所显示的语言种类，如en为英语，zh-CN为中文，由此可定义不同语言，除此以外，定义为en的文档也可显示中文，定义为zh-CN的文档也可以显示英文。

五，html常用标签

1，标题标签

标题标签有6个等级，<h1>-<h6>为一级标题到六级标题，其为双标签，重要性逐级递减，字号也逐级减小，注意每个标题独占一行；

2，段落标签

<p>标签作用为分段，其可将文档分为若干段落，其为双标签，根据浏览器窗口的大小文本段落会自动换行，同时段落间存在空隙；

3，换行标签

若不使用换行标签，则文本会在浏览器窗口显示不下时自动换行，<br />为强制换行标签，其为单标签，使用其换行后，两行间没有空隙，不同于段落标签；

4，文本格式化标签

文本格式化标签可作用于将文字设置为粗体，下划线，删除线等效果，包括

<strong></strong> <b></b> 加粗

<em></em> <i></i> 倾斜

<del></del> <s></s> 删除线

<ins></ins> <u></u> 下划线

上述标签中前者语义更强烈。

5，<div>标签和<span>标签

其皆无语义，其中<div>标签用来布局，注意一行只能用一个<div>;

<span>也用来布局，一行可使用多个<span>标签。

6，图像标签和路径

1，图像标签

<img>标签用于定义页面中图像，如<img src=" " />，注意src为<img>标签的必须属性，用于指定图像文件的路径和文件名，其中图像标签还有其他属性，如alt属性为文本，在图像不能显示时显示，为替换文本，title属性为文本，是当鼠标放在图像上时显示的文字，width属性值为像素，可设置图像的宽度，height属性值为像素，可以设置图像的高度，border属性值为像素，可设置图像的边框粗细；

注意：1，图像标签可以有多个属性，必须写在标签名后；

2，属性间不分先后顺序·，标签名与属性，属性与属性之间均以空格分开；

3，属性采取键值对的格式，key=“value”的格式。

2，路径

路径可分为相对路径与绝对路径；

相对路径：是以引用文件所在位置为参考基础，而建立出的目录路径，即图片相对于html页面的位置，同级，上下级都是图片相对于页面的位置。

若为同级，则如<img src="baidu.gif" />

若为下级，则如<img src="images/baidu.gif" />

若为上级，则如<img src="../baidu.gif" />

绝对路径：是指目录下的绝对位置，直接到达目标位置，如“http://www.itcast.cn/images/logo.gif”或“D:\web\img\logo.gif”。

7，超链接标签

<a>标签用于定义超链接，可从一个页面跳转到另一个页面。

1.格式

<a href="跳转目标处" target="弹出方式">文本或图像<a/>

target中_self为默认值，_blank为新窗口中的打开方式。

2，链接分类

外部链接，内部链接，空连接（<a href="#">首页</a>），下载链接（若href中地址是一个文件或压缩包会下载此文件），网页元素链接，锚点链接（<a href="#two">2处</a> <h3 id="two">2处内容介绍</h3>）

8，表格标签

1，基本语法

<table>
    <tr>
         <td>单元格中文字</td>
    </tr>
</table>

<table></table>为定义表格的标签；

<tr></tr>为定义表格中行的标签；

<td></td>定义表格中的单元格；

2，表头单元格标签

<th></th>对应表格的表头部分；

<table>
    <tr>
         <th>单元格中文字</th>
    </tr>
</table>

为突出重要性，表头单元格中的文字会加粗居中显示。

3，表格属性

如align,可规定表格相对周围元素的对齐方式；border规定表格单元格是否有边框；cellpadding规定单元边沿与其内容之间的空白，默认1像素；ccellspacing规定单元格间空白，默认2像素；width规定表格的宽度。

9，表格结构标签

1，<thead></thead>定义表格头部，内部需有<tr>;

2,<tbody></tbody>定义表格的主体；

3,以上标签都放在<table></table>标签中。

10，合并单元格

跨行合并：rowspan="合并单元格个数"

跨列合并：colspan="合并单元格个数"

11，列表标签

1，有序列表

<ol>定义有序列表，<li>定义列表项；

2，无序列表

<ul>定义无序列表， <li>定义列表项；

3，自定义列表

<dl>定义列表，与 <dt><dd>一起使用。<dt>中为主要标题。

六，html中的注释和特殊字符

1，注释

以”结束（快捷键：ctrl + /）

2，特殊字符

如空格符为&nbsp，<为&lt，>为&gt等；具体可通过查表；

#9400D3

关注

31
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫