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>
效果图如下:
本地文件选择区域点击会弹出一个本地文件目录。
感谢各位耐心的看完,需要练习可下载Notepad++,以下是网盘资源:
链接:https://pan.baidu.com/s/1as-kLWP9iuV6GLA9uf8WRA
提取码:pncf
当然懒得人也可以使用在线工具练习:
HTML5练习
感谢关注哟,后续还有字体及布局的相关知识哟
小编刚刚入门,可能会有一些错误,欢迎大佬们大方地指出错误!!!