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>