资讯专栏INFORMATION COLUMN

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

kevin / 1228人阅读

摘要:行内元素特征设置宽高属性无效设置仅左右水平方向有效,上下垂直无效设置上下左右都有效内容不会自动进行换行行内块元素行内块元素综合了两者的特征,各有取舍,可以对任意元素进行属性设置。

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

标记语言

XHTML/HTML/HTML 5异同

了解doctype

HTML

HTML 5

标记语言

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

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

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

HTML/XHTML/HTML 5异同 HTML 简述

HTML 是超文本标记语言 (HyperType Markup Language) 的简称,HTML是用来描述网页的一种语言。

XHTML 简述

XHTML 是可扩展超文本标签语言 (EXtensible HyperText Markup Language)的简称, XHTML 的目标是用规范化语法结构来取代 HTML ,以 XML 为根本重构了 HTML 4.01 。

HTML 5 简述

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

新的语法特性被引进以支持这一点,如videoaudiocanvas标记 (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
 声明帮助浏览器正确地显示网页。

不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

HTML 5 声明:


HTML 4.01 声明:


XHTML 1.0 声明:


内容引用:HTML

HTML 基本格式

标准的HTML 5文档的格式:





    
    
        
        
        Title Tag
        
    
    
    
    
    
    

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

块级(block)元素

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

块级元素特征:

设置宽高属性有效

marginpadding上下左右(水平垂直)均有效

内容会自动进行换行

多个块状元素标签写在一起,默认排序从上到下

行内(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元素既可以包含脚本语句(如上),也可以通过src属性指向外部脚本文件:

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



HTML 5

初期需要了解内容:

新便签在各浏览器的兼容情况

与媒体相关的标签

HTML 5 API

Canvas

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


个人静态博客:

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53653.html

相关文章

  • 前端菜鸟笔记 Day-5 CSS 高级

    摘要:绝对长度单位视输出介质而定,不依赖于环境显示器分辨率操作系统等。个人静态博客气泡的前端日记 文章大纲来源:【Day 5】CSS 高级 CSS 选择器 CSS 拓展 CSS 单位 CSS 参考手册 CSS 选择器 内容引用:CSS 选择器 元素选择器 html { ... } 选择器分组 h2, p { ... } 类选择器 .important { ... } p.warning ...

    Tony_Zby 评论0 收藏0
  • 前端菜鸟笔记 Day-2 Form表单

    摘要:标签定义表单表单元素表单包含表单元素。沃尔沃马自达雪佛兰奥迪定义待选择的选项,列表通常会默认选择第一个选项,可以使用属性来定义预定义选项。马自达定义多行输入字段。属性规定输入字段允许的最大长度。内容连接类型个人静态博客气泡的前端日记 文章大纲来源:【Day 2】Form表单 HTML表单 表单元素 表单属性 HTML5追加的表单元素 HTML表单 HTML 表单用于搜集不同类型的用...

    shusen 评论0 收藏0
  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    mingzhong 评论0 收藏0

发表评论

0条评论

kevin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<