HTML入门-CSDN博客

本文链接：https://blog.csdn.net/pong_dong/article/details/131664159

一、前言

1. 发展史

http://info.cern.ch/ 世界第一个网站，非常简洁。
在这里插入图片描述

2.认识web

** ⌈网页⌋ ** 主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频、flash等。
** ⌈浏览器⌋ **是网页显示、运行的平台。
** ⌈浏览器内核⌋ ** 排版引擎、解释引擎、渲染引擎（负责读取网页内容，整理讯息，计算网页的显示方式并显示页面）。

3.前端三层

在这里插入图片描述

二、工具

1.VS Code

下载地址：https://code.visualstudio.com/
一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。

2.HBuilder

下载地址：http://www.dcloud.io/
一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。

3.Sublime Text

下载地址：http://www.sublimetext.com/
一个先进的代码编辑器，支持多种编程语言，同时支持Windows、Linux、Mac OS X等操作系统。

4.WebStorm

下载地址：https://www.jetbrains.com/webstorm/
一款超级强大的JavaScript开发工具，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”，继承了IntelliJ IDEA强大的JS部分的功能。

5.Dreamweaver CC 2017

下载地址：https://www.adobe.com/products/dreamweaver.html
老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。
好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。

三、HTML

1. HTML初识

⌈HTML⌋ (Hyper Text Markup Language):超文本标记语言。
所谓超文本，有2层含义：
因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
⌈HTML骨架格式⌋

<!DOCTYPE html> <!--版本声明-->
<html lang="en"> <!--最外层标签，页面最大的标签，根标签-->
    <head> <!--头部标签-->
        <meta charset="UTF-8"> <!--编码方式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--文件头，向浏览器传达网页内容-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title> <!--标题标签-->
    </head>
    <body><!--文档主体-->
        
    </body>
</html>

⌈团队约定⌋：
HTML标签名、类名、标签属性和大部分属性值统一用小写。

⌈HTML元素标签分类⌋：
常规元素（双标签）
空元素（单标签）

⌈HTML元素标签关系⌋：
嵌套关系父子级包含关系
并列关系兄弟级并列关系
如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

2. 基础标签

段落排版标签
标题标签：<h*>标题标签</h*> h1-h6：标题标签从小到大；
段落标签：
水平线标签：<hr>
换行标签： 
div和span标签：是没有语义的，是我们网页布局最主要的两个盒子。
文字排版标签
字体： color、face、size
粗体：、
斜体：、
文字加删除线：<s></s>、<del></del>
文字加下划线：、<ins></ins>
上标：
下标：
标记：
缩写：<abbr title=""></abbr>
title属性：描述了元素的额外信息 (作为工具条使用)
页面效果：
在这里插入图片描述

标签属性（行内式）
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> 1
<手机 颜色="红色" 大小="5寸"> </手机>

图片标签
在这里插入图片描述

<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />

注意：
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取键值对的格式 key=“value” 的格式

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target="_self" 默认窗口弹出方式
target="_blank" 新窗口弹出

属性作用href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

src和href的区别：
一句话概况：src是引入资源的，href是跳转url的。
注释标签

<!-- 注释的内容 -->

快捷键： ctrl+/ 、 ctrl+shift+/
⌈团队约定⌋：注释内容前后各一个空格符，注释位于要注释代码的上面，单独占一行。

3. 元素的分类

块元素：div、h1-h6、hr、p、……
内联元素：b、i、img、span、del、ins、……

4、HTML媒体

图片用img标签，那么视频音频怎么显示在网页上呢？
视频标签：<video></video>
音频标签：<audio></audio>

<audio src="a.mp3" controls loop autoplay></audio>

<video src="a.mp4" controls loop autoplay width="200px" height="300px"></video>

关键属性：

src：音频路径
controls：音频控件
autoplay：自动播放
loop：循环播放