前端之HTML 文本、超链接

文本
- 标题和段落
- - 编辑结构层次
  - 背景图像的固定
- 列表Lists
- 重点强调
文本元素语义化
- 描述列表
- 引用
- 引文
- 缩略语
- 联系方式
- 上标和下标
- 展示代码
- time标记时间和日期
超链接
- 网页链接
- 指向指定文档
- 文档片段
- URL
- 下载
- 邮件

文本

HTML的主要工作是编辑文本结构和文本内容。

标题和段落

文章的文本结构都是由标题和段落组成，这样的结构更合适阅读。

<h1> 表示主标题（the main heading）
<h2> 表示二级子标题（subheadings），
<h3> 表示三级子标题（sub-subheadings）
…
<h6>
<p>段落标签

编辑结构层次

<h1>是顶级标题，一个页面最好只出现一次。

实例——诗经

背景图像的固定

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

列表Lists

前端之HTML基础——列表

重点强调

强调—— 斜体
非常重要 —— 粗体
外国文字，分类名称，技术术语，一种思想斜——体字 
关键字，产品名称，引导句——粗体字 
专有名词，拼写错误——下划线
删除线<del>

<p>I am <em>glad</em> you weren't <em>late</em>.</p><p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p><p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

实例——诗经关雎

文本元素语义化

描述列表

<dl><dh>描述列表表头</dh><dt>术语</dt><dd>描述术语</dd><dt>内心独白</dt><dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd><dt>语言独白</dt><dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd><dt>旁白</dt><dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

dt{font-weight: bolder;
}

引用

<!-- 块引用 -->
<blockquote cite="https://hanyu.baidu.com/shici/detail?pid=ce590035f57411e5b0c8c8e0eb15ce01&from=kg0&highlight=%E5%AD%A6%E8%80%8C%E6%97%B6%E4%B9%A0%E4%B9%8B%EF%BC%8C%E4%B8%8D%E4%BA%A6%E4%B9%90%E4%B9%8E"><p>子曰：“学而时习之，不亦说乎”。</p>
</blockquote><!-- 行内引用 -->
<p>老师教育我们——<q cite="https://hanyu.baidu.com/shici/detail?pid=ce590035f57411e5b0c8c8e0eb15ce01&from=kg0&highlight=%E5%AD%A6%E8%80%8C%E6%97%B6%E4%B9%A0%E4%B9%8B%EF%BC%8C%E4%B8%8D%E4%BA%A6%E4%B9%90%E4%B9%8E">己所不欲，勿施于人。</q></p>

块引用——一个段落、多个段落、一个列表等
cite=“url”，url指向引用资源

引文

给cite元素附上链接

    <p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：</p><blockquote cite="https://zh.wikipedia.org/zh-hans/孔子"><p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p></blockquote><p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>

缩略语

<p><abbr title="美国国家航空航天局（National Aeronautics and Space Administration）">NASA</abbr> 做了一些动人心弦的事情。</p>

联系方式

address 元素内有编写HTML文档的人（或组织）的联系方式

<p>Contact the author of this page:</p><address><a href="mailto:jim@rock.com">jim@rock.com</a><br><a href="tel:+13115552368">(311) 555-2368</a>
</address>

上标和下标

<!-- 化学方程式 -->
<p>C<sub>2</sub>H<sub>5</sub>OH</p><!-- x的二次方 -->
<p>x<sup>2</sup></p>

展示代码

<pre> 元素中的文本会保留空格和换行符
<code>用于标记计算机通用代码。
<var>标记变量名
<kbd>标记键盘按键
<samp>标记计算机程序的输出结果

<pre><code>
const para = document.querySelector('p');para.onclick = function() {alert('噢，噢，噢，别点我了。');
}
</code></pre>

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>

超链接

超链接使我们能够将我们的文档链接到任何其他文档，也可以链接到文档的指定部分。

超链接=内容+目标（+补充）
内容：文本，图片等。
目标：网址或文档内的id

网页链接

<h3><a href="https://so.gushiwen.cn/shiwenv_4c5705b99143.aspx" title="诗经关雎详细内容">关雎</a></h3>

指向指定文档

<p><a href="./index.html" title="返回主页面">回到主页</a></p>

文档片段

链接到HTML文档的特定部分。
回到文档顶部

<!-- 定位:特定的id -->
<h1 id="top">诗经</h1><!-- 返回指定id位置 -->
<p><a href="#top" title="返回顶部">返回顶部</a>
</p>

URL

绝对URL：指向由其在Web上的绝对位置定义的位置。（从根目录开始）
相对URL：指向与您链接的文件相关的位置。（从当前文件开始）

../ 上一级目录
.    当前目录
/     根目录

下载

<!-- 下载：文件名是文件的本名 -->
<p><a href="./images/text-bg.jpg" download>下载背景图片(作者原图)</a>
</p>
<!-- 下载：文件名是指定文件名 -->
<p><a href="./images/text-bg.jpg" download="2022年2月6日">下载背景图片(.jfif)</a>
</p>

邮件

 <p><a href="mailto:3108592570@qq.com?subject=主题：HTML学习——春晓&body=你好，我是在这里发送的" title="发送内容：(主题：HTML学习——春晓 你好，我是在这里发送的)">给作者发送电子邮件</a>
</p>

注意：
尽可能使用相对链接
本节网页实例
下一节：前端之网站结构语义化

前端之HTML 文本、超链接相关推荐

前端开发之html超链接
前端开发之html字体属性和超链接前言前端开发之html超链接 1.超链接的三种形式 1.外部链接:链接到外部文件举例: <a href="02页面.html"> ...
超链接（文本超链接、图片超链接）
body> 超链接标签(用于从一个页面链接到另一个页面) 文本超链接 ...
web前端介绍_html-超文本标记语言
web 前端简介 1. web1.0 时代的网页制作 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件应用程序有两 ...
使用CSS属性处理前端开发中长文本造成的内容显示重叠问题
学习网站:Handling Long and Unexpected Content in CSS 例1:文本和图标(accordion)重叠解决方案: .button {padding-right: ...
【Java 后端接收前端的富文本数据，其中标签样式数据丢失解决】
[问题处理记录] 问题前端json字符串传值富文本格式的字段给我,字符串参数如下: "<p data-we-empty-p="" style="text ...
Web前端剪切板文本分享到文件发送
注意:本文Demo请点击文末"阅读原文"方便查看. 前言现在前端富交互能力越来越强,也有很多产品基于前端技术进行离线应用开发或在线应用体验增强:这其中剪切板操作也是一个经常会亮相 ...
添加pdfFactory Pro虚拟打印机的文本超链接
在我们平常使用pdfFactory Pro虚拟打印机打印的时候,要想把相关知识点链接到百度百科的话,就可以使用超链接的形式完成添加.在文本中点击超链接便可以直接跳转到相关的知识点网站,这样可以更全面的 ...
Web前端——HTML中的超链接
一.超链接 HTML使用标签 <a>来设置超文本链接. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当您把鼠标指 ...
特别好用的前端html富文本编辑器wangEditor个人使用案例
当前为jQuery版本demo,详细Vue组件版本请点此链接:特别好用的Vue富文本编辑器wangEditor自己使用案例组件,附源码,直接使用_膨胀的菜盒的博客-CSDN博客因公司项目后台管理平台 ...

前端之HTML 文本、超链接

前端之HTML 文本、超链接

文本

标题和段落

编辑结构层次

背景图像的固定

列表Lists

重点强调

文本元素语义化

描述列表

引用

引文

缩略语

联系方式

上标和下标

展示代码

time标记时间和日期

超链接

网页链接

指向指定文档

文档片段

URL

下载

邮件

前端之HTML 文本、超链接相关推荐

最新文章

热门文章