文本

   文本

    a.特殊文本的实现

     页面的空格以及一些特殊字符需要通过转义字符的方式体现。

    HTML中转义字符的特点：以&符号开始，以；结束。

     （1）   表示一个空格。

     （2）<；     表示  <

       (3）>       表示  >

       (4)©     表示©（版权）。

 

      <p></p>  

      Demo:1.创建一个页面02-text.html

                 2.在页面中输出以下内容

                 The   <p>   element.                     ©2017  By    Com

 解答：  The <p> element.     © By Com

b.文本样式相关标记

    <b></b>:   加粗

    <i></i>:    斜体

    <u></u>:  下划线

    <s></s>:    删除线

    :  上标  2^2

    :   下标  H2O

    Demo:  这是一段包含，   粗体，斜体，下划线，删除线，上标，下标的文本内容

    将以上文本内，对应文字的特殊效果，用标记体现出现。

    解答：这是一段包含，   <b>粗体</b>，<i>斜体</i>，<u>下划线</u>，<s>删除线</s>，^上标，_下标的文本内容

c.标题元素：以 醒目 的方式表现出文本。

   语法：<h1>一级标题</h1>

             <h2>二级标题</h2>

             <h3>三级标题</h3>

             <h4>四级标题</h4>

             <h5>五级标题</h5>

             <h6>六级标题</h6>

   属性:

        1.align：文本的水平对齐方式

          取值：left/center/right

d.段落元素

  语法：<p></p>

  属性：align:left/center/right

Demo:1.在02-text.html中，增加以下内容。

             （1）用段落标记表示：The first paragraph

               (2)  用段落标记表示：The second paragraph.文本表示为  右对齐

解答：

<!--段落标记-->

<p>The first paragraph.</p>

<p align="right">The second paragraph.</p>

e.换行元素:<br>

f.分割线元素

作用：在页面中表现为一条直线。

语法：<hr>

属性：1.size:尺寸。以 px 为单位的数值

          2.width:宽度。 以 px 或 % 为单位的数值。

          3.align:水平对齐方式。

          4.color:颜色

 Demo:02-text.html中，增加一根水平线，size为5px,宽度为50%，居中对齐，颜色为红色（red）.

解答：<hr size="5px" width="50%" align="center" color="red">

g.预格式化

作用：保留源文档中的 回车 和 空格 的作用。

<pre></pre>

h.分区元素

  （1）块分区元素

           语法：<div></div>

           作用：布局（换行显示）

  （2）行内分区元素

            语法：<span></span>

            作用：设置同一行文字内的不同样式。    （在同一行显示）

Demo:

<div>静夜思</div>

<div>床前明月光</div>

<div>疑是地上霜</div>

<div>举头望明月</div>

<div>低头思故乡</div>

<span>鹅鹅鹅</span>

<span>曲项向天歌</span>

<span>白毛浮绿水</span>

<span>红掌拨清波</span>

效果如下：

静夜思

床前明月光

疑是地上霜

举头望明月

低头思故乡

鹅鹅鹅 曲项向天歌 白毛浮绿水 红掌拨清波 

i.行内元素  与   块级元素

  按照元素们的表现形式来分类，分为 行内元素 和 块级元素。

 （1）行内元素：在一行内允许显示多个元素的，称为“行内元素”。

           span,i,b,s,u,sup,sub

          作用：包裹文本，并处理文本的表现形式。

  （2）块级元素：每个元素独占一行显示的，称为“块级元素”。

           div,p,h1,h2,h3,h4,h5,h6

          作用：布局

注意：

1.p标记不能嵌套其他的块级元素。

2.行内元素中  最好 不要嵌套块级元素。

4. 图像 和  链接

(1)URL

  目录结构

     目录：保存文件的文件夹名称。

     多个文件夹之间的关系，就是目录结构。

   1.什么是URL

     URL(Uniform  Rescource  Locator),统一资源定位器。用来标识某资源文件的位置。

   2.URL 在 WEB 中的表现形式

   共三种表现形式：

   A.绝对路径

  特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径。

   使用场合：当想访问互联网的资源时，只能用绝对路径。

   完整的绝对路径分四部分：

1. 协议名http（超文本传输协议）

   2.域名（主机名，IP地址）www.csdn.net

3.目录路径

4.文件名

Fn+F12右边弹出界面，点击左上角寻找图片路径。

https://img-bss.csdn.net/1560249226461.png

B.相对路径（重点）

场合：使用本机文件时使用

什么是相对路径：从当前文件位置处来说查找资源文件所经过的路径，就是相对路径。

1. 同目录，直接用
2. 子目录，先进入
3. 父目录，先返回

1. 根相对路径

  路径形式是以  /  作为开始的。

 / ：表示的是服务器的根路径。

1. 图像

1. 图像格式

WEB中支持的图像格式。

1. *.jpg
2. *.gif（动图）
3. *.png（透明）

1. 图像的语法

标记：<img>

属性：

1. src:指定要显示图像的URL
2. width:图像的宽度
3. height：图像的高度

宽和高改变其中一个，另一个也会发生改变。等比数列

1. title：鼠标悬停时，要显示的文本

Demo:将一张图片下载下来，显示在自己的网页中。

<p>1.绝对路径</p>

<p>

<img src = "https://csdnimg.cn/pubfooter/images/csdn-kf.png">

</p>

<p>2.相对路径</p>

<p>

<img src = "img/k1.png">

</p>

<p>3.根相对路径</p>

<p>

<img src = "/VS CODE/img/k1.png">

</p>

1. 超链接

1. 语法

标记：<a>内容</a>

属性：

1. href:要连接的HTML页面URL
2. target:目标，指定新网页的打开形式。   

   取值：

1. _blank:在新标签页中打开网页。
2. _self:在自身标签页中打开新网页。（默认值）

Demo:

1. 创建一个超链接，内容为：学子商城，点击时，在自身标签页中打开http://www.codeboy.com
2. 创建一个超链接，内容为：上个Demo的图片，点击时，在新标签页中打开http://www.codeboy.com

<h3>1.创建a标记，显示“学子商城”，点击时，在自身标签页中打开</h3>

<a href="http://www.codeboy.com">学子商城</a>

<h3>2.在新标签页中打开</h3>

<a href="http://www.codeboy.com" target="_blank">

<img src="img/k1.png">

</a>

1. 链接的四种表现形式

1. 点击操作时，完成资源下载的操作。

链接的资源为zip/rar时则为下载操作

<a href=k1.rar”>下载</a>

1. 电子邮件链接

<a href=”mailto:zhaoxu@tedu.cn”>联系我们</a>

前提：必须在计算机中安装并配置好至少一个邮件客户端的信息。

1. 返回页面顶部的空链接

<a href=”#”>返回顶部</a>

1. 执行Javascript代码片段

<a href=”javascript:JS脚本代码”>执行JS</a>

1. 锚点

作用：锚点用于在网页中的某个位置出做个记号。允许从其他位置处转到记号位置处。

使用方式：

1. 定义锚点

1.使用a标记的name属性允许定义锚点。

<a name=”maodian1:>xxxx</a>

2.任何标记的id属性定义锚点

B.链接到锚点

<a href=”#锚点名称”>链接到锚点</a>（本页的锚点）

<a href=”页面URL#锚点名称”>链接到锚点</a>（指定页面的锚点）

<p>

<a href="#NO1">第一章</a>

<a href="#NO2">第二章</a>

<a href="#NO3">第三章</a>

<a href="#NO4">第四章</a>

</p>

<!--1.第一章内容区域-->

<h3 id="NO1">第一章：倚天屠龙记</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus velit necessitatibus reiciendis laborum alias quidem blanditiis ad nesciunt, numquam qui quam neque officia fuga ipsam dolorem, ipsa perspiciatis et. A?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus velit necessitatibus reiciendis laborum alias quidem blanditiis ad nesciunt, numquam qui quam neque officia fuga ipsam dolorem, ipsa perspiciatis et. A? </p>

<!--定义第二章内容-->

<h3>

<a name="NO2">第二章：倚天杀猪记</a>

</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus velit necessitatibus reiciendis laborum alias quidem blanditiis ad nesciunt, numquam qui quam neque officia fuga ipsam dolorem, ipsa perspiciatis et. A?Lorem ipsum dolor sit </p>

5.表格

A.表格的基本元素

1. 行和列
2. 单元格
3. 边距
4. 间距
5. 边框
6. 表格的三要素：行、列、单元格
7. 表格的嵌套

 

B.表格的相关代码

1.表格标签<table>

2.行标签<tr>

3.单元格标签<td>

4.表格的结构标签（均成对出现）

（1）表首标签<thead>

语法描述：

<thead bgcolor=”颜色” align=”对齐方式”>...</thead>

（2）表主体标签<tbody>

语法描述：

<tbody bgcolor=”颜色” align=”对齐方式”>...</tbody>

（3）表尾标签<tfoot>

语法描述：

<tfoot bgcolor=”颜色” align=”对齐方式”>...</tfoot>

（4）设置表格标题

语法描述：

<caption>标题</caption>

C.设置表格大小和行内属性

1.设置整个表格的大小       

(1)设置表格宽度

<table width=”宽度数值/百分比”>

(2)设置表格高度

<table width=”宽度数值/百分比”>

2.设置表格中的行的属性

<tr height=”行高值”>

3.设置行的背景颜色

<tr bgcolor=”行的背景颜色”>

4.设置行内文字的对齐方式

<tr align=”水平对齐方式”>

水平对齐方式有三种：left（默认左对齐）,center,right

5.设置垂直对齐方式

<tr valign=”垂直对齐方式”>

垂直对齐方式有三种：top,bottom,middle

D.设置表格边框样式

1.设置表格边框宽度

<table border=”边框宽度”>

2.设置表格边框颜色

<table border=”边框宽度” bordercolor=”边框颜色”>