HTML基础学习-CSDN博客

本文链接：https://blog.csdn.net/qq_48968230/article/details/123646434

1、工具介绍

Hbuilder

Dreamweaver

2、HTML概念及发展历史

1）什么是html?

html 全称 Hyper text markup language 一种超文本标记语言，由标签组成。

“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。

2）html发展历史

超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；

HTML2.0-1995年11月作为RFC 1866发布

HTML3.2-1997年1月14日，W3C（万维网联盟）推荐标准

HTML4.0-1997年12月18日，W3C推荐标准

HTML4.01（微小改进）-1999年12月24日，W3C推荐标准

HTML5-2014年10月29日，W3C宣布，标准规范终于制定而成

3、HTML语法

1）标签：html语言的组成部分，通过标签呈现网页效果

2）标签组成：<标签名>

3）分类：

双标签（闭合标签）:<标签名>< /标签名>

单标签（自闭和标签）:<标签名/ >

4）具体如下：

html基本结构标签

段落与文字标签

列表标签

表格标签

图像标签

超链接标签

表单标签

多媒体标签

实操：

1、一个简单的html文件

备注：所用软件为Hbuilder

2、新建项目：项目名称自定

备注：所用路径比较冗长，所以打了码

3、实操

<!DOCTYPE html> <!-- 定义文档类型：html=html5 -->
<html>  <!-- 根标签：说明用的是html语言 -->
	<head>  <!-- 头部 -->
		<meta charset="utf-8">  <!-- 编码格式 -->
		<title></title>   <!-- 网页名称 -->
	</head>
	<body>    <!-- 网页主体 -->
	</body>
</html>

<!-- 注释与反注释的快捷键：英文状态下  ctrl+? -->
<!-- 界面放大或缩小  ctrl+鼠标滚轮 -->


<!-- 1、标题标签  h1-h6标签  字号逐级变小，字体加粗 -->
<h1>今日新闻</h1>
<h2>今日新闻</h2>
<!--   …… -->

<!-- 2、段落文字 p标签     行内标签  span标签--> 
<!-- 备注：利用span标签可以对之间的"哈哈哈"单独设置样式--> 
<p>哈哈哈哈哈哈 <span>哈哈哈</span> 哈哈哈哈哈哈哈</p>

<!-- 3、图片  img标签  src="图片路径" --> 
<img src="img/image.png"  width="200px"/>

<!-- 4、换行  <br> -->
<br>

<!-- 5、超链接 a标签  href="链接的地址" -->
<a href="http://www.baidu.com">百度</a>

 <!-- 6、div标签  打组标签，可看作一个盒子 -->
 <!-- align属性规定div元素中内容的水平对齐方式：left/center/right -->

视频、音频标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音视频</title>
	</head>
	<body>
		<!-- 1、音频：audio -->
		<!-- control="controls" 音频播放控件 -->
		<!-- autoplay="autoplay"--自动播放 （注意版本原因：IE浏览器可用，谷歌、火狐等不可识别-->
		<!-- loop="loop"--循环播放 -->
		<!-- muted="muted"--默认静音 -->
		<audio src="img/汐音社%20-%20无疾而终的暗恋.mp3" controls="controls" autoplay="autoplay" loop="loop" muted="muted">	
		</audio>
		
		
		<!-- 2、视频 -->
		<video src="img/邓紫棋.mkv" controls="controls" loop="loop" muted="muted">	
		</video>
	</body>
</html>

标签补充学习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签补充</title>
		<link rel="stylesheet" type="text/css" href="css/test6.css"/>
	</head>
	<body>
		<!-- 1、倾斜标签 -->
		<i>我是i标签，用来倾斜文字的</i>
		
		<p>我不是倾斜标签</p>
		
		<!-- 2、加粗 -->
		<b>我是b标签，加粗文字</b>
		<br><!-- 换行 -->
		<strong>我是strong标签，我也可以加粗效果，具有强调作用</strong>
		
		<!-- 3、css边框的学习 -->
		<div class="box">		
		</div>
	
	</body>
</html>

test6.css

.box{
	width:300px;
	height:300px;
	/* background-color: #333; */
	/* 上top  右right 下bottom 左left (顺时针)*/
	 /* 边框：像素  加粗  颜色*/
	/* border: 5px solid blue; */
	/* 圆角：像素/百分比 */
	/* border-radius:100px;  */
	border-radius:50%;
	border-top: 3px solid red;
	border-right: 3px solid green;
	border-bottom: 3px solid blue;
	border-left: 3px solid yellow;
}

4、小练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
	</head>
	<body>
		<div align="center">
			<h2>鹅</h2>
			<a href="https://baike.so.com/doc/5390974-5627660.html">
				【唐】 骆宾王
			</a>
			<p>鹅，鹅，鹅，曲项向天歌。</p>
			<p>白毛浮绿水，红掌拨清波。</p>
			<img src="img/鹅.jpg" width="200px" />		
		</div>
	</body>
</html>