乐趣区

关于html:学习笔记HTML常用标签

jiezi

1. 排版标签

排版标签次要和 css 搭配应用，显示网页构造的标签，是网页布局最罕用的标签。

1.1 题目标签 h

单词缩写：head 头部. 题目 title 文档题目

为了使网页更具备语义化，咱们常常会在页面中用到题目标签，HTML 提供了 6 个等级的题目，即

题目标签语义： 作为题目应用，并且根据重要性递加

其根本语法格局如下：

<h1>   题目文本   </h1>
<h2>   题目文本   </h2>
<h3>   题目文本   </h3>
<h4>   题目文本   </h4>
<h5>   题目文本   </h5>
<h6>   题目文本   </h6>

显示成果：

1.2 段落标签 p

单词缩写：paragraph 段落 [ˈpærəgræf] 毋庸记这个单词

作用语义：

能够把 HTML 文档宰割为若干段落

在网页中要把文字有条理地显示进去，离不开段落标签，就如同咱们平时写文章一样，整个网页也能够分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是 HTML 文档中最常见的标签，默认状况下，文本在一个段落中会依据浏览器窗口的大小主动换行。

1.3 水平线标签 hr

单词缩写：horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中经常看到一些水平线将段落与段落之间隔开，使得文档构造清晰，层次分明。这些水平线能够通过插入图片实现，也能够简略地通过标签来实现，\<hr /> 就是创立横跨网页水平线的标签。其根本语法格局如下：

<hr /> 是单标签

在网页中显示默认款式的水平线。

1.4 换行标签 br

单词缩写：break 打断 , 换行

在 HTML 中，一个段落中的文字会从左到右顺次排列，直到浏览器窗口的右端，而后主动换行。如果心愿某段文本强制换行显示，就须要应用换行标签

<br />

这时如果还像在 word 中间接敲回车键换行就不起作用了。

1.5 div 和 span 标签

div span 是没有语义的 是咱们网页布局次要的 2 个盒子 想必你听过 css+div

div 就是 division 的缩写 宰割，分区的意思 其实有很多 div 来组合网页。

span 跨度，跨距；范畴

语法格局：

<div> 这是头部 </div>    <span> 今日价格 </span>

他们两个都是盒子，用来装咱们网页元素的，只不过他们有区别，当初咱们次要记住应用办法和特点就好了

  • div 标签 用来布局的，然而当初一行只能放一个 div
  • span 标签 用来布局的，一行上能够放好多个 span

排版标签总结

标签名 定义 阐明
<hx></hx> 题目标签 作为题目应用，并且根据重要性递加
<p></p> 段落标签 能够把 HTML 文档宰割为若干段落
\<hr /> 水平线标签 没啥可说的，就是一条线
\<br /> 换行标签
<div></div> div 标签 用来布局的，然而当初一行只能放一个 div
<span></span> span 标签 用来布局的，一行上能够放好多个 span

2. 文本格式化标签

在网页中，有时须要为文字设置粗体、斜体或下划线成果，这时就须要用到 HTML 中的文本格式化标签，使文字以非凡的形式显示。

区别：

  • b 只是加粗 strong 除了能够加粗还有 强调的意思，语义更强烈。剩下的同理 …

3. 标签属性

应用 HTML 制作网页时，如果想让 HTML 标签提供更多的信息，能够应用 HTML 标签的属性加以设置。其根本语法格局如下：

< 标签名 属性 1 ="属性值 1" 属性 2 ="属性值 2" …> 内容 </ 标签名 >

4. 图像标签 img

单词缩写：image 图像

要想在网页中显示图像就须要应用图像标签，接下来将具体介绍图像标签 <img /> 以及和他相干的属性。

语法如下：

<img src="图像 URL" />

该语法中 src 属性用于指定图像文件的门路和文件名，他是 img 标签的必须属性。

留神:

  1. 标签能够领有多个属性，必须写在开始标签中，位于标签名前面。
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格离开。
  3. 采取 键值对 的格局 key=”value” 的格局

比方:

失常的 <br />
<img src="cz.jpg" width="300" height="300" /><br />
带有边框的 <br />
<img src="cz.jpg" width="300" height="300" border="3" /><br />
有提醒文本的 <br />
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
有替换文本的 <br />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

5. 链接标签

单词缩写：anchor 的缩写 [ˈæŋkə(r)]。根本解释 锚, 铁锚 的

在 HTML 中创立超链接非常简单，只需用标签把文字包含起来就好。

语法格局：

<a href="跳转指标" target="指标窗口的弹出形式"> 文本或图像 </a>
属性 作用
href 用于指定链接指标的 url 地址，（必须属性）当为标签利用 href 属性时，它就具备了超链接的性能
target 用于指定链接页面的打开方式，其取值有_self 和_blank 两种，其中_self 为默认值，__blank 为在新窗口中打开方式。

留神：

  1. 内部链接 须要增加 http:// www.baidu.com
  2. 外部链接 间接链接外部页面名称即可 比方 < a href=”index.html”> 首页
  3. 如果过后没有确定链接指标时，通常将链接标签的 href 属性值定义为“#”(即 href=”#”)，示意该链接临时为一个空链接。
  4. 不仅能够创立文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都能够增加超链接。

6. 正文标签

在 HTML 中还有一种非凡的标签——正文标签。如果须要在 HTML 文档中增加一些便于浏览和了解但又不须要显示在页面中的正文文字，就须要应用正文标签。

简略解释：

正文内容不会显示在浏览器窗口中，然而作为 HTML 文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就能够看到。

语法格局：

    <!-- 正文语句 -->     快捷键是：ctrl + /       或者 ctrl +shift + /

团队约定

正文是给人看的，目标是为了更好的解释这部分代码是干啥的，程序是不执行这个代码的

个别用于简略的形容，如某些状态形容、属性形容等

正文内容前后各一个空格字符，正文位于要正文代码的下面，独自占一行

举荐：

<!-- Comment Text -->
<div>...</div>

不举荐：

<div>...</div><!-- Comment Text -->    
    
<div><!-- Comment Text -->
    ...
</div>

7. 门路(重点、难点)

理论工作中，咱们的文件不能轻易乱放，否则用起来很难疾速的找到他们，因而咱们须要一个文件夹来治理他们。

相对路径

以援用文件之网页所在位置为参考根底，而建设出的目录门路。因而，当保留于不同目录的网页援用同一个文件时，所应用的门路将不雷同，故称之为相对路径。

门路分类 符号 阐明
同一级门路 ./ 只需输出图像文件的名称即可，如 <img src=”./baidu.gif” />。
下一级门路 “/” 图像文件位于 HTML 文件同级文件夹下（例如文件夹名称为：images）如 <img src=”./images/baidu.gif” />。
上一级门路 “../” 在文件名之前退出“../”，如果是上两级，则须要应用“../ ../”，以此类推，如 <img src=”../baidu.gif” />。

绝对路径

绝对路径以 Web 站点根目录为参考根底的目录门路。之所以称为相对，意指当所有网页援用同一个文件时，所应用的门路都是一样的。

“D:\web\img\logo.gif”，或残缺的网络地址，例如“http://www.itcast.cn/images/l…”。

8. 锚点定位

通过创立锚点链接，用户可能疾速定位到指标内容。

创立锚点链接分为两步：

1. 应用相应的 id 名标注跳转指标的地位。(找指标)
  <h3 id="two"> 第 2 集 </h3> 

2. 应用 <a href="#id 名"> 链接文本 </a> 创立链接文本
  <a href="#two">

9. base 标签

语法：

<base target="_blank" />


总结：

  1. base 能够设置整体链接的关上状态
  2. base 写到 \<head>\</head> 之间
  3. 把所有的连贯 都默认增加 target=”_blank”

整体链接~ 到 ~ 整体汇合 所有链接 以新窗口关上页面 ~ 是

10. 预格式化文本 pre 标签

<pre> 标签可定义预格式化的文本。

被突围在 \<pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会出现为等宽字体。

<pre>

  此例演示如何应用 pre 标签

  对空行和 空格

  进行管制

</pre>

所谓的预格式化文本就是，依照咱们事后写好的文字格局来显示页面，保留空格和换行等。

有了这个标签，外面的文字，会依照咱们书写的模式显示，不须要段落和换行标签了。然而，比拟少用，因为不好整体管制。

11. 特殊字符

一些非凡的符号，咱们再 html 外面很难或者 不不便间接 应用，咱们此时能够应用上面的代替代码。

尽管有很多，然而咱们平时用的比拟较少，大家重点记住 空格 大于号 小于号 就能够了，剩下的回来查阅。

总结：

  1. 是以 运算符 & 结尾, 以 分号运算符 ; 结尾。
  2. 他们不是标签，而是符号。
  3. HTML 中不能应用小于号“<”和大于号“>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中应用字符实体

团队约定

举荐：

   <a href="#">more &gt;&gt;</a>

不举荐：

   <a href="#">more >> </a>
退出移动版