初识HTML

最新推荐文章于 2020-07-10 17:57:18 发布

Ostrich hunter

最新推荐文章于 2020-07-10 17:57:18 发布

阅读量141

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_44161261/article/details/105979522

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML(超文本标记语言)

1.HTML发展历史(版本变迁)

HTML1.0 Tim Berners-Lee 推出
HTML2.0 IETF组织
HTML3.0 W3C正式接手HTML标准的维护
HTML4.01 里程碑式的版本 1999年
2010年 W3C发布 HTML5正式标准

2.使用说明----简单来说就是应该注意的问题

编码问题：

建议使用UTF-8，将软件设置默认编码为UTF-8，charset中的编码和文件的编码一致

书写规范：

标签必须成对出现
标签之间的父子关系通过缩进体现出来

输入法问题：

程序中使用符号都是英文符号，不允许出现中文符号

大小写问题：

HTML不区分大小写

HTML标签是页面的根标签，
head标签表示的页面不可见部分（页面的属性：编码、书否刷新、作者、关键字），
body内容可见部分。

3.常用标签

注释(不会显示的内容)

<!--HTML注释-->
<!doctype html>
<html>
    <head>
	<title></title>
    </head>
    <body>
		
    </body>
</html>

标题标签(hn)

<!doctype html>
<html>
    <head>
	    <meta charset="UTF-8" />
	    <title>标题标签</title>
    </head>
    <body>
        <h1>一级标题</h1>
	    <h2>二级标题</h2>
	    <h3>三级标题</h3>
	    <h4>四级标题</h4>
	    <h5>五级标题</h5>
	    <h6>六级标题</h6>		
    </body>
</html>

效果：

段落标签(p)

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
	<title>段落标签</title>
    </head>
    <body>
        <p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>	
        <p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便</p>	
    </body>
</html>

效果：

换行标签(br)

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>换行标签</title>
    </head>
    <body>
        颤抖的叶是我等待的热情<br>
        而你终于无视地走过<br>
        在你身后落了一地的<br>
        朋友啊那不是花瓣<br>
        是我凋零的心<br>
    </body>
</html>

效果：

文本修饰标签

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>文本修饰标签</title>
    </head>
    <body>
        <b>加粗效果</b><br>
        <strong>加粗效果</strong><br>
        <i>加斜</i><br>
        <em>加斜</em><br>
        <u>下划线</u><br>
        <del>删除</del>
    </body>
</html>

效果：

标准块标签(div)--主要用来布局

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>标准块标签</title>
	</head>
	<body>
            <div>标准的块标签</div>
	    <div>标准的块标签</div>
	    <div></div>
	    <div>标准的块标签</div>
    </body>
</html>

效果：

标准行内标签--主要用来修饰文本

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>标准行内标签</title>
    </head>
    <body>
        <span style="color: red;font-size: 30px;">专家工作组成员</span>
    </body>
</html>

效果：

分割线标签(hr)

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>分割标签</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <hr>
	<h2>二级标题</h2>
    </body>
</html>

效果：

原样输出标签(pre)

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>原样输出标签</title>
    </head>
    <body>
        <pre>
        床前明月光，
        疑是地上霜。
        举头望明月，
        低头思故乡。
        </pre>
    </body>
</html>

效果：

上标(sup),下标(sub)

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8" />
	<title>上标下标</title>
    </head>
    <body>
        <!-- 上标显示 -->
	a<sup>10</sup><br>
	<!-- 下标显示 -->
	a<sub>1</sub>	
    </body>
</html>

效果:

表格标签

table标签用于定义一个表格
tr标签用于定义一行
td标签用于定义一列(td也叫做单元格，必须放在tr中)
thead元素定义头
tbody元素定义主干
tfoot元素定义尾
rowspan--合并行
colspan--合并列

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表格标签</title>
</head>
<body>
	<h1>用户信息</h1>
	<table border="1" width="1000" align="left" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				 
				<td>用户名称</td>
                <td>用户年龄</td>
                <td>用户性别</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
                <td>16</td>
                <td rowspan="3">男</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>18</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>20</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4">总计：3人 。。。</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

效果：

图片标签

显示图片--src属性：resouces 源

相对路径查找图片（推荐使用）--<img src="img/shi.jpg" >
绝对路径（不建议使用）--<img src="D:\Openlab\JAVAweb\CODE\day02code\day02\img\shi.jpg" >
网络路径

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片的显示</title>
</head>
<body>
    <!-- 
		alt属性表示，若图片不能正常显示，一个文字提示功能
		注意：如果alt没有写，但是有title时，alt的值默认就是title
		图片标签注意：设置大小的时候，不建议宽和高都设置
	 -->
	<img style="width: 500px;height: 300px;" src="img/shi.jpg" title="这个是图片" alt="这个是图片">
</body>
</html>

效果

视频和音频标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视频和音频标签</title>
</head>
<body>
	<h3>视频标签</h3>
	<!-- 在h5的标准下，如果属性的键和值一致，那么就是不写值
		controls <==> controls="controls"
		autoplay：自动播放
		muted：静音设置
     -->
    <video src="D:\上课视频\前端\01.HTML的发展历史.mp4" style="width: 500px;" controls autoplay muted></video>

	<!-- 视频有很多格式 -->
	<!-- <video>
		<source src="HTML的发展历史.mp4" >
		<source src="HTML的发展历史.ogg" >
		<source src="HTML的发展历史.avi" >
		<source src="HTML的发展历史.xxxx" >
	</video> -->

	<h3>音频标签</h3>
	
	<audio src="G:\myMusic\刀郎 - 西海情歌.mp3" controls autoplay></audio>
	
</body>
</html>

超链接标签（a）

a链接，行内标签

href属性：表示a标签跳转的地址

target属性：规定a标签的打开方式，默认值:_self，表示在选项卡中跳转将修改_blank，在一个新的选项卡中打开页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超链接标签</title>
</head>
<body>
	<a href="http://www.baidu.com" target="_self">百度一下，你就知道</a>
	<a href="http://www.sina.com.cn" target="_blank">新浪新浪</a>

	<!-- 也可以跳转到自己页面中 -->
	<a href="01.表格标签.html">本地页面</a>
</body>
</html>

列表标签（ol、ul、dl）

有序列表：ol
无序列表：ul
数据列表：dl

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表标签</title>
</head>
<body>
	<h3>有序列表</h3>
	<ol>
		<li>二哈</li>
		<li>二哈</li>
		<li>二哈</li>
	</ol>

	<h4>无序列表</h4>
	<ul>
		<li>二哈</li>
		<li>二哈</li>
		<li>二哈</li>
	</ul>

	<h4>数据列表</h4>
	<dl>
		<dt>狗界彦祖</dt>
		<dd>二哈</dd>
		<dd>二哈</dd>
		<dd>二哈</dd>

		<dt>人中彦祖</dt>
		<dd>雷子</dd>
		<dd>雷子</dd>
		<dd>雷子</dd>
	</dl>
</body>
</html>

表单标签（form）--用于服务器和用户进行数据交互的标签

form就是表单标签，其他的所有表单标签必须包裹在form中

Ostrich hunter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

HTML(超文本标记语言)1.HTML发展历史(版本变迁)HTML1.0 Tim Berners-Lee 推出了 90~91左右 HTML2.0 IETF组织 HTML3.0 W3C正式接手HTML标准的维护 HTML4.01 里程碑式的版本 1999年 2010年 W3C发布 HTML5正式标准2.使用说明----简单来说就是应该注意的问题编码问题：建议使用UTF-8...
复制链接

扫一扫