HTML5知识点总结(一)

HTML5基础

     HTML5默认结构
     文本和超链接标签
     音频和视频标签
     列表标签
     div标签和span标签
     表格标签
     表单



HTML5默认结构

<!DOCTYPE html>//文档类型声明
<html>//开头
	<head>
		//html文件信息
		<meta charset="utf-8" />//字符编码语言
		<title></title>	//标题
	</head>
	<body>
		//需要呈现的内容
	</body>	
</html>


<h6 > 注意:html标签最好都以小写字母呈现,并且大部分标签都是成对出现的,有一小部分单独存在,他们成为空标签</h2>


文本和超链接标签如下:标题文字标签,段落标签

标题文字标签:h1–h6字号逐渐减小
		<h1></h1>
		<h2></h2>
		<h3></h3>
		<h4></h4>
		<h5></h5>
		<h6></h6>

文字对齐方式:align=“”;
		<h1 align="left">左对齐</h1>
		<h2 align="right">右对齐</h2>
		<h3 align="center">居中对齐</h3>

段落标签

<p >段落标签</p>
<br  /> //换行
<hr  /> //水平线
<b></b>//强调标签
<strong></strong>//强调标签
<img />//图片标签
<a />//超链接

属性:

<p align="center" title="看看工具提示" style="color: red; ">段落标签</p>//文字位置,工具提示,样式

<p dir="ltr">段落标签</p>//文字方向

<hr width="1110" size="5" align="left" color="aqua"  /> //水平线
宽度,高度,对齐方式,颜色,去掉水平线阴影

<img src="路径" alt="提示信息" align="对齐方式" border="边框" width="宽度" height="高度"/>

<a href="https://mp.csdn.net/"></a>


音频和视频标签标签

<audio autoplay="是否自动播放" controls="是否显示控件" src="路径" loop="是否循环播放" >
		<source src="music.mp3" />
</audio>


<video poster="是否预加载" loop="是否循环播放" poster="点击前显示按钮"  >
		<source src="媒体文件地址" type="类型"></source>
</video>


列表标签

有序列表
```html
<ul type="项目符号类型">
	<li></li>
	<li></li>
	<li></li>
	...
</ul>
type取值为:disc:默认,实心圆
			circle:空心圆环
			square:正方形

无序列表
<ol type="序号类型" start="序号起始值">
	<li></li>
	<li></li>
	<li></li>
	...
</ol>
type取值:1:数字,a:小写英文,A:大写英文,i:小写罗马数字,I:大写罗马数字



定义列表标签
<dl>
	<dt>名词</dt>
	<dd>解释</dd>
	....
</dl>


div标签和span标签

div标签
<div>
	其他标签或内容
</div>
默认独占一行,默认从上到下依次排列

span文本标签
<span>
		文本
</span>
默认多个span存在一行,默认从左到右依次排列


表格标签

<table width="" height="" bgcolor="背景颜色" background="背景图片" align="对齐方式" border="边框" cellspacing="单元格间距" cellpadding="单元格与内容的间距">
	<caption>标题</caption>
	<th>表头</th>
	<tr>//行
		<td colspan="跨行行数" rowspan="垂直所跨行数">单元格</td>
		<td>单元格</td>
		...
	</tr>
</table>

</div>


表单标签

表单类型
<form action="提交地址" method="提交方式" name="表单名字">
	<input type="类型" name="名称"  value="" size="宽度" maxlength="最大字符串" checked="是否选中" readonly="只读" src="路径" />
	type类型:
submit:提交
button:按钮
image:图片
reset:重置
password:密码
search:搜索
text:文本
checkbox:复选框
file:文件域
radio:单元按钮
hidden:隐藏
</form>

下拉框和文本输入
<form action="" method="post">
			<select name="">下拉框
				<option value=""></option>
			</select>
			<textarea name="" rows="" cols=""></textarea>多行文本输入框
</form>

表单验证:

<input value="必填验证" required="required"/>
<input type="email"  value="邮箱" />
<input type="range"  value="限定范围" />
<input type="date"  value="年月日" />
<input type="number"  value="数字" />
<input oninvalid="setCustomValidiy('有问题提示内容')" oninput="setCustomValidiy('无问题提升内容')"  />

猜你喜欢

转载自blog.csdn.net/weixin_46085790/article/details/112315694