前端学习——第二天HTML基本知识

最新推荐文章于 2024-07-23 21:52:05 发布

岁秋

最新推荐文章于 2024-07-23 21:52:05 发布

阅读量193

点赞数 3

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/m0_46476764/article/details/108697488

版权

前端学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

HTML

1. &lt meta &gt元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta> 元素。
例如：

<meta charset="utf-8">

这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。这意味着你的web页面可以显示任意的语言；

许多元素包含了name 和 content 特性：name 指定了meta 元素的类型；说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。
例如：

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

2.HTML的注释

<html>
<head>
<!--内容放这里-->
<title>上面的是注释，不显示</title>
</head>
</html>

3.斜体字与强调

<!--斜体字语法-->
<em>斜体字</em>
<i>i的作用与em相同</i>
<!--粗体强调-->
<strong>粗体</strong>
<!--<b></b>与<strong></stong>相同效果-->
<b>粗体</b>
<!--下划线-->
<u>下划线</u>

, , 和 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但CSS仍然不被完全支持的时期。像这样的元素，仅仅影响表象而且没有语义，被称为表象元素（presentational elements）并且不应该再被使用。
还有就是,small标签内的内容会比它父标签中的文字小一些，一般用来表示一些细则类的东西，比如合同小字，版权声明。

4.链接与电子邮件链接

链接：

<a href="www.qq.com" title="这是QQ的网站"></a>
<!--href指的是超链接，title指的是对链接的描述，鼠标靠经时显示-->

电子邮件链接：
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用<a>元素和mailto：URL的方案。
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。

<a href="mailto:nowhere@mozilla.org">send to nowhere</a>

到时点击后就会直接打开电子邮件，如果mailto：后面没有地址，那么邮件收件方为空，需要自己填写，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件

5.描述列表(description list)

描述列表使用与其他列表类型不同的闭合标签—<dl>(description list); 此外，每一项都用<dt>(description term) 元素闭合。每个描述都用<dd>(description description) 元素闭合

<dl>
<dt>培根</dt>
<dd>整个世界的粘合剂。</dd>
<dt>鸡蛋</dt>
<dd>一块蛋糕的粘合剂。<dd>
<dt>咖啡</dt>
<dd>一种浅棕色的饮料。</dd>
<dd>可以在清晨带来活力。</dd>
</dl>

结果：
培根
    整个世界的粘合剂。
鸡蛋 
    一块蛋糕的粘合剂
咖啡
    一种浅棕色的饮料。
    可以在清晨带来活力。

6.缩略语`<abbr></abbr>`

它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。
例子：

<p><abbr title="超文本标记语言">html</abbr>可以组织网页文档</p>

当鼠标移到html上时对其的解释就会出现；

7.上标和下标

上标；下标;
例子：

<!--打一个水的化学式-->
<p>h<sub>2</sub>o</p>
<!--打一个x的平方-->
<p>x<sup>2</sup></p>

8.标注时间和日期

不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，<time> 元素允许你附上清晰的、可被机器识别的时间/日期来实现这种需求。

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

9.br和hr

 可在段落中进行换行；  是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。
<hr>在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。

10.地址

例如：

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

11.锚点与跳转

使用 name：
同页面跳转

//a.html
<a href="#001">去底部</a>
.......
<a name="001">底部</a>

不同页面跳转

//a.html
<a href="b.html#002">去b页面的底部</a>
//b.html
<a name="002">底部</a>

使用id（与name 用法相同）
区别：
alt

12.cite，q，blockquote引用

cite语义为表示参考的东西，和斜体效果相同，语义不同。
用来写引用，书名，电影名，论文引用等等
<cite>《web前端》</cite>

q是一个短引用（行内引用），通常用来引用名人名言什么的
比如子曰：<q>我没说过</q>，
效果为：子曰：我没说过。会自动加双引号，且复制时该双引号不可选，因为它是通过默认css加上去的。

blockquote标签表示一个长引用(块级引用)，会独占一行或一段。用来引用一段话或其他的语句。不会加双引号。

13.del，ins

del标签使文本多一条划线，表示过期的数据等，例如：<del>数据</del> —— 数据
ins：表示一个插入的内容，会有个下划线
例子：你叫<ins>xxxxxxx</ins>——你叫xxxxxxx

14.在页面中插入代码段

pre标签：预格式标签，会将代码中的格式保存，不会忽略多个空格。<pre></pre>

code标签：专门用来表示代码，但是不会保存格式。所以一般将code嵌入pre里一起表示代码。

岁秋

关注

3
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录