01 HTML快速入门

最新推荐文章于 2024-07-17 09:43:10 发布

YY大数据

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量101

点赞数

分类专栏： HTML快速入门文章标签： html

本文链接：https://blog.csdn.net/weixin_40737011/article/details/106599615

版权

HTML快速入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

01 HTML快速入门

HTML的介绍

1. HTML的概念和发展
什么是HTML？
① HTML是超文本标记语言（Hyper Text Markup Language）
② HTML不是编程语言，而是一种标记语言（Markup Language）
③ 标记语言是一套标记标签（markup tag）
④ HTML使用标记标签来描述网页
2. HTML的发展历程
① HTML（第一版）：1993年IETF团队的一个草案，并不是成型的标准。
② HTML（2.0）：1995年11月作为RFC 1866年发布。
③ HTML（3.2）：1996年1月14日由W3C组织发布，是HTML文档第一个被广泛使用的标准。
④ HTML（4.0）：1997年12月18日由W3C组织发布，也是W3C推荐标准。
⑤ HTML（4.01）：1999年12月24日由W3C组织发布，是HTML文档另一个重要被广泛使用的标准。
3. HTML 5.0简介
① HTML草案的前身名为Web Application 1.0，于2004年被WHATWG提出。
② HTML 5草案于2007年被W3C接纳，并成立了新的HTML工作团队。
③ HTML 5 的第一份正式草案已于2008年1月22日公布。HTML 5仍处于完善之中。然而，大部分现代浏览器已具备了某些HTML 5支持。
④ 2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML 5规范已经正式定稿。
⑤ 2013年5月6日，HTML 5.1正式草案公布。
总结：从XHTML 4.01、XHTML到HTML 5，并不是一种革命性的升级，而是一种规范向习惯的妥协。

HTML的结构

HTML基本结构
html文档基本结构

<!DOCTYPE html>		//文档引用规范，HTML5因为是妥协式的规范，所以不需要引用严格意义上的DTD规范
<html>				//html文档的根元素标签，成对出现<html></html>
	<head>			//html文档的头部标签，成对出现<head></head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
		<title>我的第一个网页</title>
	</head>
	<body>			//html主题部分标签，成对出现<body></body>
		<p>海同网校</p>
	</body>
</html>

head标签内的常用元素
head标签内包含的主要元素

<title>		该元素用于定义文档标题
<script>	该元素用于JavaScript脚本
<link>		该元素用于链接外部CSS资源文件
<style>		该元素用于定义内部CSS样式
<meta>		该元素用于HTML页面的元数据

使用title标签

<head>
	<title>海同——中国知名的培训机构</title>
</head>

使用meta标签
用于定义页面元信息，也就是一些键值对，主要有以下三个属性。
http-equiv 指定元信息名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。
name 指定元信息名称，该名称值可以随意指定。
content 指定元信息的值
例如：描述文档类型和字符编码

<head>
	<meta http-equiv="Content-Type" context="text/html; charset=gbk"/>
</head>
//http-equiv元信息名称；context元信息的值；
//设置该页面的类型和所用字符编码，告诉这个文档以gbk的方式解析这个文档

<head>
	<title>海同科技信息技术有限公司</title>
	<meta name="author" content="chenhao"/>
	<meta name="keyword" content="Java论坛，Android论坛，LSD论坛">
	<meta name="description" content="~~~~~~">
	//keyword description主要提高网站的搜索排名
	//keyword 关键词，一般不要超过5个
	//description描述，根据你的title主题展开描述，一般不要超过100个字
</head>

HTML的常用的块级标签

常用的块级标签（block）
块级标签
显示为“块”状，浏览器会在其前后显示折行。常用的块级元素包括：p、h1~h6、div、ul等。
标题标签语法
<h1>标题</h1>

... ...
<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>
... ...

注意：要将标题标签用于标题，不要为了使用大号的字体或文本使用标题，因为用户可以通过标题快速浏览您的网页
段落标签语法
<p>......<p>

... ...
<body>
	<h1>上海欢迎你</h1>
	<p>实现梦想的地方</p>
	<p>有梦想就有奇迹！</p>
</body>
... ...

水平线标签语法
<hr/>
用于分隔内容，分隔符
有序列表标签的语法

<ol>
	<li>列表项1</li>
</ol>

示例：

... ...
<body>
<h3>注册步骤：</h3>
<ol>
	<li>填写信息</li>
	<li>收电子邮件</li>
	<li>注册成功</li>
</ol>
</body>
... ...

效果显示
注册步骤
无序列表标签语法

<ul>
	<li>列表项1</li>
</ul>

示例：

<body>
<h3>新人上路指南</h3>
<ul>
	<li>如何激活会员名？</li>
	<li>如何注册会员？</li>
	<li>注册时密码设置要求</li>
</ul>
</body>

效果显示
新人上路指南
注意：有序列表默认为数字，无序列表默认为原点
描述标签语法

<dl>
	<dt>标题</dt>
	<dd>描述1</dd>
</dl>

示例：

<body>
<dl>
	<dt>海同科技有限公司</dt>
	<dd>一家猎头公司</dd>
	<dd>一家软件培训公司</dd>
	<dd>一家互联网公司</dd>
</dl>
</body>

效果显示
在这里插入图片描述
分区标签语法

<div>头部内容</div>
<div>导航内容</div>
<div>底部内容</div>

分区标签语法
上图分了三个模块：头模块、中间模块、脚注模块。

头模块：标题模块、导航模块（首页，员工信息，产品信息）
中间模块：内容板块（文章）、右侧栏板块（广告）
脚注：公司信息及联系方式
div标签一般当做结构化块状元素使用，一般最常见的用途是对网页进行整体分块布局，即当容器来使用。

YY大数据

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01 HTML快速入门

01 HTML快速入门HTML的介绍1. HTML的概念和发展什么是HTML？① HTML是超文本标记语言（Hyper Text Markup Language）② HTML不是编程语言，而是一种标记语言（Markup Language）③ 标记语言是一套标记标签（markup tag）④ HTML使用标记标签来描述网页2. HTML的发展历程① HTML（第一版）：1993年IETF团队的一个草案，并不是成型的标准。② HTML（2.0）：1995年11月作为RFC 1866年发布。
复制链接

扫一扫