HTML基础学习_html j基础代码-CSDN博客

本文链接：https://blog.csdn.net/qq_33854181/article/details/104863988

什么是HTML

全称：Hyper Text Markup Language（超文本标记语言），是网页的标准语言，现在HTML已经到了HTML5了，它遵循W3C的标准。

HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
- …
跨平台

什么是W3C

W3C
- World Wide Web Consortium （万维网联盟）
- 成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
W3C标准包括
- 结构化标记语言（HTML、XML）
- 表现型标准语言（CSS）
- 行为标准（DOM、ECMAScript）

常用工具

记事本
Dreamweaver
WebStorm
HBuilder、HBuilderX
…

HTML的基本结构

html标签有两种：一种是开放标签（如：<body> </body>），一种是闭合标签（如：<br/>）

<!-- DOCTYPE: 告诉浏览器，我们要使用的规范。这里使用的是HTML5的规范 -->
<!DOCTYPE html>
<!-- html标签，所有信息都要写在html标签中。除了DOCTYPE声明 -->
<html>
	<!-- head标签：网页头部 -->
	<head>
		<!-- meta标签：用来描述我们网站的一些信息，一般用来做SEO -->
		<!-- 网页编码 -->
		<meta charset="utf-8" />
		<!-- 网页关键字 -->
		<meta name="keywords" content="HTML学习笔记">
		<!-- 网页描述 -->
		<meta name="description" content="来这里学习/复习HTML"/>
		<!-- title标签：网页的标题 -->
		<title>头部文字信息</title>
	</head>
	<!-- body标签：网页的主体 -->
	<body>
		Hello, here is body.
	</body>
</html>

基本的标签

标题标签h1 ~ h6
段落标签 p
换行标签br
水平线标签hr
字体样式标签strong, em, ...
注释
特殊符号$nbsp, ...
链接标签img
…

<!-- DOCTYPE: 告诉浏览器，我们要使用的规范。这里使用的是HTML5的规范 -->
<!DOCTYPE html>
<!-- html标签，所有信息都要写在html标签中。除了DOCTYPE声明 -->
<html>
	<!-- head标签：网页头部 -->
	<head>
		<!-- meta标签：用来描述我们网站的一些信息，一般用来做SEO -->
		<!-- 网页编码 -->
		<meta charset="utf-8" />
		<!-- 网页关键字 -->
		<meta name="keywords" content="HTML学习笔记">
		<!-- 网页描述 -->
		<meta name="description" content="来这里学习/复习HTML"/>
		<!-- title标签：网页的标题 -->
		<title>头部文字信息</title>
	</head>
	<!-- body标签：网页的主体 -->
	<body>
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>这是标题标签</p>
		
		
		<hr/><!-- 这个水平线标签 -->
		你好
		HTML
		<br/><!-- 这是换行标签 -->
		
		<strong>粗体标签</strong>
		<em>斜体标签</em>
		
		<!-- 特殊符号如下 -->
		&gt;<!-- > -->
		&lt;<!-- < -->
		&nbsp;<!-- 空格 -->
		...
		<br/>
		
		<!-- 文本超链接
		 href: 链接路径
		 target: 链接在哪个窗口打开，常用值：_self、_blank
		 -->
		<a href="https://www.baidu.com" target="_self">baidu</a>
		
		<!-- 功能性链接
		 如：邮件链接，使用mailto：开头
		 -->
		 <a href="matlto:xxx@qq.com">点击进入邮件</a>
		 
		 <!-- 图像标签
		 src：图像地址
		 alt：图像的代替文字，在图像没加载出来时显示
		 title：鼠标悬停提示文字
		 -->
		 <img src="path" alt="text" title="title" width="100" height="100" />
	</body>
</html>