HTML新手学习--1

最新推荐文章于 2024-09-21 20:10:00 发布

dingxiaozhuang

最新推荐文章于 2024-09-21 20:10:00 发布

阅读量109

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Judith__/article/details/107853463

版权

1.什么是HTML?
HTML指的是超文本标记语言，它不是编程语言，而是标记语言，标记语言简单来说就是一些标签，用这些标签来描述网页。
2.HTML标签
HTML标签，比如;在使用过程中HTML标签通常是成对出现的，

，前一个是开始标签，后一个是结束标签。
3.HTML文档=网页
HTML文档描述网页，HTML文档也被称为网页。
文档中的标签并不会被展示，这些标签存在只是为了展示HTML内容。
4.编写工具
记事本，HBuilderX，Eclipse…

<!--声明网页的版本-->
<!DOCTYPE html>
<!-- HTML:超文本标记语言，可以将HTML理解为标签固定的xml,为一个根元素 -->
<html>
<!-- 此网页写网页的基本声明 -->
<head>
<!-- 声明网页的编码 -->
<meta charset="UTF-8">
<!-- 声明网页的标题 -->
<title>第一个网页</title>
</head>
<!-- 网页内容 -->
<body>
<!--1、标题标签-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3>标签3</h3>
<!-- 2、段落 -->
<p>李狗蛋今天考试考了第一名。</p>
<p>张翠花在期末考试中获得三好学生。</p>
<a name="qing">锚点</a>
<!-- 3、列表 -->
<!-- 有序列表<ol></ol>嵌套元素标签元素<li></li>-->
<ol> 
	<li>陕西省</li>
	<li>四川省</li>
	<li>云南省</li>
 </ol>
<!-- 无序列表<ul><ul> 嵌套元素标签<li></li>-->
<ul>
	<li>香港</li> 
	<li>澳门</li>
	<li>台湾</li>
</ul>
<!--3、嵌套列表-->
<ol>
	<li>陕西省
		<ul>
		<li>西安市</li>
		<li>渭南市</li>
		<li>汉中市</li>
		<ul>
	</li>
	<li>四川省
		<ul>
		<li>成都</li>
		<li>德阳</li>
		<li>广元</li>
		<li>都江堰</li>
		</ul>
	</li>
	</li>云南省
		<ul>
		<li>昆明市</li>
		</ul>
	</li>
</ol>
<!--4、块元素-->
<div>
	<p>陕西省</p>
</div>
<div>
	<p>西安市</p>
</div>
<!--5、行内元素-->
原想待到<p>春日融融就去旅行 <i>去听潺潺细水破冰的笑声</i> <b>去看山丘藏起雪白的衣角</b> <u>现在却只想看你眼里的春秋</u><span style="color:red"> 风花雪月皆可辜负 唯你不可 你赛过世间一切的美 </span></p>
<!--6、空格-->
<p>七月的风懒懒的&nbsp;&nbsp;连云都变热热的&nbsp;&nbsp;不久后天闷闷的&nbsp;&nbsp;一阵云后雨下过气温&nbsp;&nbsp; 爬升到无法再忍受</p>
<!--7、图片-->
<!--7.1绝对路径：从盘符开始写出图片存放的完好路径如：D:\java\Web_basic\src\main\webapp\day01\002.jpg,这种方式将路径写死了，一旦软件上线时，用户需要更换路径甚至操作系统，那么就会出错-->
<!--7.2相对路径：写出图片和网页的相对位置，在软件上线时，是将整个项目拷贝给用户，他们的相对路径不变-->
<!--图片有三个级别：在网页下级，和网页平级，在图片上级-->
<!--8、超链接-->
<a href="http://www.baidu.com">百度</a>
<!--8.1超链接-->
<a href="#qing">锚点</a>
<!--8.2网页的顶部就是锚点，没有名字-->
<a href="#">回到顶部</a>
<!--9、表格cellspacing:边框距离;border:边框像素-->
<table border="1" cellspacing="0"width="300">
	<!--tr:行-->
	<tr>
	<!--td:列 rowspan合并行-->
	<td rowspan="2">第一行第一列</td>
	<td>第一行第二列</td>
	</tr>
	<tr>
	<td>第二行第二列</td>
	</tr>
</table>

<table border="1" cellspacing="0"width="300">
	<!--合并列-->
	<tr>
	<td colspan="2">第二行第一列</td>
	<td>第一行第二列</td>
	</tr>
	<tr>
	<td>第二行第一列</td>
	<td>第二行第二列</td>
	</tr>
</table>