HTML5简介与标签

雨点打透心脏的1/2处 2024-03-23 13:21 93阅读 0赞

一、HTML5基本概念

1、介绍

HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾。HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字。

2、DOCTYPE声明

DOCTYPE是document type(文档类型)的缩写。<!DOCTYPE html> 是H5的声明,位于文档的最前面,处于标签之前他是网页必备的组成部分,避免浏览器的怪异模式(不同浏览器之间)一定得写。

2fc248a183e84b16904abcfb1e2a34f8.png

二、标签

1、骨架标签介绍

html标签

定义HTML文档,让浏览器明白这个是HTML文档,其他元素要包裹在它里面,标签限定了文档的开始点和结束点。

8d01a55a4f0d466f9086021fc656cbd0.png

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

fbddc25d62a64e959b4099777251f862.png

body标签

body元素定义文档的主体。他包含文档的所有内容(文本、超链接、图像、表格等)。它会直接在页面中显示出来,就是用户可以直观看见的内容。

0bf779e2386d45ada2fba36cad08827c.png

title标签

可以定义文档的标题

显示在浏览器窗口的标题栏或状态栏

title标签是head标签中唯一必须要求包含的东西,写head一定写title

title的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容调整, 满足搜索引擎的排名需求。

a4fe2dbc30604119b5cf45e57b01d337.png

meta标签

meta标签用来描述一个HTML网页文档的属性,关键词等, 列如:charset=”utf-8” 是说当前使用的是utf-8编码格式。

a30ff1bbc403483894e2bed07e0f83cc.png

2、标题标签

标题通过

标签进行定义的。

定义最大的标题,

定义最小的标题 5413df4625fa4f6cacb4235fae7ec464.png

3、段落、换行、水平标签

段落标签

:把文字内容放在里面,方便调节。

换行标签
:此标签后的内容从下一行开始。

水平线


:创建一条水平线。

属性:color:更改颜色。

width:设置水平线的长度

size:设置水平线的高度

align:设置水平线的对齐方式。

4、图片标签

标签定义图片。

属性:src:图片路径

alt:定义图像的替代文本

width:规定图片宽度

height:规定图像的高度

title:鼠标悬停在图片给予的提示

762af310a45448548df3c6c73f7cfd2f.png

5、超文本链接

标签设置超链接,超链接可以是文本、图片。

属性:href:定义链接地址

a92a12a0fed146339606ff17186be793.png

6、文本标签

014805d11eb74a539e48600be75a4bb0.png

7、列表标签

A、有序标签

有序列表是一列项目,列表项目使用数字进行标记。有序列表始于

    标签。每个列表始于
  1. 标签。且列表可以嵌套。

    属性:type:1:表示使用数字标号

    a:表示使用小写字母标号

    A:表示使用大写字母标号

    i:表示使用小写罗马数字标号

    I:表示大写罗马数字标号

    c43af570fc01479fa7f979d9e1b89196.png7ab3c6ff0113423f87fad0dd6d9eb66b.png

    B、无序列表

    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于

      标签。每个列表项始于
    • 标签。

      属性:type:disc:默认实心圆

      circle:空心圆

      square:小方块

      none:不显示

      8、表格

      表格标签:

      行标签:

      列标签:

      表格属性:border:设置表格的边框

      width:设置表格的宽度

      height:设置表格的高度

      colspan:列合并。左右

      rowspan:行合并。上下

      9、form表单

      表单是由容器和控件组成的, 一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框、按钮叫做表单控件,表单就是容器,它能够容纳各种各样的控件。

      属性:action:服务器地址

      name:表单名称

      method:提交方式(get、post)

      控件:按钮:button

      输入框:input

      文本框:text

      密码框:password

      10、块元素、行内元素

      H5之前,经常把元素按照块元素和内联元素区分。在H5中,元素不再按照这种方式来区分,而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一类,被称为穿透,元素可能属于不止一个类别,称为混合。

      e827c61dc4664619a0d4c4e04370c81b.png

      11、H5新增标签

      H5出现之前,一般采用div+CSS布局页面。这种布局方式不能清晰展示文档结构,也不利于搜索引擎爬虫对页面的爬取。

      div:容器元素,

      H5新标签:

      :头部

      :导航

      :定义文档中的节,章节、页眉、页脚等

      :侧边栏

      :脚部

      :代表一个独立的、完整的相关内容块。

发表评论

表情:
评论列表 (有 0 条评论,93人围观)

还没有评论,来说两句吧...

相关阅读

    相关 HTML简介常用标签

    声明:本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记,如果想详细了解的可以搜索以下网址: 1. H5C3+移动布局:[ 黑马程序员pink老师前端入门视频教

    相关 HTML5简介

    1.HTML5的设计目的是为了移动设备上支持多媒体,是下一代HTML标准。 HTML5中一些有趣的新特性: 用于绘画的canvas元素 用于媒介回放的video和a

    相关 HTML 5 简介

     什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,We

    相关 HTML5 简介

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 一