前端HTML5

什么是HTML？

• 超文本标记语言，它是用来描述网页的一种语言
• HTML不是一种编程语言，而是一种标记语言
• 标记语言是一种标记标签

浏览器内核

• 浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

Web标准

• Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织

Web标准的构成

• 主要包括结构、表现和行为三个方面
• 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
• 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
• 行为是指网页模型的定义及交互的编写，主要是JavaScript

基本语法规范

• HTML标签是由尖括号包围的关键词
• HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中第一个标签是开始标签，第二个标签是结束标签
• 有些特殊的标签必须是单个标签，例如
  ,我们称为单标签

标签名	定义	说明
	HTML标签	页面中最大的标签，我们称为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让网页拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

网页开发工具

    
    
    
    


    写代码是一件非常快乐的的事情

文档类型声明 

    //当前页面采取的是HTML5版本来显示网页

作用就是告诉浏览器使用哪种HTML版本来显示网页

lang语言种类

    //用来定义当前文档显示的语言

//en定义语言为英语
//zh-CN定义语言为中文

但是定义了一个语言种类之后，仍然可以在其中写另外一种语言

charset字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字

在标签内，可以通过标签的charset标签属性来规定HTML文档应该使用哪种字符编码

可以避免打开代码页面出现乱码情况

HTML常用标签

标题标签

--

段落标签

标签用于定义段落，它可以将整个网页分为若干个段落

换行标签

一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

是个单标签

标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

文本格式化标签

在网页中，需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	或	更推荐
倾斜	或	更推荐
删除线	或	更推荐
下划线	或	更推荐

    
    
    
    


    
我是加粗的文字
        我是加粗的文字   

    
我是倾斜的文字
        我是倾斜的文字


    
我是删除线
        我是删除线
    
我是下划线
        我是下划线

布局标签

 

和标签

div是division的缩写，表示分割、分区。span表示跨度、跨距

div标签用来布局，但是现在一行只能放一个

，大盒子

span标签用来布局，一行上可以多个，小盒子

    
我是一个div标签我一个人单独占一行
123
    
我是一个div标签我一个人单独占一行
123
    

    百度
    新浪
    搜狐

 图像标签

标签用于定义HTML页面中的图像

src是标签的必须属性，它用于指定图像文件的路径和文件名

    
图像标签的使用：
    
    
alt 替换文本 图像显示不出来的时候用文字替换：
    
    
title 提示文本 鼠标放到图像上，提示的文字：
    

    
width 给图像设定宽度：
    

    
height 给图像设定高度：
    

    
border 给图像设定边框：
    

修改高度和宽度时，可以只修改一项，另外的一项会随之做出改变，等比例缩放

• 图像标签可以拥有多个属性，必须写在标签名的后面
• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
• 属性采取键值对的格式，即key="value"的格式，属性="属性值"

 路径

目录文件夹和根目录

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等

根目录：打开目录文件夹的第一层就是根目录

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径

同一级路径

 下一级路径

 上一级路径

 超链接标签

标签用于定义超链接，作用是从一个页面链接到另一个页面

文本或图像

href用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能

target用于指定链接目标页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

    
1.外部链接
    腾讯
    腾讯
    
    
2.内部链接：网站内部页面之间的相互链接
    公司简介

    
3.空链接：#
    公司地址

    
4.下载链接：地址链接的是文件.exe或者是zip等压缩包形式
    下载文件

    
5.网页元素的链接
    

锚点链接

点击我们的链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如第2集介绍

HTML中的注释和特殊字符

    
    
    
    
    讲   究
    

    
    
    <p>是一个段落标签