一个网页一般由两部分组成即：
html（hypertext markup language）和css（cascade style sheets）html负责描述网页的结构和内容（如标题，导航栏等）css则负责网页的表现（外观）（如背景颜色，字体样式等）。
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>html5的基本格式</title></head><body>&l好听的公会名字t;/body></html>
位于文档最前面，用于向浏览器说明当前文档使用的html标准。
也称为根标记，用于告知浏览器其自身是一个html文档，<html>标记标志着html文档的开始，&历史知识lt;/html>标记着html文档的结束。
用于定义html文档的头部信息，称为头部标记。主要用来封装其他位于文档头部的标记。
①.<title>：设置页面标题标记
用于定义html页面的标题，即给网页取一个名字。
<title>个人简介网</title>
②.<meta/>：定义页面元信息标记
用于定义页面的元信息,可重复出现在<head>头部标记中，是一个单标记。
常见的几种设置，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
#1.<metachart=”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"; chart="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 chart="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>用于定义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 chart="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 chart="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 chart="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>< 小于号</p> <p>> 大于号</p> <p>© </p> <p>®</p></body></html>
#2.图像标记：
目前网页上常用的图像格式主要有gif、jpg和png三种，具体区别如下。
●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 chart="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:用于指定链接页面的打开方式。
_lf:默认值，在原窗口中打开。
_blank:在新窗口中打开。
name: 定义一个页面的书签.
用于跳转 href : #书签名称.
<!doctype html><html><head> <meta chart="utf-8"> <title>超链接标记的使用</title></head><body> <a href="/d/file/titlepic/" target="_slef">传智播客</a> target="_lf"原窗口中打开<br/> <a href="/d/file/titlepic/" target="_blank">百度</a> taget="_blank"新窗口打开</body></html>
锚点链接：
通过创建锚点链接，用户能够快速定位到目标的内容。
创建步骤：
①.使用”<a href=”#id名”>链接文本</a>”创建链接文本。
②.使用相应的id名称注跳转目标的位置。
<!doctype html><html><head> <meta chart="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>
本文发布于:2023-04-03 09:44:21，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/c77d2b1dfb774d7b5e15e0dc55d17c44.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML基础——基础标签.doc
本文 PDF 下载地址：HTML基础——基础标签.pdf
| 留言与评论（共有 0 条评论） |
