HTML5基础入门

最新推荐文章于 2023-10-12 18:12:22 发布

韩光明15138720702

最新推荐文章于 2023-10-12 18:12:22 发布

阅读量624

点赞数 1

分类专栏： HTML 文章标签： HTML

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML基础知识

定义：HTML(HyperText Markup Language)超文本标记语言。

对象：写给浏览器的语言，包括IE,Firefox,Chrome,Goole,Opera等主流浏览器。

HTML基本结构

文档类型声明<!DOCTYPE HTML>告诉浏览器该文档遵循HTML规范。
页面基础元素<html>页面开始</html>页面结束，其他内容包括在HTML标签内
页面头部元素<head></head>页面基本信息（页面标题title、meta元信息定义页面附加信息，编码、作者、版权、关键字等）<title>页面标题</title>、<mate/>自封闭元素，字符集。语法结构：<mate 属性="属性值"/> 、<style>...</style>内联样式
页面主题元素<body></body>页面主体内容，包含文档的所有内容（文本、超链接、图像、表格、列表、视频、音频等），所有在浏览器中展示的内容都写在<body></body>标签内。

常用标签

行内元素标签：

特点：

和其他行内元素都在同一行

高度和宽度设置无效，宽高就是内容撑开器的宽高

行内元素只能包含行内元素，不能包含块级元素

<a herf=""></a> 超链接标签 href的作用是指明超链接要链接到的网址。除了href属性，还有title属性表示链接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页)，_top（当前页）。

<span> </span>常用文本标签可以对特殊处理的文字部分添加样式。

style=" background: green;背景颜色color: blue;颜色
text-decoration: underline;添加下划线"

文本格式化标签：

<b></b>、<strong></strong>定义粗体

<i></i>、<em></em>定义斜体

<del></del>定义删除文本

<mark></mark>黄色背景高亮表示提醒/

a<sup>2<sup>上标

b<sub>3</sub>下标

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<!--文档标题-->
		<title></title>
	</head>

	<body>

		<!--<a 超级连标签
		href="test.html" 点击时跳转的路径
		target="_blank" 在新的窗口打开   默认在当前窗口打开
		title="aa"  鼠标悬浮时的提示文字
		>
		a标签   内容部分	
		</a>结束标签
		-->
		<a href="test.html" target="_blank" title="aa">a标签</a>
		<a href="https://www.baidu.com" target="_blank" title="aa0">百度一下</a>
		<!--<br />换行-->
		<br />
		<span>span标签1--正常显示没有任何样式</span>
		<!--<span 
		style="样式
		color: blueviolet;颜色
		text-decoration: underline;添加下划线
		"
		>
		span标签2
		</span>-->
		<span style="color: blueviolet;text-decoration: underline;">span标签2</span>
		<!--<span 
		style="
		background: lawngreen;背景颜色
		width: 300px;宽度
		height: 300px;高度
		">span标签3</span>-->
		<span style="background: lawngreen;width: 300px;height: 300px;">span标签3</span>
		<br />
		<b>b标签-加粗</b>
		<strong>strong标签-加粗</strong>
		<br />
		<i>i标签-斜体</i>
		<em>em标签</em>
		<br />
		<del>del标签-删除</del> 上标：m
		<sup>3</sup> 下标：A
		<sub>2</sub>
		<br />
		<mark>mark标签-黄色背景高亮</mark>
		<br />
		<span>span <b>span-b标签</b></span>
		<br />
		<b>b标签<span>b-span标签</span></b>
		<b><i>b-i</i></b>
		<br />
		<img src="img/1.JPEG" title="图片" style="width: 300px;" />
		<!--<img 图片标签
		src="img/11.JPEG"图片路径 
		title="图片2" 鼠标悬浮时的提示文字
		alt="图片2-2" 图片路径找不到时的提示文字
		style="width: 300px;"  图片是行内-块级--显示在一行可以设置宽高
		/>-->
		<img src="img/11.JPEG" title="图片2" alt="图片2-2" style="width: 300px;" />

	</body>

</html>

行内块级-可以设置宽高

width: 300px;宽度height: 300px;高度

<img/>图像标签

input输入框标签

type类型（文本text、密码password、单选框radio、复选框checkbox、数字number、邮箱email、文件file、提交submit、重置reset、按钮button）

下拉选框

<select><option></option></select>

多行文本标签

<textarea></textarea>

按钮标签

<button></button>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>input</title>
	</head>

	<body>
		<form action="index.html" method="get">
			<!--<form 表单
		action="index.html" 点击提交时跳转的路径
		method="get"提交的方式
		>-->
			账号：
			<input type="text" style="width: 200px;height: 30px;" placeholder="请输入账号" required="required" name="accunt" id="" value="" />
			<!--<input 输入框
			type="text" 文本输入框
			placeholder="请输入账号"没有内容时的提示语句 
			required="required" 要求必须填写 不能为空
			name="accunt" 名字
			id="" 
			value="" 输入的内容
			/>-->
			<br /> 密码：
			<input type="password" placeholder="请输入密码" name="mm" id="" value="" />
			<br />
			<b>单选框</b> 性别
			<label><input type="radio" name="sex" id="" value="" checked="checked"/>男</label>
			<!--<label>绑定按钮和文字都可以被选中
			<input
				 type="radio" 单选框
				 name="sex" 名字  单选框name值必须一致才能只有一个被选中
				 id="" 
				 value=""
				  checked="checked"默认被选中
				  />
				  男     提示文字
				  </label>-->
			<input type="radio" name="sex" id="woman" value="" /><label for="woman">女</label>
			<br />
			<b>复选框</b> 爱好：
			<label><input type="checkbox" name="hobby" id="" value="" />唱歌</label>
			<label><input type="checkbox" name="hobby" id="" value="" />看书</label>
			<label><input type="checkbox" name="hobby" id="" value="" />打球</label>
			<br />
			<b>下拉列表</b> 月份：
			<select>
				<option>一月</option>
				<option>二月</option>
				<option>三月</option>
			</select>
			<br />
			<input type="file" name="" id="" value="" />
			<br /> 数字：
			<input type="number" name="" id="" value="" />
			<br /> 邮箱：
			<input type="email" name="" id="" value="" />
			<br />
			<b>多行输入文本</b>
			<br />
			<textarea placeholder="请输入内容" name="" rows="5" cols="30"></textarea>
			<br />
			<textarea placeholder="请输入内容" name="" style="width: 200px;height: 100px;"></textarea>
			<br />
			<input type="submit" value="完成提交" />
			<input type="reset" name="" id="" value="清空" />
			<input type="button" name="" id="" value="普通按钮" />
			<button>按钮1</button>
			<!--<button>按钮1</button>具有提交功能-->
		</form>

	</body>

</html>

块级元素标签

特点：

总是从新的一行开始

高度和宽度都可以设置，宽度默认为100%

块级元素中可以包含块级元素和行内元素

块级容器<div></div> 可对它设置宽高等各种样式。

段落元素<p></p> 用于定义一段文字。

标题h1-h6 用于语义化显示标题部分，随着数字增大标题大小变小。

无序列表ul

有序列表ol

表格<table></table>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>块级元素</title>
	</head>

	<body>
		<!--一般作为一个容器存在-->
		<div style="background: lightblue;height: 100px;width: 100px;">我是div标签</div>
		<div style="background: lightgreen;width: 100px;">div2</div>
		<div style="background: lightcoral;">div2</div>
		<!--一般存放一段文字或一个段落-->
		<p style="background: lightblue;width: 200px;height: 100px;">我是p元素</p>
		<p style="background: lightcoral;">我是p元素</p>
		<!--一般用来存放标题-->
		<h1>我是h1标签</h1>
		<h1 style="background: lightblue;width: 300px;height: 100px;font-size: 14px;">我是h1标签</h1>
		<h2 style="background: lightgreen;">我是h2标签</h2>
		<h3>我是h3标签</h3>
		<h4>我是h4标签</h4>
		<h5>我是h5标签</h5>
		<h6>我是h6标签</h6>
		<div>
			<h1>我是标题</h1>
			<p>我是一段很长很长的文字</p>
			<p>我是一段很长很长的文字</p>
			<p>我是一段很长很长的文字</p>
			<p>我是一段很长很长的文字</p>
		</div>
		<!--无序列表-->
		<ul type="square" style="background: lightblue;">
			<li>
				我是ul-li-1
				<div>我是ul-li-div</div>
				<p>我是<span style="color: red;">ul-li-p</span></p>
			</li>
			<li style="background: lightcoral;">我是ul-li-2</li>
			<li>我是ul-li-3</li>
		</ul>
		<!--有序列表-->
		<ol type="i" style="background: lightcoral;">
			<li>我是ol-li-1</li>
			<li style="background: lawngreen;">我是ol-li-2</li>
			<li>我是ol-li-3</li>
		</ol>
		<!--表格-->
		<!--<table表格
			border="1px"边框的宽度
			 cellspacing="2px" 单元格与单元格/边框之间的距离
			 cellpadding="10px"单元格内文字与边框之间的距离
			 >-->
		<table border="1px" cellspacing="2px" cellpadding="10px">
			<!--
				tr是行
				th/td是每个单元格
			-->
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td>小王</td>
				<!--行合并-->
				<td rowspan="2">男</td>
				<td>22</td>
				<td>打球</td>
			</tr>
			<tr>
				<td>小张</td>
				<!--<td>男</td>-->
				<td>20</td>
				<td>打球</td>
			</tr>
			<tr>
				<td>小六</td>
				<td>女</td>
				<!--列合并-->
				<td colspan="2">22唱歌</td>
				<!--<td>唱歌</td>-->
			</tr>
		</table>
		<!--简洁版-->
		<table border="1px" cellspacing="2px" cellpadding="10px">
			<!--
				tr是行
				th/td是每个单元格
			-->
			<tr>
				<td style="text-align: center;"><b>姓名</b></td>
				<td>性别</td>
				<td>年龄</td>
				<td>爱好</td>
			</tr>
			<tr>
				<td>小王</td>
				<!--行合并-->
				<td rowspan="2">男</td>
				<td>22</td>
				<td>打球</td>
			</tr>
			<tr>
				<td>小张</td>
				<!--<td>男</td>-->
				<td>20</td>
				<td>打球</td>
			</tr>
			<tr>
				<td>小六</td>
				<td>女</td>
				<!--列合并-->
				<td colspan="2">22唱歌</td>
				<!--<td>唱歌</td>-->
			</tr>
		</table>
		<!--标签嵌套比较明显-->
		<table border="1px" cellspacing="2px" cellpadding="10px">
			<!--
				tr是行
				th/td是每个单元格
			-->
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>爱好</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小王</td>
					<!--行合并-->
					<td rowspan="2">男</td>
					<td>22</td>
					<td>打球</td>
				</tr>
				<tr>
					<td>小张</td>
					<!--<td>男</td>-->
					<td>20</td>
					<td>打球</td>
				</tr>
				<tr>
					<td>小六</td>
					<td>女</td>
					<!--列合并-->
					<td colspan="2">22唱歌</td>
					<!--<td>唱歌</td>-->
				</tr>
			</tbody>

		</table>
		<table border="1" cellspacing="0" cellpadding="10">
			<thead>
				<tr>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
			</tbody>
		</table>

	</body>

</html>

HTML5新标签

结构标签

section 独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分

article 特殊独立区块，表示这篇页眉中的核心内容

aside 标签内容之外与标签内容相关的辅助信息

header 某个区块的头部信息/标题

footer 底部信息

nav 导航条部分信息

媒体标签

video视频

<video src="video/oceans.mp4" controls="controls" autoplay="autoplay" poster="img图片"preload="auto" loop="loop">src="资源链接地址"、controls控制条、preload预加载、autoplay自动播放、loop循环、poster视频默认第一帧图片。

audio音频

<audio src="video/oceans.mp4" controls="controls" autoplay="autoplay" loop="loop"=>您的浏览器不支持</audio>可以通过不写controls属性设置网页背景音乐

韩光明15138720702

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础入门

HTML基础知识定义：HTML(HyperText Markup Language)超文本标记语言。对象：写给浏览器的语言，包括IE,Firefox,Chrome,Goole,Opera等主流浏览器。HTML基本结构文档类型声明&lt;!DOCTYPE HTML&gt;告诉浏览器该文档遵循HTML规范。页面基础元素&lt;html&gt;页面开始&lt;/html&...
复制链接

扫一扫