HTML基础——基础标签
一、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>< 小于号</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 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="data: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>
HTML基础——基础标签的更多相关文章
- C#基础---Attribute(标签) 和 reflect(反射) 应用二
以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...
- [转] Git 基础 - 打标签
2.6 Git 基础 - 打标签 打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列 ...
- h5标签基础 meta标签
<meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/> ,//u ...
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
- HTML&CSS基础-html标签的实体
HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...
- HTML&CSS基础-meta标签
HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...
- HTML基础 img标签 做一个图库
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- python基础-基础知识(包括:函数递归等知识)
老男孩 Python 基础知识练习(三) 1.列举布尔值为 False 的值空,None,0, False, ", [], {}, () 2.写函数:根据范围获取其中 3 和 7 整除的所有 ...
- HTML基础-------HTML标签(3)
HTML标签(3) 表格 作用:制作一个表格 属性: 标签;table>tr>td(或者th) 语义; table:一个表格 tr:一行 td:一个单元格 th:单元格的表头 captio ...
- 前端基础小标签3 H5新标签
第二部分H5的新标签一.<!-- mark标签 1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样 2.浏览器通常会用黄色显示m ...
随机推荐
- iOS libsqlite3.0.tbd和libsqlite3.tbd的区别
ibsqlite3.0.tbd 只是一个快捷方式,其实也是指向libsqlite3.tbd的,如果libsqlite3.0.tbd指向的就是最新的libsqlite3.tbd,就不用更新了.
- 利用python进行微信好友分析
欢迎python爱好者加入:学习交流群 667279387 本文主要利用python对个人微信好友进行分析并把结果输出到一个html文档当中,主要用到的python包为itchat,pandas,py ...
- 2019企业linux运维最需要的了解的一些硬件基础知识
第3章 服务器 245 3.1 电脑的种类 245 3.2 服务器的介绍 246 3.2.1 服务器的类别 246 3.2.2 服务器的性能 247 3.2.3 服务器的 ...
- 【系列专题】ECMAScript 重温系列(10篇全)
ES6 系列ECMAScript 2015 [ES]150-重温基础:ES6系列(一) [ES]151-重温基础:ES6系列(二) [ES]152-重温基础:ES6系列(三) [ES]153-重温基础 ...
- 《JavaScript 模式》知识点小抄本(下)
介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...
- Vue底层实现原理总结
要实现MVVM 响应式原理,要实现如下几点 1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者 2.实现一个指令解析器Compile,对每个元素 ...
- 【spring boot】配置信息
======================================================================== 1.feign 超时配置 2.上传文件大小控制 3.J ...
- oc实现小型学生管理系统
首先,创建一个工程,然后加入两个cocoaclass,分别命名为Student 和 StudentSystem. 然后就可以开始写代码喽 ...
- DefinePlugin插件用法
作者:水涛 座右铭:天行健,君子以自强不息 自白:我写博文上来蹭蹭就是干,我突然觉得我需要幽默一点了,好了,下面我们说正经的 一.官方定义: DefinePlugin DefinePlugin 允许创 ...
- COCI 2012 Inspektor
coci 2012 inspektor 街道由左到右分布着\(N\)个办公室,编号为\(1\)到\(N\),最开始,每个办公室都是空的,一些公司将入住,并赶走办公室里面现有的公司.一人每天会路过一些连 ...