关于html:HTMLCSS-二-HTML语义化标签基本概念

HTML 的次要工作是编辑文本构造和文本内容（也称为语义 semantics）以便浏览器能正确的显示，同时能够让搜索引擎更好的捕获你网页的内容。

语义是指对一个词或者句子含意的正确解释。
语义化标签强调的是 HTML 的构造和 HTML 标签的意义，而不是它显示的款式( 体现 )。

HTML 有 6 种级别的题目, h1~h6。
6 种级别的题目示意文档的 6 级目录的层级关系，比如说：<h1> 用作主题目（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推
一篇一般的文章，题目级别倡议管制在 3 级，其中 <h1> 作为文章的主题目，个别只有一个。

<h1> 一级题目 </h1>
<h2> 二级题目 </h2>
<h3> 三级题目 </h3>
<h4> 四级题目 </h4>
<h5> 五级题目 </h5>
<h6> 六级题目 </h6>
段落 <p> 前后会主动 </p> 换行

<strong> 语气减轻 </strong>
<b> 文字加粗 </b>
<hr />
<em> 强调文本 </em>
<i> 斜体文本 </i>
<hr />
<del> 被删除的文字 </del>
<s> 删除线 </s>
<hr />
<ins> 插入的文字 </ins>
<u> 下划线 </u>
<hr />
<mark> 被标记的文本 </mark>
<br /><br />
<q> 这是短援用 </q>
<blockquote> 这是长援用 </blockquote>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
计算机代码：<code>print("hello world")</code>
<br />
<pre>
锄禾日当午,
汗滴禾下土。谁吃盘中餐,
粒粒皆辛苦。</pre>
<address>
Mailbox by <a href="mailto:1838576587@qq.com">1838576587@qq.com</a>.<br>
WebSite：https://www.timeic.xyz<br />
</address>
<p> 这段文本蕴含 <sub> 下标 </sub></p>
<p> 这段文本蕴含 <sup> 上标 </sup></p>

其中 <span title=”strong”><strong></span>、<span title=”emphasize”><em></span>、<span title=”delete”><del></span>、<span title=”insert”><ins></span>、<mark> 标签在语义上有突出强调的意义; 个别用在有非凡意义的词或句。

而<b>(bold)、<i>(italic)、<s>(Strikethrough)、<u>(underline) 标签仅代表显示上的成果，没有其余语义。

<hr> 水平线，<br> 换行

<q> 为短援用(两端主动加双引号)，援用一段或一句文本。

<blockquote> 为长援用(起始缩进)，援用一篇或一章文本。

<cite> 作品（比方书籍、歌曲、电影、电视节目、绘画、雕塑等等）的题目。

<code> 示意计算机代码(如：C、Java、JavaScript、Python)

<pre> 预格局文本 (以文本编辑时的格局显示，能够应用 字符实体 在浏览器中显示 HTML 代码)。

<address> 示意作者分割信息

<sup>(上标字)和 <sub>(下标字) 可用于内容示意脚注、化学或数学的 公式符号 等。

<!-- 无序列表 -->
<ul>
  <li> 榴莲 </li>
  <li> 臭豆腐 </li>
  <li> 鲱鱼罐头 </li>
  <li> 西红柿 </li>
</ul>

<!-- 有序列表 -->
<ol>
  <li> 刘德华 10000</li>
  <li> 刘若英 1000</li>
  <li>Time Science</li>
</ol>

<!-- 自定义列表 -->
<dl>
  <dt> 关注咱们 </dt>
  <dd> 新浪微博 </dd>
  <dd> 官网微信 </dd>
  <dd> 电话分割 </dd>
</dl>

<!-- 多级列表 -->
<ul>
    <li> 首页 </li>
    <li> 专题
        <ul>
            <li> 前端
                      <ul>
                        <li>HTML</li>
                      <li>CSS</li>
                  </ul>
              </li>
        </ul>
    </li>
    <li> 单干
        <ul>
            <li> 单干模式 </li>
            <li> 联系方式 </li>
        </ul>
    </li>
</ul>

<ul> 标签为 无序列表 ，<ol> 标签为 有序列表

<li> 标签为列表中的我的项目

<dl> 标签为自定义列表

<dt> 标签为列表我的项目(key )

<dd> 标签为列表项的内容(value )

超链接能够是一个字，一个词，或者一组词，也能够是一幅图像，超链接中能够是除了超链接以外的 任何元素 ，您能够点击这些内容来跳转到新的页面或者以后页面中的某个局部( 锚^[>] )

当把鼠标指针挪动到网页中的某个链接上时，箭头会变为一只小手。

超链接应用 <a> 标签定义。

<a href="https://www.timeic.xyz" target="_blank" title="我的集体博客"> 在新窗口关上我的博客 </a>

<a> 标签必须定义 href 属性，能力点击跳转。

href="url" (url^[>] 规定链接指向页面的地址 )
target="_blank" (target 属性用来定义页面打开方式)

① _blank = 新窗口关上

② _self = (默认值) 以后窗口关上
title="超链接" [当鼠标移入超链接时显示的 额定信息，title 为全局属性(所有元素都可应用) ]

<a href="#C4"> 查看章节 4</a> <!-- 点击跳转到 id 属性值为 C4 的元素 -->

<h2> 章节 1</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 2</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 3</h2>
<p> 这边显示该章节的内容……</p>

<h2><a id="C4"> 章节 4</a></h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 5</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 6</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 7</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 8</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 9</h2>
<p> 这边显示该章节的内容……</p>

<h2> 章节 10</h2>
<p> 这边显示该章节的内容……</p>
………………

通过给元素邦定 id 属性，而后通过点击超链接定位到该地位上。

指定了 id 属性的元素，还能够通过在 URL 前面增加 #id 实现垮页面的定位。

id 的属性值是惟一的，不能在同一个 HTML 页面中反复呈现

<base> 标签的作用是为页面上的所有的绝对链接规定默认 URL 或默认打开方式

<base> 标签必须写在 <head> 标签内

<head>
  <base href="http://127.0.0.1:8080" target="_blank" /><!-- 自完结标签 -->
</head>

href="http://127.0.0.1:8080" (HTML 中所有绝对链接会从 “http://127.0.0.1:8080/” 主机目录下拜访)
target="_blank" (HTML 中所有链接会在新窗口关上)

HTML 文档由元素形成，元素由开始标签、完结标签、属性及元素的内容 4 局部组成。

标签用来标记内容块，也用来表明元素内容的意义（即语义），标签应用尖括号突围，并且 html 标签是成对呈现的

如<html>（开始标签）和</html>（完结标签），这两个标签示意一个 HTML 文档开始地位和完结地位。

<head></head>标签形容 HTML 文档的相干信息，之间的内容不会在浏览器页面窗口上显示进去。

<body></body>标签蕴含所有要在浏览器页面窗口上显示的内容，也就是 HTML 文档的主体局部。

尽管并不是所有的开始标签都必须有完结标签对应，然而倡议开始标签最好有一个绝对应的完结标签敞开，使得网页易于浏览和批改。

然而如果在开始标签和完结标签之间没有内容，就不用这样做，如换行标签就能够写成<br />

内容 <br />
另一行内容 <br />

其余没有相应的完结标签的标签有<area>、<base>、<basefont>、<hr>、<img>、<input>、<param>、<link>、<meta>

在 html 里一个标签中能够嵌套多个 html 标签，以实现对某一段文档的多重标签成果，如

然而要留神必须要正确嵌套，如下即是谬误的：

<i><p> 又是 <b> 美妙 </b> 的一天 </i></p>

改过如下：

<p><i> 又是 <b> 美妙 </b> 的一天 </i></p>

HTML 元素是指 开始标签 (start tag) 到 完结标签 (end tag) 的所有代码

而上面的代码就创立了一个 head 元素

<head><title>HTML 中的基本概念 标签、元素、属性 </title></head>

其中 <title> 标签又是嵌套在 <head> 标签中的另一个元素。

HTML 元素又分为 块级元素 和 行内元素(内联元素) 两种

① 行内元素

行内元素不会独占一行。

常见的行内元素有：<span>、<a>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<em>、<del>

② 块级元素

块级元素在显示时会独占一行，不能与其余任何元素并列。

常见的块级元素有：<address>、<center>、<h1>~<h6>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

③ 元素的嵌套

行内元素中不能嵌套块级元素，比方上面这段代码：

<b><div> 我是块元素 </div></b>

p 标签中不能嵌套任何块级元素，比方上面这段代码：

<p><h2> 这是个块元素 </h2></p>

a 标签中能够放任何元素，比方上面这段代码：

<a href="http://www.baidu.com/"><div> 这是块级元素 </div><strong> 这是行内元素 </strong></a>

与元素相干的个性叫做属性，每个属性对应一个属性值，语法为 “ 属性 = 值” , “ 属性 = 值 ” 呈现在元素开始标签的最初一个 “>” 之前，通过空格宰割。能够有任意数量的 “属性 = 值”，并且它们能够已任意程序呈现，属性的应用格局如下：

<StartTag 属性 ='值'> 内容 </EndTag>

引号能够是单引号，也能够是双引号；

<StartTag 属性 ="值"> 内容 </EndTag>

1. 属性中的空格：

属性值能够蕴含空格，然而这种状况下必须应用引号，因为属性与属性之间是应用空格宰割的，如下是正确定义的办法：

<img src="c:/Documents and Settings/test.jpg" width=256 height=34/>

上面则是谬误的：

<img src=c:/Documents and Settings/test.jpg width=256 height=34/>

也就是说，定义属性值的时候肯定是间断字符序列，如果不是间断序列则要加引号进行标注。

2. 属性中值蕴含单引号或者双引号：

单引号和双引号都能够作为属性值。当属性值中具备单引号时，这时就不能再用单引号来去包含属性值了，这时候就能够用双引号来包含属性值；然而，当属性值中有双引号时，属性值中的双引号就要用数字转义字符援用（&#39）或者字符实体援用（"）来代替双引号，如下例：

<p title="欢送来到 &quot; 这里 &quot;"> 青岛 </p>

当浏览器运行并解析 HTML 页面时，遇到两个或两个以上的间断空格或换行时，只将其显示为一个空格成果。这种个性叫做 红色空间折叠。

<html>
    <head>
        <title> 空白 </title>
    </head>
    <body>
        <p> 多个空格         但只会显示一个空格 </p>
    </body>
</html>

关于html:HTMLCSS-二-HTML语义化标签基本概念

语义化标签

题目与段落

文本格式化

列表

超链接

锚点定位 <span id=”ts_mao”></span>

base 标签

HTML 基本概念

html 标签

html 元素

html 属性

属性值的定义

<span title=” 红色空间折叠 ”> 空白 </span>

Just My Socks（注册教程内含优惠码）

关于html:HTMLCSS-二-HTML语义化标签基本概念

语义化标签

题目与段落

文本格式化

列表

超链接

锚点定位 <span id=”ts_mao”></span>

base 标签

HTML 基本概念

html 标签

html 元素

html 属性

属性值的定义

<span title=” 红色空间折叠 ”> 空白 </span>

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）