前端HTML5

什么是HTML?

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

浏览器内核

  • 浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面

Web标准

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

Web标准的构成

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

基本语法规范

  • HTML标签是由尖括号包围的关键词
  • HTML标签通常是成对出现的,例如和,我们称为双标签。标签对中第一个标签是开始标签,第二个标签是结束标签
  • 有些特殊的标签必须是单个标签,例如
    ,我们称为单标签
标签名 定义 说明
HTML标签 页面中最大的标签,我们称为根标签
文档的头部 注意在head标签中我们必须要设置的标签是title
文档的标题 让网页拥有一个属于自己的网页标题
文档的主体 元素包含文档的所有内容,页面内容基本都是放到body里面的

网页开发工具




    
    
    
    我利用vscode创建的第一个页面


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

文档类型声明 

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

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

lang语言种类

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

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

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

charset字符集

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

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

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

HTML常用标签

标题标签

--

段落标签

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

换行标签


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


是个单标签


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

文本格式化标签

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

标签语义:突出重要性,比普通文字更重要

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



    
    
    
    Document


    

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

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

我是删除线 我是删除线

我是下划线 我是下划线

前端HTML5_第1张图片

布局标签

 

标签

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

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

,大盒子

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


    
我是一个div标签我一个人单独占一行
123
我是一个div标签我一个人单独占一行
123
百度 新浪 搜狐

前端HTML5_第2张图片

 图像标签

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

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


    

图像标签的使用:

alt 替换文本 图像显示不出来的时候用文字替换:

我是网页小白

title 提示文本 鼠标放到图像上,提示的文字:

我是网页小白

width 给图像设定宽度:

我是网页小白

height 给图像设定高度:

我是网页小白

border 给图像设定边框:

我是网页小白

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

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

 路径

目录文件夹和根目录

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

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

相对路径

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

同一级路径

前端HTML5_第3张图片

 下一级路径

前端HTML5_第4张图片

 上一级路径

前端HTML5_第5张图片

 超链接标签

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

文本或图像

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

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


    

1.外部链接

腾讯 腾讯

2.内部链接:网站内部页面之间的相互链接

公司简介

3.空链接:#

公司地址

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

下载文件

5.网页元素的链接

锚点链接

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

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

HTML中的注释和特殊字符


    
    
    
    
    讲   究
    
<p>是一个段落标签

你可能感兴趣的:(HTML,前端,html5)