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>