html基础

一、html页面结构

1、HTML定义

HTML(HyperText Markup Language)超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。目前已更新到HTML5，HTML添加了一些新的语义化标签及新特性，放弃了一些就标签。

主流浏览器：IE、Firefox、Chrome、Goole、Opera等。

2、HTML标签

HTML标签的大小写无关，一般推荐使用小写。

特点：

  • <html>
  • <div>和</div>，一个开始一个结束标签，一般html的标签都是闭合的成对出现，但是，也有例外，如<img/>、<br/>、<input/>。
  • <img src=”” =””/>

3、HTML基本结构

结构由网页的头部和网页的身体组成，如下：

 

 

文档声明<!DOCTYPE html>

在<html>前，要写文档声明语句: <!DOCTYPE html>，当然也可以用小写表示。文档声明的作用是告诉浏览器该文档遵循html规范。

页面基础元素<html>

<html>是页面的基础元素，主要用来定义页面的开始和结束部分，其他内容包括在<html></html>标签内。

页面头部元素<head>

HTML的头部元素是以<head>为开始标记，以</head>为结束标记。它用于包含当前文档的相关信息，可包含< >元素、< >元素等，分别用来定义页面的标题、编码。使用<head>元素可以将基本信息部分和页面主体内容区分开来。

页面标题元素< >

一般情况下，我们都会设定html文档的标题。这样的作用是使用户看起来感觉友好。标签为< ></ >,标签内放标题名称，会显示在浏览器的窗口的标题栏。

元信息元素< >

元信息元素< >用来定义页面的附加信息，其中包括页面的作者、版权、关键字等相关信息。

语法结构：< 属性=“属性值”/>

< >元素是一个自封闭的元素，通过其中的属性来添加各种附加信息。< >元素在不适用任何属性时，对页面没有影响。

元信息元素名称属性：namename属性用来制定文档中附加信息的名称。例如，最常用的值“keywords”用来定义文档中的关键字，方便搜索引擎的搜索。name属性的语法结构如下。

在< >元素中，名称必须对应有相关的值才能生效

页面编码

编码的种类有多种，但常用的是utf-8和gb2312。utf-8为多国语言编码，国际通用字符编码，gb2312为中文简体编码。设置网页编码的语句为< charset= \"utf-8\" />，是在<head></head>标签内定义的。

页面主体标签<body>

<body>元素是定义文档的主体，包含文档的所有内容（文本、超链接、图像、表格、列表等等），所要在浏览器中展示的内容就写在<body></body>标签内。

4、常用标签元素

行内元素

超级链接<a href=”url”></a>:a标签用来定义一条超链接，其中要有的是href属性，href的作用是指明超链接要链接到的网址。除了href属性，还有 属性表示链接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页)，_top（当前页）。

span标签

span是比较常用的文本标签，可以对特殊处理的文字部分添加样式。

文本格式化标签：

图像<img/>:用于展示图片

input标签

文件类型 type=”file”

多行输入textarea

按钮标签button

 

块级元素

  • 100%

块级容器<div></div>：可对他设置宽高等各种样式。

段落元素<p></p>:用于定义一段文字。

 

标题h1-h6：用于语义化显示标题部分，随着数字增大标题大小变小。

无序列表ul

有序列表ol

表格table

HTML5新增标签

1、结构标签

（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；

（2）article：特殊独立区块，表示这篇页眉中的核心内容；

（3）aside：标签内容之外与标签内容相关的辅助信息；

（4）header：某个区块的头部信息/标题；

（5）footer：底部信息；

（6）nav：导航条部分信息；

2、媒体标签

（1）video：视频；

<video src=\"video/oceans.mp4\" controls=\"controls\" preload=\"auto\" loop=\"loop\">您的浏览器不支持</video>

（2）audio：音频；

<audio src=\"video/oceans.mp4\" controls=\"controls\">您的浏览器不支持</audio>

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章