HTML5知识点总结

最新推荐文章于 2024-07-12 16:31:27 发布

小美吖吖

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量208

点赞数

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

原文链接：https://blog.csdn.net/weixin_46085790/article/details/112315694

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础

html5的默认结构

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body></body>
</html>
<p>注意：html标签最好都是小写字母呈现，并且大部分标签都是成对出现，有一小部分单独出现，他们成为空标签</p>

文本和超链接标签

//标题文本标签
//h1,h2,h3,h4,h5,h6,

//文本对齐方式
<h3 align="left/right/center"></h3>

//段落标签
//p,br,hr,b,strong,img,a

//对应的属性
<p align="center" title="p标签" style="color:red">段落标签</p>

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

//水平线
<hr width="1110" size="5" align="left" color="qaua">

//图片
<img src="路径" alt="提示信息" align="center" border="边框" width="宽度" height="高度">

//链接标签
<a href="http://www.baidu.com">

音频和视频标签

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

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

列表标签

//有序列表
<ul type="项目符号类型">
	<li>列表一</li>
	<li>列表一</li>
	<li>列表一</li>
</ul>
//type的取值类型为：disc默认:实心圆；circle:空心圆；square:正方形。

//无序列表
<ol tyle="序号类型" 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>

表单标签

//表单中input的类型
//submit提交；button按钮；image图片；reset重置；password密码；
//search搜索；text文本；checkbox复选框；file文本域；radio单选框；hidden隐藏

//下拉框和文本输入
<form>
	<select name="">
		<option value="">下拉选项</option>
		<option value="">下拉选项</option>
	</select>
	<textarea name="" row="" 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('无问题提升内容')"  />

常用的样式属性(背景和阴影)

字体以及文本属性

//字体属性
//font:设置字体所有属性;font-family:设置字体类型;font-size:设置字体大小;
//font-weight:设置字体粗细;color:设置字体颜色

备注：font-family和font-size都是font的子属性，一般常用字体属性的缩写形式，如：font:bold 12px '宋体';注意这三个属性的顺序依次为字体粗细大小样式。

文本属性

//line-height:设置行高;当line-height和height值相同时，样式表现为垂直居中
//text-align:设置对齐方式；常用值为left,center,right
//letter-spacing:设置字符间距;
//text-decoration:设置文本修饰;常用值none,underline,line-through

边距和填充

//边距：页面中元素和元素直接的距离
//填充：元素内容和边距之间的距离  padding，值的情况和margin类似
//margin:一个值:上下左右;两个值:上下和左右;三个值:上和左右和下;四个值:上右下左
//margin-bottom:下边距，其他四个类推
//margin:0 auto

边框属性

//border属性
//border-style:边框样式;常用属性值：none，soild，dashed
//border-width:边框宽度;常用属性值：1px ，5px
//border-color:边框颜色;常用属性值：red，black
//border:符合属性，用于设置边框宽度，样式，颜色;常用属性值：border:1px solid red ;
   		
//也可单独设置某个方向的值:border-bottom:下边框;border-left:左边框;
//border-right:右边框;border-top：上边框

border-radius属性：圆角边框（半径像素越大，圆角越明显）

border-radius：
设置一个参数：四个角
设置两个参数：参数1：左上和右下角 ，参数2：右上和左下角
设置三个参数：参数1：左上角 ，参数2：左下和右上角，参数3：右下角
设置四个参数：顺序依次为：左上，右上，右下，左下

列表属性

list-style-image：图片作为列表项的符号，其值为对象对应的url
list-style-type：设定列表项的符号;常用属性值：none（无），disc（实心圆），circle（空心圆） ，square（实心方块）
list-style-position：符号在列表项的位置;常用属性：inside（内），outside（外）
list-style：符合属性，顺序为：符号，位置，图片符号
list-style:circle inside url() ;

小美吖吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识点总结

基础html5的默认结构<html> <head> <meta charset="utf-8"> <title></title> </head> <body></body></html><p>注意：html标签最好都是小写字母呈现，并且大部分标签都是成对出现，有一小部分单独出现，他们成为空标签</p>文本和超链接标签//标题文本标签//h1,h2,
复制链接

扫一扫