html概述

演讲者：whqet

内容提纲

html简介
html历史
html语法
html规范

html简介

超文本标记语言

html简介

结构标准语言

html简介

网页文件基石

html历史

html5特性

浏览器支持

数据来源 caniuse

canvas 支持情况

Drag and Drop 支持情况

html文件架构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <p class="info"></p>
</body>
</html>

html元素

html语法

语法规则

<!-- 标签名、属性名均为小写 -->
<!-- 双标签必须关闭 -->
<双标签 属性名="属性值" 无值属性></双标签>
<a href="//github.com/zptcsoft" title="欢迎follow我！">follow me</a>

<!-- 单标签必须关闭 -->
<单标签 属性名="属性值" 无值属性>
<input type="text" value="无值属性用法" disabled>

follow me

嵌套规则

<!-- 标签正确嵌套，二级菜单为例 -->
<nav role="navigation">
    <ul class="nav">
        <li><a href="#">网站首页</a></li>
        <li><a href="#" class="has-submenu">新闻公告</a>
            <ul class="submenu">
                <li><a href="#">企业新闻</a></li>
                <li><a href="#">通知公告</a></li>
            </ul>
        </li>
        <li><a href="#" class="has-submenu">服务项目</a>
            <ul class="submenu">
                <li><a href="#">网站建设</a></li>
                <li><a href="#">移动应用</a></li>
                <li><a href="#">互联网运维</a></li>
            </ul>
        </li>
        <li><a href="#">服务宗旨</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

html规范

结构表现行为分离

<!-- 1. 禁用“仅用于”表现的标签 -->
    <b>粗体</b>
    <i>斜体</i>
    <center>居中显示</center>
<!-- 2. 禁用html标签的“表现”属性 -->
    <h2 align="center" bgcolor="#f00">禁用表现属性</h2>
<!-- 3. 禁用html标签的“行为”属性 -->
    <a href="#" onclick="alert('ok')">禁用行为属性</a>

html概述

演讲者：whqet

内容提纲

html简介

html简介

html简介

html历史

html5特性

浏览器支持

canvas 支持情况

Drag and Drop 支持情况

html文件架构

html元素

html语法

语法规则

嵌套规则

html规范

结构表现行为分离

语义化标签

语义化

前端开发

旨为前端开发工程师的前端开发基础课程