一、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样式表
type	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.图像标记：

目前网页上常用的图像格式主要有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 ...

随机推荐

全面认识 RUST -- 掌控未来的雷电
文章目录 RUST 简介如何衡量语言的好坏? 静态语言编译器语言定位代表性项目 Hello World RUST 前景 RUST 简介 Rust 是一种兼顾内存安全.高并发和稳定运行的编程语言 ...
MySQL必知必会(使用子查询)
SELECT cust_name, cust_contact FROM customers WHERE cust_id IN (SELECT cust_id FROM orders #单独写多个分句, ...
自定义 cell
自定义 cell 1 什么是自定义 cell 自定义 cell 即 tableView,collectionView,scrollView中的 cell 使用的时候不能满足我们使用 cell 的需求, ...
2018ACM/ICPC 焦作网络预选赛-A Magic Mirror
Jessie has a magic mirror. Every morning she will ask the mirror: 'Mirror mirror tell me, who is the ...
新版FPC摄像头测评 OV7725 OV7670 OV9650 OV9655 OV5640 OV5642 OV2640 OV3640 MT9D112
新版FPC摄像头测评 OV7725 OV7670 OV9650 OV9655 OV5640 OV5642 OV2640 OV3640 MT9D112 最新制样新版FPC摄像头板卡,先看看结构尺寸再瞧 ...
02 | Java内存模型：看Java如何解决可见性和有序性问题
什么是 Java 内存模型? 导致可见性的原因是缓存,导致有序性的原因是编译优化,那解决可见性. 有序性最直接的办法就是禁用缓存和编译优化,但是这样问题虽然解决了,我们程序的性能可就堪忧了. 合理 ...
大数据学习笔记——Hadoop高可用完全分布式模式完整部署教程(包含zookeeper)
高可用模式下的Hadoop集群搭建本篇博客将会在之前写过的Linux的完整部署的基础上进行,暂时不会涉及到伪分布式或者完全分布式模式搭建,由于HA模式涉及到的配置文件较多,维护起来也较为复杂,相信学 ...
建议收藏：命令创建.net core3.0 web应用详解（超详细教程）
你是不是曾经膜拜那些敲几行代码就可以创建项目的大神,学习了命令创建项目你也可以成为大神,其实命令创建项目很简单. (1)cmd命令行到你打算创建项目的位置 (2)在该目录下创建解决方案文件夹JIY ...
Mybatis sql map 小于号配置
Mybatis SQL map配置中出现小于号转义时,通过<![CDATA[查询条件]]>解决. EXCEMPLE: <select id="getComments&quo ...
Centos7 Openresty 开发环境
首先要安装编译环境 yum group install "Development Tools" yum install pcre-devel openssl-devel gcc c ...

HTML基础——基础标签

一、HTML概述

1、网页的组成

2、HTML文档的基本格式

（1）.<!doctype>标记

（2）.<html>标记

（3）.<head>标记

（4）.<body>标记

HTML基础——基础标签的更多相关文章

随机推荐

热门专题