一、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 ...

随机推荐

.Net Core的API网关Ocelot的使用(二)[负载,限流,熔断,Header转换]
网关的负载均衡当下游拥有多个节点的时候,我们可以用DownstreamHostAndPorts来配置 { "UpstreamPathTemplate": "/Api_A ...
求亿级记录中搜索次数Top N的搜索词(MapReduce实现)
程序事例: 日志信息: 二手车 1345 二手房 3416 洗衣机 2789 输入: N=2 输出: 二手房洗衣机 map函数如下: import java.io.IOException; impo ...
CodeForces1000A-Light It Up
B. Light It Up time limit per test 1 second memory limit per test 256 megabytes input standard input ...
CodeForces999A-Mishka and Contest
A. Mishka and Contest time limit per test 1 second memory limit per test 256 megabytes input standar ...
A.Sweet Problem
题目:甜蜜的问题题意:你有三堆糖果:红色,绿色,蓝色第一堆有r个糖果,第二堆有g个糖果,第三堆有b个糖果每天都可以吃两个不同颜色的糖果,找出可以吃糖果的最大天数分析:先排下序,如果最大堆大于等 ...
moment.js 默认使用服务器时间
在前端使用Date对象获取当前时间的时候,该时间是客户端的时间.但是该时间可以被用户修改,所以我们一般情况下并不想要这个时间.如果每一次获取时间的时候都请求一下服务器,那么将会对服务器造成不必要的压力 ...
【JS】341- 移动端滚动穿透的6种解决方案
前言相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
python + selenium WebDriver的环境配置
想试用python语言来学习selenium WebDriver,首先需要搭建一个测试环境,从python安装到浏览器插件配置的详细步骤,总结如下: 一.python环境配置 1.从官网下载最新的一个 ...
【Java8流】使用学习
[Java8流]使用学习 ============================================= 1.删除子目录及文件 ============================== ...
整理了2019年上千道Java面试题，近500页文档，用了1个月时间！
spring 面试题 1.一般问题 1.1.不同版本的 spring Framework 有哪些主要功能? 1.2.什么是 spring Framework? 1.3.列举 spring Framew ...

HTML基础——基础标签

一、HTML概述

1、网页的组成

2、HTML文档的基本格式

（1）.<!doctype>标记

（2）.<html>标记

（3）.<head>标记

（4）.<body>标记

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

随机推荐

热门专题