一、初识HTML

　　1.什么是HTML？

　　　　Hyper Text Markup Language（超文本标记语言）

　　　　扩展XML:Extendsible  Markup Language(可扩展性标记语言)

　　　　HTML(Hyper Text Markup Language)超文本标记语言是创建Web页面的基础，HTML由一套标记标签（Markup Tag）组成，在制作网页时，HTML使用标记标签来描述网页。

　　2.HTML的发展史

二、HTML5文件的基本结构

语法：

<html>

　　<head>

　　　　<title>html网页标题</title>

　　</head>

　　<body>

　　　　html网页主体

　　</body>

</html>

　　1.HTML5的基本结构分为两部分：

　　　　1.头部（head）

　　　　2.主体（body）

　　头部（head）包括网页标题（title）等基本信息；主体包括网页的内容信息，如图片、文字等。

　　2.网页的基本信息

　　　　（1）DOCTYPE声明

　　　　DOCTYPE声明必须在HTML文档的第一行：

　　　　　　<!DOCTYPE HTML>

　　　　（2）<title>标签、

　　　　使用（title）标签描述网页的标题：<title>网页标题</title>

　　　　（3）<meta>标签

　　　　使用（meta）标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的描述：<meta>标签描述的内容并不显示，

其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

　　　　<meta charset="utf-8"/>charset表示字符集编码，常用的编码有以下几种：

　　　　　　GB2312：简体中文，一般用于包含中文和英文的页面。

　　　　　　ISO-885901：纯英文页面。

　　　　　　Big5：繁体，一般用于带有繁体的页面。

　　　　　　utf-8：国际通用字符编码。

tips：

　　在保存文件时，编码方式一定要与html5页面<meta>标签中设置的编码方式一致，否则将出现乱码。

　　当遇到页面发生乱码时，可以先观察页面中是否有写编码方式的语句，然后使用记事本打开乱码文件，另存为中修改编码方式，使其与页面中的编码方式一致。

　　　　（4）搜索关键字和内容描述信息书写如下：

　　　　<meta name="keywords" content="北大青鸟"/>

　　　　<meta name="description" content="介绍描述"/>

　　keywords表示搜索关键字，description表示网站内容的具体描述。

　　　　通过提供搜索关键字和内容描述信息，方便搜索引擎的搜索。

tips：

　　使用WebStrom工具生成的HTML基本结构中的<head>标签里面有个属性lang="en"，它表示本页面是英文的。Chrome之类的浏览器会提示是否需要翻译。

三、HTML中常用标签

　　1.标题标签<h1>~<h6>字号逐渐变小

　　2.段落标签<p></P>和换行标签<br/>

　　3.水平线标签<hr/>

　　4.字体样式标签

　　　　<strong>字体变粗</strong>

　　　　<em>字体倾斜</em>

　　5.<!-- 注释 -->

　　特殊符号：

　　　　空格：&nbsp;　　大于号：&gt;　　小于号：&lt;　　引号：&quot;　　版权符号：&copy;

　　6.图像标签：<img src="路径地址" alt="替代文字" title="鼠标悬停文字" width="宽度" heigth="高度"/>

　　7.超链接标签：

　　　　语法：<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

　　target：_self（自身窗口）、_blank（新建窗口）。

超链接的应用场合：

　　1.页面键连接：从一个页面链接到另一个页面；

　　2.锚链接：定位到目标页面内容中的某个具体位置；

　　　　语法：

　　　　在页面的乙位置设置标记<a name="marker">目标位置乙</a>

　　　　设置甲位置链接路径href属性值为“#标记名”<a href="#marker">当前位置甲</a>

　　3.功能性链接：

　　　　电子邮件链接的用法：mailto:电子邮件地址；

行内元素：内容撑开宽度，左右都是行内元素可以排在一行

块元素：无论内容多少，该元素独占一行

【学习笔记】HTML基础：使用html制作网页的更多相关文章

  1. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  2. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  3. Django学习笔记（基础篇）

    Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html

  4. C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

  5. C#学习笔记（基础知识回顾）之值传递和引用传递

    一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...

  6. C#学习笔记（基础知识回顾）之值类型和引用类型

    一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...

  7. MAVEN学习笔记之基础（1）

    MAVEN学习笔记之基础(1) 0.0 maven文件结构 pom.xml src main java package resource test java package resource targ ...

  8. mybatis学习笔记之基础复习（3）

    mybatis学习笔记之基础复习(3) mybatis是什么? mybatis是一个持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己编写, 但是mybatis也是有映射(输 ...

  9. mybatis学习笔记之基础框架（2）

    mybatis学习笔记之基础框架(2) mybatis是一个持久层的框架,是apache下的顶级项目. mybatis让程序将主要精力放在sql上,通过mybatis提供的映射方式,自由灵活生成满足s ...

  10. Java学习笔记之---基础语法

    Java学习笔记之---基础语法 一. Java中的命名规范 (一)包名 由多个单词组成时,所有字母小写(例如:onetwo) (二)类名和接口 由多个单词组成时,所有单词首字母大写(例如:OneTw ...

随机推荐

  1. CAP理论中的P到底是个什么意思

    在CAP理论中,C代表一致性,A代表可用性(在一定时间内,用户的请求都会得到应答),P代表分区容错.这里分区容错到底是指数据上的多个备份还是说其它的 ? 我感觉分布式系统中,CAP理论应该是C和A存在 ...

  2. HTTP原理 请求方法

    HTTP的工作过程 一次HTTP操作称为一个事务,其工作过程分为四步: 1.客户机与服务器建立连接:客户单击某个超级链接,HTTP的工作开始,接下来进行TCP连接的三次握手过程. 2.建立连接后,客户 ...

  3. 洛谷 P1372 又是毕业季I

    可能所有的数论题都是这样玄学.... 题目链接:https://www.luogu.org/problemnew/show/P1372 这道题通过暴力的枚举可以发现是不可做的(当然我也不会做) 然后就 ...

  4. 20165224 陆艺杰 Exp4 恶意代码分析

    Exp4 恶意代码分析 1实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 计划任务每段 ...

  5. 如何在Qt Creator 创建一个.pri文件

    如何在Qt Creator 创建一个.pri文件 2013年10月09日 ⁄ 综合 ⁄ 共 254字 ⁄ 字号 小 中 大 ⁄ 评论关闭   这个问题很少人写,因为比较简单,但是让却让我花了好大功夫才 ...

  6. Qt 学习之路 2（61）：使用 SAX 处理 XML

    Qt 学习之路 2(61):使用 SAX 处理 XML  豆子  2013年8月13日  Qt 学习之路 2  没有评论 前面两章我们介绍了使用流和 DOM 的方式处理 XML 的相关内容,本章将介绍 ...

  7. 12.谈谈this对象的理解

    1.谈谈this对象的理解? 2.this指向问题   Javascript理解this对象 this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象. 通过以下几个例子加 ...

  8. nginx 之 proxy_pass

    nginx中有两个模块都有proxy_pass指令 ngx_http_proxy_module的proxy_pass 语法: proxy_pass URL; 场景: location, if in l ...

  9. HihoCoder - 1048 状压DP 经典题

    hihocoder题解说的十分清晰了,这份代码就是从讲解里学习的 方案数就是不断枚举合法状态下横放竖放或两者均可 合法判断的依据是记录当前行和下一行的状态 防止重复枚举的方法是先按行后按列 递归基瞎写 ...

  10. python 函数的递归

    递归:简单来说就是自己调用自己 这里我们又要举个例子来说明递归能做的事情. 例一: 现在你们问我,alex老师多大了?我说我不告诉你,但alex比 egon 大两岁. 你想知道alex多大,你是不是还 ...