一、初识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:电子邮件地址;

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

块元素:无论内容多少,该元素独占一行

最新文章

  1. 使用HTML5的cavas实现的一个画板
  2. 手写一个allocator
  3. Python开发工具PyCharm个性化设置(图解)
  4. HTML5开发笔记:初窥CANVAS,上传canvas图片到服务器
  5. 分析-eclipse已经导入jar包了,但还是出现classNotFound异常
  6. iOS----CocoaPods的安装、使用和,原理+参考流程+常见问题
  7. lgy -oracle
  8. 如何伪装成为一名前端(JS方向)
  9. 重启EBS
  10. Lwip的相关资料
  11. Hello World程序
  12. 九度OJ1172--哈夫曼树
  13. 一个简单的创建圆角图像的UIImage扩展实现
  14. 转 Java中Filter、Servlet、Listener的学习
  15. 几种常用单片机I/O口线的驱动能力
  16. Django with uWSGI and nginx
  17. 阿里云服务器实战(一) : 在Linux下Tomcat7下使用连接池
  18. Linux内存管理 (10)缺页中断处理
  19. hadoop配置项笔记 - streaming
  20. js 正则表达式的使用(标志 RegExp exec() test() compile() $1...$9)

热门文章

  1. leecode刷题(6)-- 两个数组的交集II
  2. 图层锁定vlisp函数高版本图元自动淡色显示
  3. SDUT OJ 数据结构实验之二叉树七:叶子问题
  4. 一、pytest的介绍和安装
  5. Spring Cloud-服务的注册与发现之服务注册中心(Eureka Server)
  6. Jupyter Notebook 使用入门
  7. Springboot 整合 中国移动MAS HTTP1.0 实现短信发送服务(二)
  8. Python闭包需要注意的问题
  9. JavaWeb学习笔记(十三)—— JDBC时间类型的处理
  10. 011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)