欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML基础——基础标签

程序员文章站 2022-06-22 15:20:44
一、HTML概述 htyper text markup language 即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 标记语言: 标记(标签)构成的语言。 1、网页的组成 一个网页一般由两部分组成即: HTML(Hypertext Markup Lan ......

一、html概述

  • htyper text markup language  即超文本标记语言。
  • 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
  • 标记语言: 标记(标签)构成的语言。

1、网页的组成

一个网页一般由两部分组成即:

  • html(hypertext markup language)
  • 和css(cascade style sheets)

html负责描述网页的结构和内容(如标题,导航栏等) css则负责网页的表现(外观)(如背景颜色,字体样式等)。

2、html文档的基本格式

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>html5的基本格式</title>
</head>
<body>

</body>
</html>

(1).<!doctype>标记

位于文档最前面,用于向浏览器说明当前文档使用的html标准。

(2).<html>标记

也称为根标记,用于告知浏览器其自身是一个html文档,<html>标记标志着html文档的开始,</html>标记着html文档的结束。

(3).<head>标记

用于定义html文档的头部信息,称为头部标记。主要用来封装其他位于文档头部的标记。

①.<title>:设置页面标题标记

用于定义html页面的标题,即给网页取一个名字。

 

<title>个人简介网</title>

 

②.<meta/>:定义页面元信息标记

用于定义页面的元信息,可重复出现在<head>头部标记中,是一个单标记。

常见的几种设置,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

#1.<meta charset="utf-8"/>   

定义编码格式为utf-8

 

#2.<meta name="名称" content="值"/>

可以为搜索引擎提供信息。

  • name="keywords":设置网页关键字,如个人简介网页关键字的设置。

 

<meta name="keywords" content="个人简介,日记,秀出自我"/>

 

  • name="description":设置网页描述,如个人简介网页描述信息的设置。

 

<meta name="description" content="这是一个个人简介网站,你可以通过本网站来秀出真正的自己。"/>

 

  • name="author":设置网页作者。

 

<meat name="author" content="刘瑛奇"/>

 

#3.<meta http-equiv="名称" content="值"/>

设置服务器发送给浏览器的http头部信息,为刘安琪显示页面提供相关的参数。

  • 设置字符集。
<meta http-equiv="content-type" content-"text/html"; charset="utf-8"/>
  • 设置页面自动刷新与跳转。
<meta http-equaiv="refresh" content="10;url=http://www.baidu.com"/>

③.<link>:引用外部文件标记

常用属性:

属性名   常用属性值                 描述
 href      url 指定引用外部文档的地址
  rel  stylesheet 指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表
 type   text/css 引用外部文档的类型为css样式表
text/javascript 引用外部文档的类型为javascript脚本

 

 

 

 

 

 

例如:使用<link>标记引用外部css样式表:

 

<link rel="stylesheet" type="text/css" href="style.css"/>

 

④.<style>:内嵌样式标记

用于为html文档定义样式信息,在html中使用style标记时,常常定义其属性为type,相应属性值为text/css。

例如:

<!doctype html>
<html>
    <head>
          <meta charset="utf-8"/>
          <title>style标记的使用</title>
          <style type="text/css">
          h2{color:blue;}
          p{color:yellow;}     
          </style>
    </head>

    <body>
    <h2>我的个人简介</h2>
    <p>我是一名来自河南洛阳的男孩,今年20岁!</p>
    </body>
</html>

(4).<body>标记

用于定义html文档索要显示的内容,也称为主体标记。<body>标记中的信息才是最终要显示在网页上的。

body里面分为两类标签:块级标签和内联标签。

  块级标签:<p><h1><table><ol><ul><form><div>

  内联标签:<a><input><img><sub><sup><textarea><span>

块级标签元素的特点
  ① 总是在新行上开始;
  ② 高度,行高以及外边距和内边距都可控制;
  ③ 宽度缺省是它的容器的100%,除非设定一个宽度。
  ④ 它可以容纳内联元素和其他块元素

内联标签元素的特点
  ① 和其他元素都在一行上;
  ② 高,行高及外边距和内边距不可改变;
  ③ 宽度就是它的文字或图片的宽度,不可改变
  ④ 内联元素只能容纳文本或者其他内联元素

对行内元素,需要注意如下 
  ① 设置宽度width 无效。
  ② 设置高度height 无效,可以通过line-height来设置。
  ③ 设置margin 只有左右margin有效,上下无效。
  ④ 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

#1.基本标记:

①.标题标记:<h1>~<h6>

通常用来设置标题,从<h1>~<h6>重要性递减。

基本语法格式为:

<hn align="对齐方式">标题文本</hn>

align为可选属性,用于指定标题的对齐方式。

属性值有:

  left:设置标题文字左对齐(默认值)

  center:设置标题文字居中对齐

  right:设置标题文字右对齐

注:一个页面中只能使用一个<h1>标记,通常用于logo部分。

代码示例:

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题标记的使用</title>
</head>

<body>
     <h1 align="center">一级标题 居中对齐</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>
</body>
</html>

 

②.段落标记:<p>

用于定义一个独立的段落,每个段落独占一行,并且段落之间回有一定的间隙。

语法格式为:

<p align="对齐方式">段落文本</p>

代码示例:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>段落标记的用法</title>
</head>

<body>
     <p align="center">这是我的个人简介</p>
     <p>我叫刘瑛奇,是一个大二学生,学的是计算机专业,是一个开朗热爱学习的男孩。</p>
     <p align="right">刘瑛奇  2019.12.1</p>
</body>
</html>

③.功能标记

  <b> <strong>: 加粗标签.

  <strike>: 为文字加上一条中线.

  <i> <em>: 文字变成斜体.

  <sup>和<sub>: 上角标 和 下角表.

  <br>:换行.

  <hr>:水平线

代码示例:

<html>
<head>
    <meta charset="utf-8">
    <title>功能标记的使用</title>
</head>

<body>
    <b>使用p标记前加粗文字</b>
    <br>
    <strong>使用strong标记加粗文字</strong>
    <hr>
    <p>原价:<strike>299 </strike> 现价:9.9</p>
    <p><em>这是一段斜体字</em></p>
    <p> 2<sup>n</sup> 2的n次方</p>
    <p>h<sub>2</sub>o 水的分子表达式</p>
  <p>&lt; 小于号</p> <p>&gt; 大于号</p> <p>&copy; </p> <p>&reg;</p> </body> </html>

 #2.图像标记:

目前网页上常用的图像格式主要有gifjpgpng三种,具体区别如下。

●gif格式

特点:

  支持动画,是一种无损的图像格式。

  支持透明,只能处理256中颜色。

  常用于logo、小图标及其它色彩相对单一的图像。

●png格式

特点:

  体积更小,支持alpha透明。

  不支持动画

●jpg格式

 特点:

  可以保存超过256种颜色的图像。
  是一种有损压缩的图像格式。

  常用于较大的图片的保存。

1、图像标记<img />

  src: 要显示图片的路径.

  alt: 图片没有加载成功时的提示.

  title: 鼠标悬浮时的提示信息.

  width: 图片的宽

  height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

  vspace:图像顶部和底部的空白(垂直边距)

  border:图像边框的宽度

  hspace:图像左侧和右侧的空白(水平边距)

  align:设置对齐方式

    left:将图像对齐到左边

    right:将图像对齐到右边

    top:将图像的顶端和文本的第一行文本对齐,其他文字居图像下方

    middle:将图像的水平中线和文本的第一行文字对齐,其他文字居图像下方

    bottom:将图像的底部和文本的第一行文字对齐,其他文字居图像下方

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图像标记的使用</title>
</head>

<body>
    <img src="my.gif" alt="一张我的自拍照" border="2" />
    <img src="my.gif" alt="一张我的自拍照" width="100" height="100" />
    <img src="my.gif" alt="一张我的自拍照" hspace="50" vspace="20" align="left" />
</body>
</html>

注意:

(1)、html不赞成图像标记使用border、vspace、hspace及align属性。

(2)、网页制作中、装饰性的图像都不要直接插入<img/>标记,而是通过css设置背景图像来实现。

相对路径和绝对路径

①.绝对路径

就是网页上的文件或目录咋硬盘上的真正路径。如:"d:\html5+css3\images\logo.gif"。

注:网页中不推荐使用绝对路径。

②.相对路径

就是相对于当前文件的路径。

分为三种:

 ●图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可,如"<img src="logo.gif" />"

 ●图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用"/"间隔,如<img src="images/logo.gif" />

 ●图像文件位于html文件的上一级文件夹:在文件名之前加入"./",如果是上两级使用"../../"以此类推。如<img src="../logo.gif" />

#3.超链接标签(锚标签)<a>:

  href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

  target:用于指定链接页面的打开方式。

    _self:默认值,在原窗口中打开。

    _blank:在新窗口中打开。

  name: 定义一个页面的书签.

  用于跳转 href : #书签名称.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>超链接标记的使用</title>
</head>

<body>
    <a href="http://www.itcast.cn/" target="_slef">传智播客</a>
    target="_self"原窗口中打开<br/>
    <a href="http://www.baidu.com/" target="_blank">百度</a>
    taget="_blank"新窗口打开
</body>
</html>

锚点链接:

通过创建锚点链接,用户能够快速定位到目标的内容。

创建步骤:

  ①.使用"<a href="#id名">链接文本</a>"创建链接文本。

  ②.使用相应的id名称注跳转目标的位置。

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>锚点链接的使用</title>
</head>

<body>
    课程介绍:
    <ul>
        <li><a href="#one">平面广告设计</a></li>
        <li><a href="#two">网页设计与制作</a></li>
        <li><a href="#three">flash互动广告动画设计</a></li>
        <li><a href="#four">用户界面设计</a></li>
    <ul>
    <h3 id="one">平面广告设计</h3>
    <p>课程涵盖photoshop图像处理、i1lustrator图形设计、平面广告创意设计、字体设计与标志设计。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="two">网页世界与制作</h3>
    <p>课程涵盖div+css实现web标准布局、dreamweaver快速网站建设、网页版式构图与设计技巧、网页配色理论与技巧。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="three">flash互动广告动画设计</h3>
    <p>课程涵盖flash动画基础。flash高级动画、flash互动广告设计、flash商业网站设计。</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <h3 id="four">用户界面设计</h3>
    <p>课程涵盖javascript编程基础、javascript网页特效制作、jquery编程基础、jquery网页特效制作。</p>
</body>
</html>