语义化标签
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. 属性中值包含单引号或者双引号:
单引号和双引号都可以作为属性值。当属性值中具有单引号时,这时就不能再用单引号来去包括属性值了,这时候就可以用双引号来包括属性值;但是,当属性值中有双引号时,属性值中的双引号就要用数字转义字符引用('
)或者 字符实体 引用("
)来代替双引号,如下例:
<p title="欢迎来到"这里"">青岛</p>
<span title="白色空间折叠">空白</span>
当浏览器运行并解析 HTML 页面时,遇到两个或两个以上的连续空格或换行时,只将其显示为一个空格效果。这种特性叫做白色空间折叠。
<html>
<head>
<title>空白</title>
</head>
<body>
<p>多个空格 但只会显示一个空格</p>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。