大二上学期的HTML杂碎

一、HTML基本概述


1、HTML文件结构

 (1)、框架
<!DOCTYPE html>
<html>
    <head>
        <mate></mate>           <!-- 文档相关资料标记 -->
        <base href="URL">       <!-- 基地址标记 -->
        <title></title>         <!-- 标题 -->
        <link>                  <!-- 标记 -->
        <style></style>         <!-- CSS样式标记 -->
    </head>
    
    <body>
        
    </body>
</html>
 (2)、文件主题标记<body>....<body>
<body>的主要属性如下:
  • bgcolor:设置页面背景颜色

  • background:背景图案或图像文件的URL

  • text:设置网页文字的颜色

  • alink、vlink、link:用来控制页面超链接文字的颜色

参数 意义
alink 链接后的颜色
vlink 激活时的颜色
link 链接前的颜色

2、HTML页面修饰标记

 (1)、标题标记<hn>...</hn>

语法:<hn align=left|center|right>标题文字</hn>

 (2)、文字样式标记<font>...</font>

文字样式标记的属性可以控制显示文字的字体、大小和颜色。

语法:<font 属性=属性值>文字</font>

标记属性的说明见表

属性 功能 应用举例
face 设置文字的字体。如果指定的文字在用户系统中不存在,则使用默认字体 <font face="楷体">
size 设置字体的大小,分为7级,等级7最大,默认值是3,也可以在默认字号的基础上进行加减运算,取得字号值 <font size=6
color 设置字体的颜色 <font color="red">
 (3)、特定文字样式标记
文本样式 描述标记 类别
粗体 <b>...</b> 物理
斜体 <i>...</i> 物理
下划线 <u>...</u> 物理
删除划线 <s>...</s> 物理
上标 <sup>...</sup> 物理
下标 <sub>...</sub> 物理
大字体 <big>...</big> 物理
小字体 <small>...</small> 物理
重点突出显示(粗体) <strong>...</strong> 物理
突出显示(斜体) <em>...</em> 逻辑
电子邮件和网址(缩小+斜体字) <address>...</address> 逻辑
按代码显示(缩小字体) <code>...</code> 逻辑
 (4)、特殊符号
特殊字符 转译码
< &lt ;
> &gt ;
" &quot ;
空格符 &nbsp ;
& &amp ;
版权号© &copy ;
 (5)、段落标记

HTML文档中的空格、Tab符、回车换行符等,在浏览器中不起作用,必须要使用标记,才能使文章分出段落,显出层次。

  1) 段落标记<p>
语法:<p aligh=left|center|right|>段落文字</p>

  <p>标记表示另起一段,并在段前空一行。结束标记</p>可省略。

  2) 换行标记<br>
   浏览器遇<br>标记换行,中间不插入空行

  3) 禁止换行标记<nobr>
   语法:<nobr>段落文字</nobr>

  默认状态下,页面内容随浏览器窗口宽度自动换行。若不需要自动换行,则在之间显示的内容,不随浏览器宽度自动换行。

  如果显示内容的行长比浏览器窗口宽,则窗口下会出现一个水平滚动条,浏览者可以滚动浏览。

  禁止换行标记要使用</nobr>,表示禁止自动换行解禁。

  4) 水平线标记<hr>
   使用格式:<hr 属性名1=属性值1 属性名2=属性值2 ...>

   <hr>标记在页面上画出一条水平线,分割页面,使页面内容清晰醒目。

 使用<hr>标记的属性值控制水平线的粗细、颜色、宽度和对齐方式,常用属性见下表:

属性名 功能 示例
size 水平线的粗细,以像素为单位,默认值是 1 <hr size=6>
width 水平线宽度,以像素为单位,也可以是对窗口的百分比,默认值为100% <hr width=80%>
align 对齐方式,可取值为:left、center、right,默认值是center <hr align=right>
color 水平线的颜色 <hr color=red>

  5) 预格式化标记<pre>

   <pre>标记使得在HTML文档中排好的版式,在浏览器中原样显示。

   语法:<pre>...</pre>


3、多媒体标记

 (1)、图像标记<img>

   为了在页面上嵌入图像,一要说明嵌入的是图像,用标记名<img>告知;二要说明图像文件在哪里,用属性“src”指出。

   语法:<img src="URL" alt="文字说明">...</img>

   常用图像文件格式为:jpg、gif、swfh和bmp。

<img>标记的属性如下:

属性 功能 示例
src src 是必选项,指出图像文件的路径或URL。 <img src="1.jpg">
alt 定义一个文本串,浏览器因故无法显示图像时,图像位置显示文本串。
浏览器可以显示图像时,alt属性不起作用。
<img alt="毛毛虫">
align 文本与图像的对齐方式,可取值有:left、middle、right、top、和bottom。 <img align="bottom>图像底部与文本对齐
border 图像边框宽度(以像素为单位),border=0 无边框。 <img border=3>
width 和 height 图像的高度和宽度(以像素为单位) <img width="105" height="75">
 (2)、背景音乐标记<bgsound>

   使用嵌入背景音乐标记<bgsound>,可以在打开网页时自动打开音乐。

   语法:<bgsound src="音乐文件的URL" loop=循环播放次数>

 其属性功能如下:
  1)src:背景音乐文件的URL。
  2)loop:背景音乐的循环播放次数,如果loop=-1,则表示循环不止地播放音乐。

 (3)、音乐和影响文件标记<embed>

   语法:<embed src="音乐或影像文件地URL" width=播放器宽度 height=播放器高度 autostart=是否自动播放 loop=是否重复>

   <embed>标记把音乐和影响嵌入页面,其属性功能如下:
   1)src:给出音乐或影视文件的URL。
   2)width和height:给出播放器在页面中的宽和高,以像素为单位。
   3)autostart:autostart=true 打开页面时自动播放,no表示不播放,默认值是no,autostart=false 单击播放。
   4)loop:loop=true。true表示无限制重复播放;no表示只播放一次,默认值是no。


4、表格、列表、与块容器标记

 (1)、表格标记<table>...</table>

   1)表格标记的使用格式

<table border>
    <caption>表格标题</caption>
    <tr>
        <th>第一列的表头</th>
        <th>第二列的表头</th>
        <th>第三列的表头</th>
    </tr>

    <tr>
        <td>第一行、第一列表项</td>
        <td>第一行、第二列表项</td>
        <td>第一行、第三列表项</td>
    </tr>
   
    <tr>
        <td>第二行、第一列表项</td>
        <td>第二行、第二列表项</td>
        <td>第二行、第三列表项</td>
    </tr>
</table>

未完待续。。。


5、超链接标记

 超链接标记是超文本的基本结构,他可以从当前Web页面定义的位置跳转到其他位置,包括同一页面的其他位置、Internet上另一个Web页面、本地硬盘或局域网上的文件、声音或图像文件、FTP或Telnet站点、电子信箱等。

 为执行链接动作,开发者要做到三件事:

  • (1)用标记<a>和</a>说明超链接的开始与结束。
  • (2)提供单击的热点,也就是单击谁。
  • (3)给出链接目的地址URL,即单击后跳到哪里。

 (1)、超链接标记<a>...</a>

    语法:<a href=链接目的地URL target="目标窗口">热点</a>


   href属性指明所要链接资源文件的URL。

   在标记<a>和</a>之间的热点是提示文字或图像,文字一般是带蓝色下划线高亮显示。

   目的地URL可以是绝对路径或是相对路径。

 (2)、同一页面间的链接

   此功能常见于目录,读者点击目录名,即可跳转到同页面的相关内容。

   为完成此任务,浏览器必须知道:指定位置在何处,他叫什么名字。

   所以,为标记位置,要给指定位置起个名字,即锚名。


 语法:

   <a href="#锚名">标题名</a>
         .
         .
         .
   <a name="锚名">标题内容</a>


   name属性为“标题内容”所在位置创建一个“锚名”。锚名是用户标示符,在一个页面中是惟一的。
   href属性给出链接的目的地位置,即name属性给出的锚名所在的位置。
   在锚名前加“#”,浏览器就会在本页面查找锚名,跳转到指定位置。


 (3)、链接到其他文档指定位置

   链接到其他文档指定的位置,需要告诉浏览器其他文档的URL+表征位置的锚名。把语句

   <a href="#锚名">标题名</a>

   的href改为

   href="其他文件URL#锚名"即可


6、表单标记



































未完待续。。。

作者:Jude_Zhang
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用BY-NC-SA 许可协议。转载请注明出处!
支持博主:如果您觉得文章对您有帮助,可以点击文章下方赞一下。您的鼓励是博主的最大动力!
原文地址:https://www.cnblogs.com/judezhang/p/15413856.html