AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML之文本格式化、链接、头部、CSS（笔记小结）

2023-01-17 176
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML之文本格式化、链接、头部、CSS（笔记小结）

1 文本格式化

1.1 文本格式化标签

  • 使用某些标签对文本进行格式化，如加粗、倾斜等，这类标签即称为文本格式化标签。
  • 如下常用的文本格式化标签有：
标签 说明
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

1.2 举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文本格式化标签</title>
</head>

<body>
    <b>【这是规则】</b><br>

    这是<b> 定义粗体文本</b> 的标签！<br>
    这是<em> 定义着重文字</em> 的标签！<br>
    这是<i> 定义斜体字</i> 的标签！<br>
    这是<small> 定义小号字</small> 的标签！<br>
    这是<strong> 定义加重语气</strong> 的标签！<br>
    这是<sub> 定义下标字</sub> 的标签！<br>
    这是<sup> 定义上标字</sup> 的标签！<br>
    这是<ins> 定义插入字</ins> 的标签！<br>
    这是<del> 定义删除字</del> 的标签！<br>

    <hr>
    <p><b>【这是举例】</b></p>
    <p>曾经有一份真挚的爱情<b>摆在我的面前</b></p>
    <p>我没有好好珍惜 <i>等到失去时</i> 才感到后悔</p>
    <p>如果老天能够再<sup>给我一次机会</sup></p>
    <p>我会对那个女孩说 <strong>我爱你</strong></p>
    <p>如果非要在这个爱上<sub>加个期限的话</sub></p>
    <p>我希望是 <del>一万年</del></p>
</body>

</html>

在这里插入图片描述

2 链接

  • 使用标签 <a>来设置超文本链接;
  • 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像;
  • 以点击这些内容来跳转到新的文档或者当前文档中的某个部分;
  • 在标签<a> 中使用了href属性来描述链接的地址。

2.1 链接标签

  • 使用标签 <a>来表示超文本链接；
  • 使用href属性描述链接地址。

2.2 链接语法

<a href="url">链接文本</a>

2.3 链接属性

属性 说明
<href> 链接地址
<target > 定义被链接的文档在何处显示
<id> 创建一个 HTML 文档书签

2.4 举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>链接学习</title>
</head>

<body>
    <p><b>在当前标签中打开网页</b></p>
    <a href="https://blog.csdn.net/NoamaNelson">NoamaNelson的CSND博客</a><br>
    <a href="https://www.cnblogs.com/noamanelson">NoamaNelson的博客园</a><br>
    <hr>
    <p><b>在新的窗口中打开网页</b></p>
    <a href="https://blog.csdn.net/NoamaNelson" target="_blank">NoamaNelson的CSND博客</a><br>
    <a href="https://www.cnblogs.com/noamanelson" target="_blank">NoamaNelson的博客园</a><br>
    <hr>
    <p><b>id属性</b></p>
    <p><a id="NoamaNelson">NoamaNelson的博客有：</a></p>
    <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">CSND博客</a><br>
    <a href="https://www.cnblogs.com/noamanelson#NoamaNelson">博客园博客</a><br>
    <hr>
    <p>创建图片链接(有边框)：<br>
        <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">
            <img border="10" src="F:\html_study\img\1.jpg" alt="NoamaNelson的CSND博客" width="64" height="64"></img></a>
    </p>
    <p>创建图片链接(无边框)：<br>
        <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">
            <img border="0" src="F:\html_study\img\1.jpg" alt="NoamaNelson的CSND博客" width="64" height="64"></img></a>
    </p>
</body>
</html>

在这里插入图片描述

3 头部

3.1 head元素

  • <head> 元素包含了所有的头部标签元素；
  • <head>元素中可插入脚本（scripts）, 样式文件（CSS），及各种meta信息；
  • 可添加在头部区域的元素标签有：
<title>, <style>, <meta>, <link>, <script>, <noscript> ,<base>

3.2 title元素

  • <title>定义文档标题；
  • 文档中是必须有的；
  • 应用：
①浏览器工具栏的标题；
②收藏夹中的标题；
③搜索引擎结果页面的标题。
  • 举例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题学习</title>
    </head>

    <body>
        什么都没有！！！
    </body>
</html>

在这里插入图片描述

3.3 base元素

  • <base>描述基本的链接地址/链接目标;
  • 该标签作为HTML文档中所有的链接标签的默认链接；
  • 举例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题学习</title>
    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base">CSDN博客</a>
    </body>
</html>

在这里插入图片描述

3.4 style元素

  • <style>定义了HTML文档的样式文件引用地址；
  • <style> 元素中你也可以直接添加样式来渲染 HTML 文档。
  • 举例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题学习</title>

        <!-- style -->
        <style type="text/css">
        body {background-color: coral;}
        a {color: darkblue;}
        </style>

    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base"><b>CSDN博客</b></a>
    </body>
</html>

在这里插入图片描述

3.5 link 元素

  • 定义文档与外部资源之间的关系；
  • 通常用于链接到样式表；
  • 举例：
/* my.css */

body {background-color: rgb(170, 80, 255);}
a {color: darkblue;}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>头部学习</title>

        <!-- style -->
        <!-- <style type="text/css">
        body {background-color: coral;}
        a {color: darkblue;} -->
        <!-- </style> -->

        <link rel="stylesheet" type="text/css" href="F:\html_study\css\my.css">

    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base"><b>CSDN博客</b></a>
    </body>
</html>

在这里插入图片描述

3.6 meta元素

  • <meta>标签描述了一些基本的元数据;
  • 常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据;
  • <meta> 一般放置于 <head> 区域；
  • 元数据可使用于浏览器，搜索引擎）等。
  • 举例：
<!DOCTYPE html>
<html>
    <head>
        <!-- meta元素 -->
        <!-- meta可以定义网页作者、编码、页面刷新、等等 -->
        <meta charset="utf-8" name="author" content="NoamaNelson" http-equiv="refresh" content="3">
        <title>头部学习</title>

        <!-- style -->
        <!-- <style type="text/css">
        body {background-color: coral;}
        a {color: darkblue;} -->
        <!-- </style> -->

        <link rel="stylesheet" type="text/css" href="F:\html_study\css\my.css">



    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base"><b>CSDN博客</b></a>
    </body>
</html>

3.7 script元素

  • <script>标签用于加载脚本文件；
  • 后续学习。

4 CSS

  • CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式；
  • CSS 可以通过以下方式添加到HTML中：
① 内联样式- 在HTML元素中使用"style" 属性；
②内部样式表 -在HTML文档头部 <head> 区域使用 <style> 元素 来包含CSS；
③外部引用 - 使用外部 CSS 文件；
  • 建议使用通过外部引用CSS文件;
  • 样式标签有<style>和<link>。

4.1 内联样式

  • 当特殊的样式需要应用到个别元素时，可使用内联样式；
  • 方法是在相关的标签中使用样式属性；
  • 样式属性可以包含任何 CSS 属性；
  • 举例：
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>CSS简单了解</title>
</head>


<body>
    <!-- 内联样式-背景色-居中-->
    <p style="background-color: darkblue;text-align:center;">人生自古谁无死，</p>
    <p style="background-color: rgb(28, 139, 0);text-align:center;">留取丹心照汗青。</p>
    <hr>
    <!-- 内联样式-字体颜色-居中-->
    <p style="font-family: 'Courier New';color: red;text-align:center;">天生我材必有用，</p>
    <p style="font-family: 'Segoe UI';color: tomato;text-align:center;">千金散尽还复来。</p>
    <hr>
    <!-- 内联样式-字体大小-居中-->
    <p style="font-size: larger;text-align:center;">人生得意须尽欢，</p>
    <p style="font-size: larger;text-align:center;">莫使金樽空对月。</p>


</body>
</html>

在这里插入图片描述

4.2 内部样式表

  • 当单个文件需要特别样式时，就可以使用内部样式表；
  • 在<head> 部分通过 <style>标签定义内部样式表；
  • 举例：
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>CSS简单了解</title>
    <style>
        body {background-color: yellow;}
        p {text-align: center;font-family: 'Courier New', Courier, monospace; color:blue; font-weight: bold;}
    </style>
</head>


<body>
    <!-- 内联样式-背景色-居中-->
    <!-- <p style="background-color: darkblue;text-align:center;">人生自古谁无死，</p>
    <p style="background-color: rgb(28, 139, 0);text-align:center;">留取丹心照汗青。</p> -->
    <hr>
    <!-- 内联样式-字体颜色-居中-->
    <!-- <p style="font-family: 'Courier New';color: red;text-align:center;">天生我材必有用，</p>
    <p style="font-family: 'Segoe UI';color: tomato;text-align:center;">千金散尽还复来。</p> -->
    <hr>
    <!-- 内联样式-字体大小-居中-->
    <!-- <p style="font-size: larger;text-align:center;">人生得意须尽欢，</p>
    <p style="font-size: larger;text-align:center;">莫使金樽空对月。</p> -->

    <p>登鹳雀楼</p>
    <p>昔人已乘黄鹤去，<br>此地空余黄鹤楼。<br>黄鹤一去不复返，<br>白云千载空悠悠。<br>晴川历历汉阳树,<br>芳草萋萋鹦鹉洲。<br>日暮乡关何处是？<br>烟波江上使人愁。</p>

</body>
</html>

在这里插入图片描述

4.3 外部样式表

  • 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择；
  • 可以通过更改一个文件来改变整个站点的外观。
/* study_css.css*/

body {background-color:deeppink;}
p {text-align: center;font-family: 'Courier New', Courier, monospace; color:blue; font-weight: bold;}
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>CSS简单了解</title>
    <link rel="stylesheet" type="text/css" href="F:\html_study\css\study_css.css">
</head>


<body>

    <p>登高</p>
    <p>风急天高猿啸哀，<br>渚清沙白鸟飞回。<br>无边落木萧萧下，<br>不尽长江滚滚来。<br>万里悲秋常作客,<br>百年多病独登台。<br>艰难苦恨繁霜鬓，<br>潦倒新停浊酒杯。</p>

</body>
</html>

在这里插入图片描述

文章标签：
前端开发
搜索推荐
关键词：
HTML文本
CSS html
HTML CSS
HTML链接
HTML笔记
虫无涯
目录
相关文章
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
67 1
东方睿赢
|
20天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
42 7
土木林森
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
29 6
龙大吉
|
20天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
31 5
疯狂的猿
|
22天前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
疯狂的猿
17 0
CSS3几何透明层文本悬停变色源码
LALA
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
LALA
53 12
温轻舟
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
116 1
蓝易云
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
45 3
像教授
|
Unix
html精简总结--链接
像教授
1418 0
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
43 1
[HTML、CSS]细节与使用经验

热门文章

最新文章

  • 1
    CSS伪元素实现的3D按钮
  • 2
    CSS3中的选择器
  • 3
    css属性列表 和 属性值含义
  • 4
    webpack window 使用sass来编译css样式
  • 5
    CSS3的新属性的一下总结
  • 6
    符合WEB标准的下拉导航菜单（CSS菜单）演示
  • 7
    CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
  • 8
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    CSS-选择器7-属性
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    138
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    70
  • 3
    好看的html网站维护源码
    243
  • 4
    html+echars图表加日期检索
    58
  • 5
    html+echars的统计报表
    61
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    65
  • 7
    一种pug与html相互转换的工具
    98
  • 8
    android TextView HTML 的效果
    44
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    137
  • 10
    HTML5/CSS3粒子效果进度条代码
    64

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。