前端菜鸟笔记 Day-1 HTML&HTML 5

栏目: Html · 发布时间: 5年前

内容简介：文章大纲来源：标记语言(ML)即 Markup Language，可以准确定义数据信息本身以及和数据相关的信息。其中

文章大纲来源：【Day 1】HTML & HTML 5

标记语言
XHTML/HTML/HTML 5异同
了解doctype
HTML
HTML 5

标记语言

标记语言(ML)即 Markup Language，可以准确定义数据信息本身以及和数据相关的信息。

其中 标记(markup) 这个词，来源于传统出版业的“标记”手稿，也就是在原稿边缘加注一些符号来指示打印上的要求（字体段落的要求）。

在这个例子中，原稿本身就是 数据信息 ，加注的指示就是 和数据相关的信息 。

HTML/XHTML/HTML 5异同

HTML 简述

HTML 是超文本标记语言 ( H yper T ype M arkup L anguage) 的简称，HTML是用来描述网页的一种语言。

XHTML 简述

XHTML 是可扩展超文本标签语言 ( EX tensible H yper T ext M arkup L anguage)的简称， XHTML 的目标是用规范化语法结构来取代 HTML ，以 XML 为根本重构了 HTML 4.01 。

HTML 5 简述

HTML 5 的设计目的是为了在移动设备上支持多媒体。

新的语法特性被引进以支持这一点，如 video 、 audio 和 canvas 标记 (tag) 。

HTML 5 将会取代1999年制定的 HTML 4.01、XHTML 1.0 标准。

三者异同点

HTML 5 和 XHTML 是老版 HTML 的替代
HTML 5 主要用来在移动设备上支持多媒体
XHTML 为了用来严格规范语法结构
HTML/XHTML/HTML 5 仅仅是版本不同
目前 HTML 5 是主流

原文引用：

HTML、XML、XHTML和HTML 5的异同

拓展阅读：

英文原文: Jeremy Keith | The Design of HTML 5
翻译： Web的真谛：HTML 5到底是什么意思？
原演讲视频： Jeremy Keith | The Design of HTML 5 | Fronteers 2010

doctype

<!DOCTYPE> 声明帮助浏览器正确地显示网页。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML 5 声明：

<!DOCTYPE html>

HTML 4.01 声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

内容引用： HTML <!DOCTYPE>

HTML

基本格式

标准的HTML 5文档的格式：

<!DOCTYPE html>
<!--文档类型声明,不区分大小写，主要是告诉浏览器当前的文档类型-->
<html>
<!-- 表示html文档开始 -->
    <head>
    <!-- 包含文档元数据开始  -->
        <meta charset="UTF-8">
        <!-- 声明字符编码 -->
        <title>Title Tag</title>
        <!-- 设置文档标题 -->
    </head>
    <!-- 包含文档元数据接受 -->
    <body>
    <!-- 表示html内容部分开始，也就是可见部分 -->
    </body>
    <!-- 表示html内容部分结束 -->
</html>
<!-- 表示html文档结束 -->

内容引用： HTML 5的基本格式

块级(block)元素

块级元素最常使用的是 div ，其他的还有 hX、p、nav、aside、header、footer、section、article、ul-li、address 等等，也可以对任意元素进行 display:block 属性设置。

块级元素特征：

设置宽高属性有效
margin 、 padding 上下左右（水平垂直）均有效
内容会自动进行换行
多个块状元素标签写在一起，默认排序从上到下

行内(inline)元素

行内元素最常使用的是 span ，其他的还有 a、code、i、img、input、textarea 等等，也可以对任意元素进行 display:inline 属性设置。

行内元素特征：

margin
padding

行内块(inline-block)元素

行内块元素综合了两者的特征，各有取舍，可以对任意元素进行 display:inline-block 属性设置。

行内块元素特征：

内容不会自动进行换行
能够识别宽高
多个行内块元素默认排列方式从左到右

HTML tag

也不用每个都详细说一下，后面有时间的话开一个专题挑几个常用的出来详细说一下。

HTML 参考手册

语义化

语义化的含义就是用正确的标签做正确的事情。

HTML语义化就是 让页面的内容结构化 ，便于浏览器、搜索引擎（机器）理解解析，利于SEO。

内容引用：前端工程师手册-HTML语义化

script/style/link

<script> 标签用于在 HTML 页面中插入一段 JavaScript 。

<script type="text/javascript">
document.write("Hello World!")
</script>

script元素既可以包含脚本语句（如上），也可以通过 src 属性指向外部脚本文件：

<script src=".../filename.js"/></script>

<style> 标签用于为HTML文档定义 样式信息 。

在style中，可以规定浏览器如何呈现HTML文档，标签中 type 属性是必须的，定义style元素的内容，唯一可能值是 text/css ，style元素位于head部分中。

<head>
  <style type="text/css">
    /* ... */
  </style>
</head>

<link> 标签定义文档与外部资源的关系，常见的用途是连接样式表，在 HTML 中， <link> 标签没有结束标签。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

HTML 5

初期需要了解内容：

新便签在各浏览器的兼容情况
与媒体相关的标签
HTML 5 API
Canvas

在后面涉及到的时候再开专题进行介绍。

个人静态博客：

气泡的前端日记： https://rheabubbles.github.io

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

PCI Express 体系结构导读

王齐 / 机械工业 / 2010-3 / 55.00元

《PCI Express 体系结构导读》讲述了与PCI及PCI Express总线相关的最为基础的内容，并介绍了一些必要的、与PCI总线相关的处理器体系结构知识，这也是《PCI Express 体系结构导读》的重点所在。深入理解处理器体系结构是理解PCI与PCI Express总线的重要基础。读者通过对《PCI Express 体系结构导读》的学习，可超越PCI与PCI Express总线......一起来看看《PCI Express 体系结构导读》这本书的介绍吧!

码农工具