HTML 入门介绍

Posted kaichenkai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 入门介绍相关的知识，希望对你有一定的参考价值。

html 简介

定义：

超文本标记语言（html）是标准通用标记语言下的一个应用，也是一种规范，一种标准

它通过标记符号来表示网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符号解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不暂停其解释执行过程，编写者只能通过显示效果来分析出错原因和出错部位，但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

 

特点：

  1. 简易性：html 版本升级采用超集方式，从而更加灵活方便
  2. 可扩展性：html 的广泛应用带来了加强功能，增加标识符等要求，采取子类元素的方式，为系统扩展带来保证
  3. 平台无关性：虽然个人计算机大行其道，但使用 mac 等其他机器的大有人在，html 可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因
  4. 通用性：html 是网络的通用语言，一种简单、通用的全置标记语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器

简单理解：正如我们写的 python 代码，运行时需要解释器来翻译，那么 html 代码的解释器就是浏览器，不过各自的解释规则不同。

 

结构：

<!DOCTYPE html> #html文档类型，这个是html5写法
<html>
    <head>

    </head>
    <body>

    </body>
</html>
<!--
以html开头和html结尾，中间包含了head和body，如果把html看作人，那么head就是头，body就是身体，所以头部里都东西一般都是看不见的。
<head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了该HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意。
-->

 

 

HTML 标签

html 标签指的是：<head>、<body>、<table> 等被尖括号包起来的对象，绝大部分的标签都是成对出现的，如 <table></talbe>、<form></form>，当然还有少部分不是成对出现的，如 <br>、<hr> 等，标签可以嵌套，比如在 body 标签中嵌套 form 标签，在 form 中又可以嵌套其他标签

 

标签分类

按语法分类：

  • 闭合标签：有开始表示和结束标签，必须成对出现，比如上面的 <html></html>
  • 自闭合标签：单个存在的标签，自己封闭，如 <br/>，这里不加 / 也不会出错

 

head 标签

head 头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果

头部中最常用的标记符是 <title> 和 <meta> 标签

  • <title> 用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单 
    <title>hello world</title>

 

  • <meta> 用于定义文档和外部资源之间的关系，提供有关页面的元信息，例如：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词、页面转码 
    <!-- 设置编码 -->
<meta charset="UTF-8">
<!-- 自动刷新页面 -->
<meta http-equiv="Refresh" content="3">  <!-- 3 秒刷新一次页面 -->
<!-- 跳转 -->
<meta http-equiv="refresh" content="3;Url=http://www.baidu.com"> <!-- 3 秒钟后跳转至 www.baidu.com -->
<!-- 关键字信息 -->
<meta name="keywords" content="this is key word">
<!--兼容IE：X-UA-Compatible-->
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=EmulateIE7" />

     

  • link 
    <link rel="stylesheet" href="css/common.css">   <!-- 样式 -->
<link rel="shortcut icon" href="image/favicon.ico">  <!-- 图标 -->

     

 

以上是关于HTML 入门介绍的主要内容，如果未能解决你的问题，请参考以下文章

WPF入门介绍

HTML5从入门到精通的内容介绍

Python入门教程--介绍基本语法

零基础入门前端系列—HTML介绍

Asp.Net MVC4入门指南： 入门介绍

Asp.Net MVC4入门指南： 入门介绍