语义化标签

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 为全局属性(所有元素都可应用) ]

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

<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 标签

<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基本概念

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

html标签

标签用来标记内容块,也用来表明元素内容的意义(即语义),标签应用尖括号突围,并且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元素

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>

html属性

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

<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)或者 字符实体 援用(&quot;)来代替双引号,如下例:

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

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

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

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