html简介

简介: html简介

1.html概述

平时我们打开一个网页,比如

www.javayihao.top

我们可以看到浏览器会展示一个有一定结构、好看的样式、动态效果的页面给我们,要想构成这样一个网页,需要的基本元素有三个,也被称为前端三剑客,即html+css+js

首先学习网页的基本结构——html,用来一个页面如何布局,有哪些东西(元素或者标签)的超文本标记语言,

什么是超文本标记语言?首先看看什么是文本?

我们打开记事本输入一句话,保存,这个文件就是一个文本。

我们再次打开将这句话用如下两个h1包裹,保存并将这个test.txt文件改为test.html

单击打开,出现加粗放大的效果

就是因为我们加入了h1(还有很多类似元素)这种文本——“超文本”,使得页面内可以出现标题(放大加粗),链接,甚至包含图片、音乐、视频等非文字元素,这里要强调的是这些超文本只是用来标记当前元素展示的形式,比如是标题还是链接或者图片,并不是描述当前元素的样式,即什么颜色、长宽、字体样式等,这些就是后面要学的css

test.html的文件是什么格式的文件?

可以简单的理解为html文件是一种网页文件,比如txt就是文本文件,png就是图片文件

 

 

HTML 标签

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

 

2.html完整结构

<!DOCTYPE html>
<html>
<head>
<meta>
<title></title>
</head>
<body>
 
</body>
</html>

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>


<!DOCTYPE HTML>


<!doctype html>


<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
 
</body>
</html>


公众号 java一号 更多java实战项目资料、技术干活。更重要的是小猿愿成为你编程路上的一个朋友!

文章首发地址: www.javayihao.top

首发公众号: java一号


相关文章
|
前端开发 JavaScript
HTML简介及基础标签
HTML简介及基础标签
224 0
|
XML 前端开发 JavaScript
HTML&CSS Day02 CSS简介与选择器
HTML&CSS Day02 CSS简介与选择器
559 0
|
前端开发 JavaScript 开发工具
HTML简介
HTML简介
185 3
HTML简介
|
前端开发
超文本标记语言(HTML)简介
超文本标记语言(HTML)简介
510 3
|
开发者
HTML 实体字符简介
HTML 实体字符简介
364 2
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
555 1
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
279 1
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
246 1
|
移动开发 Unix 定位技术
HTML 简介
HTML 简介
331 2
|
移动开发 HTML5
HTML 简介
HTML 简介。
115 3