html入门基础知识及常用标签

最新推荐文章于 2024-06-01 23:46:19 发布

丿BAIKAL巛

最新推荐文章于 2024-06-01 23:46:19 发布

阅读量1.1k

点赞数 3

分类专栏： # JavaWeb 文章标签： html css 前端

本文链接：https://blog.csdn.net/Keep__Me/article/details/124901978

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、html简介

html被称为超文本标记语言（简单来说就是比文本更加高级的语言），俗称网页，由内容和标签组合在一起的只能使用浏览器来观看的一种语言。不只是能放文字数字等，还可以放图文声像。

html是一种不需要编译，直接在浏览器中运行的标记语言。

网站就是多个网页由超链接连在一起的一个完整的可以直接访问的页面集合。

浏览器：一种专门用来访问页面的软件工具。
主流的浏览器有：谷歌浏览器火狐浏览器

html的文件后缀名：.html .htm

<html>：网页的根节点
<head>：网页头信息
<body>：主体部分

<!-- 注释语句  html是网页的根据节点 -->
<html>
	<!-- 网页头信息 -->
	<head>
		<title>百度一下，你差不多就知道</title>
	</head>
	
	<!-- 主体部分 -->
	<body>
		你好，我是当前网页的主体内容！！！
	</body>
</html>

二、html标签

1.介绍：

标签： html中定义的一些特殊的标记，用来让页面中的内容如何显示，怎么显示，在哪里显示等等。

作用：

1，内容如何显示

2，内容在哪里显示

3，内容怎么显示

分类：

双标记： <开始标记属性=“值” 属性=“值” … > 内容 </结束标记>

单标记： < 标记名属性=“值” 属性=“值” …/>

（不同的标签属性不同）

2.使用规则：

标记的使用规则：

1,一定要使用以定义的标签，不可使用自定义的标签

2,标记一定要有开始和结束成对出现，不可缺少

3,标记忽略大小写

4,标记内可以使用固定属性

5,多个标签可以相互嵌套，不可以交叉

注意：
1.html中的所有的标记都是固定标记，且带有一定的呈现效果，学习时要谨记。
2.html自带容错机制，如果出错，则会自动跳过，继续展示。
3.html中的多个留白默认是一个留白。

3.常用标签：

①文本标签：

1）标题标签

< h align=“left/center/right”> 标题标记 < /h> h后面可以跟数字，n:1–6之间的数字，数字越小，字体越小，默认加粗且换行

align属性：设置对齐方式，缺省值为left

2）段落标签

< p align=“left/center/right”> 段落标签 < /p> 一段文字，与下一段有个间距

3）换行标签

< br/>

4）水平线标记

< hr color=“颜色” width=“长度” align=“left/center/right” size=“粗细”/>

长度和粗细的单位为px（像素）

5）字体标记

< font color=“颜色” size=“大小” face=“字体类型”>字体标记< /font>

6）居中标记

< center> 居中 < /center>

7）加粗标记

< b> 加粗 < /b> < strong> 加粗 < /strong>

8）斜体标记

< i> 斜体 < /i> < em> 斜体 < /em>

9）删除标记

< s> 删除< /s>

10）下标标记

< sub> 下标 < /sub>

11）上标标记

< sup>上标 < /sup>

小练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>《童话》歌词</title>
	</head>
	<body>
		<h1>童话</h1>
		<p><b>演唱：光良</b> 词曲：光良</p>
		<hr />
		<p>
		忘了有多久<br />
		再没听到你<br />
		对我说你最爱的故事我想了很久我开始慌了<br />
		是不是我又做错了什么<br />
		你哭着对我说<br />
		童话里都是骗人的<br />
		我不可能是你的王子<br />
		也许你不<br />
		</p>

	</body>
</html>

②图片标签

< img src=“图片路径” border=“边框” width=“图片宽度” height=“图片高度” alt=“图片没显示时提示语句” />

可以放置不同的图片格式

图片格式： jpg png gif …

图片路径：

相加路径 : 相对于当前的页面的路径

绝对路径 : 在具体的某个盘符中的路径

px : 像素类似常见的厘米，米，毫秒… 注意：在html中可以省略不写

③列表标签

列表就是在页面中可以有序的，或者无序的单有一定规则的一系列的数据。

有序列表：

<ol type="1/A/a/I/i" start="数字开始点">
    <li type="...." >列表值</li>
    <li>列表值</li>
    ......
</ol>

无序列表：

<ul type="disc/circle/square">
    <li type="...">列表值</li>
    <li>列表值</li>
    ......
</ul>

自定义列表：

<dl>
    <dt>二级列表值</dt>
    <dd>三级列表值</dd>
    ......
</dl>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>拜拜</h2>
		<!-- 无序列表 -->
		<h3>无序</h3>
		<ul type="disc">
			<li >对你说拜拜oh 我的男孩</li>
			<ol>
				<li>把偌大地图看穿</li>
				<li>找寻你的所在</li>
				<li>期待久违的对白</li>
			</ol>
			<li type="square">到底是掰还是暂时放开</li>
			<li >一年又一个礼拜</li>
			<li type="circle">把照片又往空盒里塞</li>
		</ul>
		<hr />
		<!-- 有序标签 -->
		<h3>有序</h3>
		<ol type="I">
			<li >对你说拜拜oh 我的男孩</li>
			<li >到底是掰还是暂时放开</li>
			<li >一年又一个礼拜</li>
			<li type="1">把照片又往空盒里塞</li>
		</ol>
	</body>
</html>

④音频和视频标签

音频和视频在html也提供了一套专门用来播放视频和音频的标签，但是该标签只是简单的视频播放器而已。

视频音频播放标签：

可以放视频和音频，mp3，mp4等格式

< video src=“视频或音频的路径” controls width=“宽度” height=“高度”> < /video>

< embed src=“视频或音频的路径”> < /embed>

注意：视频直接放进去之后是一张图片，音频直接放进去则什么也不显示，需要加上controls属性，加上控制器就可以了。还可以调整视频的宽度和高度。

音频播放标签

< audio src=“视频或音频的路径” controls>< /audio>

注意：该标签只能播放音频，把视频放进入之后会发现，会把视频当成音频播放，没有画面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>视频播放标签</h2>
		<video src="./image/05html-列表.mp4" controls width="400" height="300"></video>
		<video src="image/拜拜-浙音4811（一个大金意）.mp3" controls></video>
		
		<h2>音频播放标签</h2>
		<audio src="image/05html-列表.mp4" controls="controls"></audio>
		<audio src="image/拜拜-浙音4811（一个大金意）.mp3" controls="controls"></audio>
	</body>
</html>

⑤超链接

超链接是页面与页面之间搭建相互访问关系的重要标签。

< a href="目标资源 " target=“打开的方式” name=“锚点名称” > 链接源 < /a>

href属性 : 目标资源

1，网址资源 http://www.baidu.com

2，本地资源网页，图片，视频，音频，文件等等

3，锚点链接跳转到页面中的指定位置格式： #锚点名称

先在指定位置定义一个锚点，给出name，然后在需要跳转的位置给出锚点链接使用 href=#锚点名称即可跳转

4，邮箱链接发送邮件格式： mailto:…

target属性: 页面的打开方式

_blank 在新窗口中打开页面

_self 在原有的窗口中打开页面，默认的

_parent 在父窗口中打开资源

自定义在指定名称的窗口中打开资源

⑥表格标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqygXkx6-1653131270363)(D:\慧点学习资料\java课程资料\笔记\html.assets\image-20220515225248148.png)]$

表格用来在页面中展示信息较为整洁方便，也可以在整体的页面中进行整体布局。

table : 表格最大标签

属性：

border 边框尺寸

bordercolor 边框颜色

bgcolor 背景色

background 背景图片

width 表格宽度

height 表格高度

align 表格在body中的水平位置

frame 设置外边框

box border（四边框显示） lhs rhs（左、右侧边框显示） void（四边框不显示） blow above（底、顶部边框显示）

rules 设置内边框

none（内边框不显示） all（边框合并） rows（横向边框显示） cols（纵向边框显示）

cellspacing 设置内外边框留白

cellpadding 设置边框与内容之间的留白

caption: 表格的名称（表名）

tr:表格的行

属性：

height

bgcolor

background

align 表格中内容的位置

th:表格的列，表头使用默认内容加粗且居中，类似td

td:表格的列，普通的列

属性：

width

bgcolor

background

align left/right/center 水平位置

valign top/middle/bottom 垂直位置

rowspan 合并单元行

colspan 合并单元列

学生信息表案例：

注意：写的时候可以先写内容在调格式，这样会比较快，也比较清晰。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2 align="center">学生信息表</h2>
		<table border="1" width="500" height="100" align="center" >
			<!-- 表格的标题 -->
			<caption>学生信息表</caption>
			<!-- 行 -->
			<tr align="center">
				<!-- 列 -->
				<th rowspan="2">学号</th>
				<th colspan="3">个人信息</th>
				<th colspan="2">入学信息</th>
			</tr>
			
			<tr align="center">
				
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>班级</td>
				<td>入学年月</td>
				
			</tr>
			
			<tr align="center">
				<td>001</td>
				<td>小红</td>
				<td>女</td>
				<td>22</td>
				<td>20210400</td>
				<td>2020年5月</td>
				
			</tr>
			
			<tr align="center">
				<td>002</td>
				<td>小明</td>
				<td>男</td>
				<td>21</td>
				<td>20220101</td>
				<td>2021年6月</td>
				
			</tr>
			
		</table>
	</body>
</html>

个人简历案例：

在这里插入图片描述

<table border="1" align="center" width="600px">
			<caption>个人简历</caption>
			<tr>
				<td>姓名</td>
				<td width="90"></td>
				<td>性别</td>
				<td width="90"></td>
				<td>出生日期</td>
				<td width="90"></td>
				<td width="90" rowspan="4">照片</td>
			</tr>
			<tr>
				<td>民族</td>
				<td width="90"></td>
				<td>政治面貌</td>
				<td width="90"></td>
				<td>婚姻状况</td>
				<td width="90"></td>
				
			</tr>
			<tr>
				<td>现所在地</td>
				<td width="90"></td>
				<td>籍贯</td>
				<td width="90"></td>
				<td>学历</td>
				<td width="90"></td>
			</tr>
			<tr>
				<td>毕业学校</td>
				<td colspan="2"></td>
				<td>专业</td>
				<td colspan="2"></td>
			</tr>
			
			<tr>
				<td rowspan="5">学习经历</td>
				<td colspan="2">起止年月</td>
				<td colspan="2">就读学校</td>
				<td colspan="2">专业/课程</td>
			</tr>
			
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			
			<tr>
				<td rowspan="5">工作经历</td>
				<td colspan="2">起止年月</td>
				<td colspan="2">工作单位</td>
				<td colspan="2">职位</td>
			</tr>
			
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr height="20">
				<td colspan="2"></td>
				<td colspan="2"></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>

表格布局：

在一个完整的页面中会把整个页面分为若干个不同的区域，不同的区域来放置不同的内容，这种方式被称为网页布局。而如果使用表格来布局被称为表格布局。后期也会学习div，div+css别称为div布局，也是目前主流的布局方式。

使用注意：

1，先对页面进行表格合理分割

2，创建表格，现在展示其边框

3，一定要定义好其单元格的尺寸

4，表格的单元格内也可以存在表格

5，编写好这个页面，最后微调，取消表格边框即可

⑦滚动标签

文字从右往左滚动

< marquee direction=“left/right/top/down” height=“高度” widht=“宽度” scrollamout=“数字速度” behavior=“scroll/slide/alternate” loop=“-1/滚动次数”> 滚动的文字或图片等等 < /marquee>

direction=left/right，left设置文字往左滚动，right设置文字往右滚动

behavior="scroll/slide/alternate，scroll滚动，slide滚动一次就停，alternate来回滚动

loop=“-1/滚动次数” -1代表无限滚动

事件：

οnmοuseοver=“this.stop()” 鼠标放上去就停

οnmοuseοut=“this.start()” 鼠标离开就开始

相对路径说明：
…代表上一级路径，目前在03，…就回到项目上面了，…/02就能找到02文件夹了
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<marquee direction="right" scrollamount="20"  behavior="scroll"  loop="2">
			滚动的文字
		</marquee>
		
		<hr />
		<marquee direction="right" scrollamount="30" onmouseover="this.stop()" onmouseout="this.start()">
			<img src="../02/image/3.jpg"/>
		</marquee>
	</body>
</html>

进度条

< meter value=“” min=“” max=“”>< /meter>

< progress value=“”>< /progress>

<body>
    <meter value="20" min="0" max="100" ></meter> <br/>
    <progress value="20" max="100"></progress>
</body>

中文注释

< ruby>

文字< rt>注释的问题< /rt> < rp>如果浏览器不支持ruby时显示的文字< /rp>

< /ruby>

⑧折叠标签

< details>

< summary> 折叠的标题内容 < /summary>

…(被折叠的内容，可以放置任意标签和内容)

< /details>

		<details>
			<summary>三国演义</summary>
			<p>蜀国刘关张桃园三结义</p>
			<p>魏国曹操</p>
		</details>

⑨布局标签

< header> 布局的头部标签 < /header>

< article> 布局的侧边标签 < /article>

< section> 布局的中心标签 < /section>

< footer> 布局的底部标签 < /footer>

< div> 块标签，默认换行< /div>

< span> 行内标签，默认不换行 < /span>

三、表单

表单是以后用来专门收集数据的标签集合。俗称 form表单.

格式：

< from action=“提交的url路径” method=“get/post” name=“名称” enctype=“multipart/form-data”>

< input type=“text/radio/checkbox/password/tel/url/email/search/bottom/file/number/date/datetime_local/color/range/hidden/submit/reset/image” name=“名称” value=“值” placeholder=“提示语句” />

< select name=“名称” multiple>

< option> 列表项< /option>

< option selected value=“值”> 列表项< /option>

…

< /select>

< textarea name=“名称” cols=“” row=“”> 值 < /textarea>

< /form>

enctype="multipart/form-data"是用来上传的

name，提交数据都是通过name，name是键value是值，通过键值对的形式提交

type:

text：输入框

radio：单选按钮，名字要相同，这样两个单选框才是一组，checked，默认选中

number：数字输入框，只能输入数字

checkbox：多选按钮，名字相同的为一组

range：进度条

date：进行日期选择

file：文件上传

search：搜索框

select：下拉框列表，嵌套选项，multiple属性，显示选项

textarea ：多行输入框，通过设置行跟列的宽度来设置大小

submit：用来提交数据

reset：重置，清除表单中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form action="提交表单的url路径"  method="表单的提交方式(get/post)" name="表单的名称"
          enctype="multipart/form-data">
        姓名：<input type="text" name="name" value="李四" placeholder="请输入用户名"><br/>
        性别：<input type="radio" name="sex" value="男" checked>男
                <input type="radio" name="sex" value="女">女 <br/>
        密码：<input type="password" name="pwd" placeholder="请输入密码" ><br/>
        主页：<input type="url" placeholder="请输入网址"><br/>
        邮箱: <input type="email" placeholder="请输入邮箱"><br/>
        电话：<input type="tel" placeholder="请输入电话号"><br>
        按钮：<input type="button" value="点击触发"><br/>
        年龄 ：<input type="number"  ><br/>
        爱好: <input type="checkbox" name="hobby" value="蓝球">蓝球
                <input type="checkbox" name="hobby" value="足球" checked>足球
                <input type="checkbox" name="hobby" value="排球">排球<br/>
        颜色：<input type="color"><br/>
        进度条： <input type="range" value="20"><br/>
        出生日期： <input type="date" placeholder="请选择日期"><br/>
        时间： <input type="datetime-local"><br/><br>
        时间 : <input type="time" > <br/>
        文件上传： <input type="file"><br/>
        隐藏标签: <input  type="hidden"><br/>
        搜索： <input type="search"> <br/>
        省份：
              <select name="省份" multiple>
                  <option>河南省</option>
                  <option>河北省</option>
                  <option>广西省</option>
                  <option selected>湖北省</option>
              </select> <br/>
        备注：
            <textarea cols="20" rows="8"></textarea>  <br/> <br/>

        <input type="submit" value="注册">
        <input type="reset" value="重置">
        <br/>
        <input type="image" src="img/tj.png">


     </form>
</body>
</html>

案例1：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>用户自主服务申请表单</h2>
		<form action="#" method="get"> 
			手机号码：<input type="tel" placeholder="请填写真实手机号"/><br>
			企业姓名：<input type="text" placeholder="请填写真实企业"/><br>
			企业类型：<select name="企业类型">
						<option>民营企业</option>
						<option>国企</option>
						<option>私企</option>
					</select><br>
			行业类型：<select name="行业类型">
						<option>农林牧渔</option>
						<option>金融</option>
						<option>IT</option>
					</select><br>
			年营业额：<select name="年营业额">
						<option>10万-50万</option>
						<option>50万-100万</option>
						<option>100万-500万</option>
					</select><br>
			员工数量：<select name="员工数量">
						<option>0-10</option>
						<option>10-50</option>
						<option>50以上</option>
					</select><br>
			你的身份：<input type="checkbox" name="shenfen" value="个人"/>个人
			<input type="checkbox" name="shenfen" value="厂商" />厂商
			<input type="checkbox" name="shenfen" value="代理商" />代理商
			<input type="checkbox" name="shenfen" value="其他" />其他
			<br />
			
			<input type="submit" value="快速提交"  />
			<input type="reset" value="一键取消" />
		</form>
		
		
	</body>
</html>

案例2：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<form method="get" action="#">
    <table border="1" width="300">
        <caption>新用户信息注册</caption>
        <tr>
            <td>用户名</td>
            <td> <input type="text" placeholder="请输入账号"> </td>
        </tr>
        <tr>
            <td>密码</td>
            <td> <input type="password" placeholder="请输入密码"> </td>
        </tr>
        <tr>
            <td>Email</td>
            <td> <input type="email" placeholder="请输入邮箱"> </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td> <input type="text" placeholder="请输入姓名"> </td>
        </tr>
        <tr>
            <td>手机号</td>
            <td> <input type="text" placeholder="请输入手机号"> </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" checked> 男
                <input type="radio" name="sex" > 女
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td> <input type="date" > </td>
        </tr>
        <tr>
            <td>验证码</td>
            <td> <input type="text" placeholder="请输入验证码"> </td>
        </tr>
        <tr>

            <td colspan="2" align="center"> <input type="submit" value="注册"> </td>
        </tr>
    </table>
</form>
	</body>
</html>

四、iframe框架

框架： iframe其本质上就是在当前的页面中重新开辟一个空间，可以用来放置另一个页面。

iframe中可以用来放置页面，视频，音频，图片等等。

案例：

在这里插入图片描述

当点击下面超链接时，内容会显示到框里面

超链接的target和iframe的name对应即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <iframe name="if" width="1000" height="500"></iframe>
		    <br/>
		    <a href="https://www.bilibili.com" target="if">哔哩哔哩</a>
		    <a href="https://www.taobao.com" target="if">淘宝</a>
	</body>
</html>

案例2：

照片墙展示，下方图片滚动，点击后显示到上方的大框内

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table border="1" width="600" align="center">
        <tr height="350">
            <td>
                <iframe src="img/01.png" name="sh" scrolling="no" frameborder="0" width="600" height="350"></iframe>
            </td>
        </tr>

        <tr height="100">
            <td>
                <marquee onmouseover="this.stop()" onmouseout="this.start()">
                    <a href="img/01.png" target="sh"><img src="img/01.png" width="150" height="88"></a>
                    <a href="img/02.jpg" target="sh"><img src="img/02.jpg" width="150" height="88"></a>
                    <a href="img/03.jpg" target="sh"><img src="img/03.jpg" width="150" height="88"></a>
                    <a href="img/04.jpg" target="sh"><img src="img/04.jpg" width="150" height="88"></a>
                    <a href="img/05.jpg" target="sh"><img src="img/05.jpg" width="150" height="88"></a>
                    <a href="img/06.jpg" target="sh"><img src="img/06.jpg" width="150" height="88"></a>

                </marquee>
            </td>
        </tr>

    </table>


</body>
</html>

丿BAIKAL巛

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
html入门基础知识及常用标签

一、html简介html被称为超文本标记语言（简单来说就是比文本更加高级的语言），俗称网页，由内容和标签组合在一起的只能使用浏览器来观看的一种语言。不只是能放文字数字等，还可以放图文声像。html是一种不需要编译，直接在浏览器中运行的标记语言。网站就是多个网页由超链接连在一起的一个完整的可以直接访问的页面集合。浏览器：一种专门用来访问页面的软件工具。主流的浏览器有：谷歌浏览器火狐浏览器html的文件后缀名：.html .htm<html>：网页的根节点<head>：
复制链接

扫一扫