1 HTML简介

1.1. 什么是HTML？(了解)

HTML是超文本标记语言（HyperText Markup Language，HTML）的缩写。是标准通用标记语言(SGML Standard Generalized Markup Language)下的一个应用，是一种规范，一种标准。

1.2. HTML是干嘛用的？（了解）

网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。综上所述，HTML是一种能被浏览器识别解析，并且能够显示相应内容的语言，在web开发中，HTML是属于书写网页结构语言，扮演着搭建网页框架结构（这里的框架结构就类似于现代建筑中，修房子需要首先搭建起框架结构一样）的作用，是web开发中必不可少的一门语言

2 Hello World

2.1. 挑选合适的浏览器

最流行的一些浏览器都已经实现了许多HTML的特性，然而不是每款浏览器都支持所有的特性，在把某个特性用到实际项目之前，首先应该检测一下浏览器是否支持这个特性。可以参考http://caniuse.com这个网站，查看浏览器的支持情况。这里推荐几款主流的浏览器

Google Chrome Mozilla FireFox Opera Apple Safari Internet Explorer(高版本)

2.2. 开发工具介绍

文本增强编辑器:语法高亮显示、自动缩进等辅助功能。 EditPlus/notepad++/sublime/Dreamweaver 这类工具小巧，打开速度快

IDE(集成开发环境)，提供的功能主要有语法高亮显示、自动缩进、语法提示、自动完成、版本控制等，提高开发效率。zendstudio/netbeans/phpstorm /webstorm/hbuilder

2.3. 创建HTML文档（掌握）

实例2：

<!DOCTYPE HTML>

<html>

<head>

<title>这是我的第一个网页</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

实例2中，DOCTYPE 元素让浏览器明白其处理的是HTML文档，表示HTML文档的开始，紧跟其后的是html元素的开始标签，它告诉浏览器：从html开始标签开始到html结束标签，所有元素内容都应作为HTML处理。head元素中的内容为HTML文档的元数据部分，HTML的元数据用来向浏览器提供文档的相关信息。body元素中的内容为HTML的主体，这也是HTML文档的最后一部分。body元素告诉浏览器该向用户显示文档的哪些内容

2.4. 使用元素

实例1:

I like Money and beauty

ps:在这个实例中，元素分为3个部分，其中有两个部分称为标签（tag），开始标签和结束标签。夹在两个标签之间的是元素的内容（本实例中单词Money为元素的内容）。两个标签连同它们之间的内容构成code元素。

HTML定义了各种各样的元素，他们在HTML文档中起着各种不相同的作用。因此，学好HTML的关键在于掌握各种HTML元素的不同含义，通俗的讲就是要知道每个元素具体有什么样的功能

2.5. 父元素、子元素、后代元素和兄弟元素（掌握）

HTML文档中元素之间有明确的关系。如果一个元素包含另一个元素，那么前者就是后者的父元素，反过来说，后者就是前者的子元素。一个元素可以拥有多个子元素，但是只能有一个父元素。

实例3：

<DOCTYPE HTML>

<html>

    <head>

        <title></title>

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

    </head>

    <body>

        <p>人如果没有梦想，跟咸鱼有什么区别？</p>

        <p>你看那个人，好像一条狗！</p>

    </body>

</html>

实例3中，最外层的html元素包含了head元素和body元素，那么head元素和body元素就是html的子元素，反之，head和body元素的父元素只有一个，那就是html元素。同时head元素和body元素都是在html元素之下，属于同级元素，相当于辈分一样，我们就称他们互为兄弟元素。而body元素中的p元素相对于html来说，p元素是其子元素的子元素，类似于html的孙子，我们也可以称之为子孙元素，如果更往下嵌套（包含子孙元素），统称为html元素的后代元素。

注意:除了某个元素的下一级元素我们称之为子元素以后，连续一层一层往下嵌套的都可以称之为后代元素

2.6 注释

注释的作用：方便别人或者自己阅读代码

在html中注释的写法：

2.7 字符实体

HTML文档中有些字符具有特殊含义，最明显的就是< 和 >这两个字符。有时候需要在文档内容中用到这些字符，但是又不想被当作HTML来解析处理。因此，产生了字符实体，也就是HTML实体。实体是浏览器用来代替特殊字符的一种代码。

螺钉课堂视频课程地址：http://edu.nodeing.com

html+css快速入门教程（1）的更多相关文章

  1. html+css快速入门教程（5）

    练习: 1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c 7.3 定位 通过使用 position 属性,我们可以选择 3 种不同类型的定位,这会影响元素框生成的方式. ...

  2. html+css快速入门教程（4）

    练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型 网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...

  3. html+css快速入门教程（3）

    练习: 1.画盒子 2.相框 5 基础选择器 5.1 id选择器 ID选择器与类选择器的定义与引用方式类似,只是定义的符号不一样.ID通常表示唯一值,因此,ID选择器在CSS 中通常只出现一次.如果出 ...

  4. html+css快速入门教程（2）

    3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容 ...

  5. html+css快速入门教程（6）

    9 综合实例 仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...

  6. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  7. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  8. EntityFramework6 快速入门教程

    EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...

  9. Apple Watch开发快速入门教程

     Apple Watch开发快速入门教程  试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

随机推荐

  1. Qcom平台RTC驱动分析

    相关文件list: pm8998.dtsi ---RTC dts配置 qpnp-rtc.c ---qcom RTC驱动 class.c ---RTC相关class interface.c ---相关R ...

  2. Java实现 LeetCode 55 跳跃游戏

    55. 跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] ...

  3. Java实现 蓝桥杯 历届真题 稍大的串

    串可以按照字典序进行比较.例如: abcd 小于 abdc 如果给定一个串,打乱组成它的字母,重新排列,可以得到许多不同的串,在这些不同的串中,有一个串刚好给定的串稍微大一些.科学地说:它是大于已知串 ...

  4. java实现第三届蓝桥杯排日程

    排日程 [编程题](满分34分) 某保密单位机要人员 A,B,C,D,E 每周需要工作5天,休息2天. 上级要求每个人每周的工作日和休息日安排必须是固定的,不能在周间变更. 此外,由于工作需要,还有如 ...

  5. java实现第七届蓝桥杯冰雹数

    题目8.冰雹数 题目描述 任意给定一个正整数N, 如果是偶数,执行: N / 2 如果是奇数,执行: N * 3 + 1 生成的新的数字再执行同样的动作,循环往复. 通过观察发现,这个数字会一会儿上升 ...

  6. CGLIB动态代理机制，各个方面都有写到

    CGLIB库介绍 代理提供了一个可扩展的机制来控制被代理对象的访问,其实说白了就是在对象访问的时候加了一层封装.JDK从1.3版本起就提供了一个动态代理,它使用起来非常简单,但是有个明显的缺点:需要目 ...

  7. el-upload配合vue-cropper实现上传图片前裁剪

    需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像. 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数. 裁 ...

  8. Python学习之计算机基础

    计算机基础: (1)计算机俗称电脑,是现代用于高速计算的电子计算器,可以进行数值计算也可以进行逻辑计算,还有存储记忆功能.是能够按照程序运行,自动,高速处理海量数据的现代化智能 电子设备. (2)物理 ...

  9. MAC/VMware配置双机调试简述

    Configuration 注:建议提前备份所有修改内容,可能会导致无法开机. 我的测试环境: server: windows 10 + windbg client: windows 7 Server ...

  10. jsp页面用DBHelper实现简单的登陆验证

    首先我们需要写一个简单的登陆页面login.jsp,然后用from表单提交给index.jsp页面.在index.jsp页面通过DBHelper连接数据库判断账号和密码,如果密码正确则显示登陆成功. ...