HTML5入门学习的一些小总结

最新推荐文章于 2024-09-10 13:54:44 发布

从bug中生存下来的IT小白

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量197

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/weixin_46091073/article/details/107832430

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5基础知识

HTML5简介
HTML5的基本格式
HTML5的注释
插入图片
插入链接
排序
````标签的使用

HTML5简介

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。

HTML5的基本格式

<!DOCTYPE html>
<html>
	<head>
		<title>
			网页名称
		</title>
	</head>
	<body>
		<h1>标题</h1>
		<p>段落</p>
	</body>
</html>

在这里插入图片描述

HTML是不区分大小写的，其主要由两部分构成：<head></head>主要包含<title></title>，此部分的内容是网站名；<body></body>是显示在网页中的内容，其中<h1></h1> <h2></h2><h3></h3> <h4></h4> <h5></h5> <h6></h6>表示文章的标题，html中只有六级标题，<p></p>表示段落，正文部分。

HTML5的注释

每一种语言都有注释，注释的作用是解释代码，是给开发者看的，不会被编译。C、C++、Java等编程语言的单行注释使用//，多行注释用/* */，多行注释也可用于注释单行

//单行注释

/*
*多行注释
*/

HTML5也有注释，但它的注释只有一种形式，开始于它既可以注释单行也可以注释多行。

<!--   注释单行  -->

<!--
注
释
多
行
-->

插入图片

需要获取图片的URL
测试图片
添加图片需要使用<img >标签，此标签与其他标签不同之处在于它不是一对，没有对应的</ >，在其内部使用src属性获取图片的URL

<!DOCTYPE html>
<html>
	<head>
		<title>
			我的作品
		</title>
	</head>
	<body>
		<h1>插入图片</h1>
		<p>图片如下</p>
		<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596682902&di=5d6ba88bf68501dd3d68726afe8cc7b3&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="插入的图片">
	</body>
</html>

为了有更多主要内容，只截取了部分内容

插入链接

HTML5中插入链接使用<a> </a>标签，标签中间的部分是在页面显示的内容，属性href是跳转到的网址

<!DOCTYPE html>
<html>
	<head>
		<title>
			我的作品
		</title>
	</head>
	<body>
		<h1>插入链接</h1>
		<p>百度链接</p>
		<a href="https://www.baidu.com">百度</a>
	</body>
</html>

在这里插入图片描述
链接指向的百度，点击紫色字体可跳转到百度搜索网页。

排序

HTML5支持两种排序，一种是无序排序，另一种是有序的

<!DOCTYPE html>
<html>
	<head>
		<title>
			我的作品
		</title>
	</head>
	<body>
		<h1>排序</h1>
		<h2>无序</h2>
		<ul>
			<li>这是</li>
			<li>一个</li>
			<li>无序</li>
			<li>排序</li>
		</ul>
		<hr/>
		<h2>有序</h2>
		<ol>
			<li>这是</li>
			<li>一个</li>
			<li>有序</li>
			<li>排序</li>
		</ol>
	</body>
</html>

在这里插入图片描述
无序使用<ul></ul>标签，有序使用<ol></ol>标签，每一项都是使用<li></li>标签，无序中每一项使用点标注，有序则使用数字标注。
本部分还使用到一个标签<hr/>这是一个表示横线的，当然这也是一个“单身狗”哟，它不是成对出现的。

`<input type=" " />`标签的使用

此标签可以广泛的认为是一个输入框，根据其属性type值的不同可以表示不同的元素，可以是单行输入框、按钮、单选框、复选框、本地文件选择、密码、提交按钮等。详细描述如下：

<!DOCTYPE html>
<html>
	<head>
		<title>
			我的作品
		</title>
	</head>
	<body>
		<table border="5">
			<tr>
				<th>属性值</th>
				<th>描述</th>
			</tr>
			<tr>
				<td>button</td>
				<td>可点击按钮</td>	
			</tr>
			<tr>
				<td>checkbox</td>
				<td>复选框</td>
			</tr>
			<tr>
				<td>file</td>
				<td>输入字段和”浏览“按钮，供文件上传</td>
			</tr>
			<tr>
				<td>hidden</td>
				<td>隐藏的输入字段</td>
			</tr>
			<tr>
				<td>image</td>
				<td>图像形式的提交代码</td>
			</tr>
			<tr>
				<td>password</td>
				<td>密码字段，该字段的字符被掩码</td>
			</tr>
			<tr>
				<td>radio</td>
				<td>单选按钮</td>
			</tr>
			<tr>
				<td>reset</td>
				<td>重置按钮，清楚表单中的所有数据</td>
			</tr>
			<tr>
				<td>submit</td>
				<td>提交按钮，把表单中的数据发送到服务器</td>
			</tr>
			<tr>
				<td>text</td>
				<td>单行的输入字段，可输入文本，默认宽度为20个字符</td>
			</tr>
		</table>
	</body>
</html>

这部分使用到表格，表格使用<table></table>标签，每一行使用<tr></tr>标签，其中每一个元素使用<td></td>标签，其中表头的每一个元素需要使用<th></th>标签。其效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<title>
			我的作品
		</title>
	</head>
	<body>
		<p>单行输入框</p>
		<input type="text" placeholder="请输入内容"/>
		<p>提交按钮</p>
		<input type="submit" value="Submit"/>
		<p>按钮</p>
		<input type="button" value="登录"/>
		<p>密码输入框</p>
		<input type="password" placeholder="请输入密码"/>
		<p>本地文件选择</p>
		<input type="file" placeholder="选择文件"/>
		<p>单选框</p>
		<form>
		<label>
			<input type="radio" name="sex"/>男</label>
		<label>
			<input type="radio" name="sex"/>女</label>
			</form>
		<p>多选框</p>
		<label>
			<input type="checkbox" name="letter"/>a</label>
		<label>
			<input type="checkbox" name="letter"/>b</label>
		<label>
			<input type="checkbox" name="letter"/>c</label>
	</body>
</html>