web前端技术总结——HTML（包括html5）

最新推荐文章于 2022-05-09 19:02:26 发布

/*陳小黄*/

最新推荐文章于 2022-05-09 19:02:26 发布

阅读量503

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44660087/article/details/105398777

版权

WEB前端技术总结——HTML（包括html5）

一：HTML基础知识

1：常用标签

换行： <br

水平： <hr

注释：<!—注释内容 --> ，页面中不会显示，源码中显示

标题：h1-6 重要性逐渐降低，h1仅次于title，h4-6一般不用

段落：p，默认独占一行，段与段间有一个间距，字符之间写再多空格也只会显示一个空格

列表:

    无序列表：<ul>定义 <li>列表项  属性type中disc/square/circle表示实心圆点/方块/圆

    有序列表：<ol>定义 <li>列表项  属性type中1/a/A/i/I表示阿拉伯/字母/罗马数字

    定义列表：<dl>定义 <dt>/<dd>列表项，内容/描述 （ul/ol/dl彼此间可相互嵌套）

图片 img

	作用：  向页面中引入外部图片
					
	属性：  src：图片路径（相对路径：相对于当前资源所在路径位置，返回当前前2级目录../../）
					
	alt：图片无法加载时对图片的描述，搜索引擎通过它识别图片内容
					
	width/ height：设置宽度/高度（单位 px，动一另一等比例调整大小，不建议用）

	格式：  JPEG：支持颜色多，可压缩，不支持透明
	
	        GIF：支持颜色少，简单透明的图片，可动态
	
	        PNG：支持颜色多，复杂透明的图片（效果一致用kb小的，不一致用好的）

超链接 a

	href：地址（相对路径）/mailto电子邮件/页面名/不确定#/#top回到顶部
	
	target：_self当前页面打开链接/_blank新窗口中打开链接/内联框架中的name值

2：meta标签的作用

在这里插入图片描述

3：内联框架

特点：不推荐，不会被搜索引擎查到

格式： <iframe src=“demo02.html” name=“tom” /iframe>

属性：src:指向一个外部页面的路径，可以使用相对路径 name:可以为内联框架指定一个name属性

		产生文本区：<textarea
		
		产生下拉列表：<select
		
		产生文本框：<input type="text"
		
		产生复选框：<input type="checkbox"
		
		添加背景颜色：<body bgcolor="yellow"
		
		插入背景图像：<body background="background.gif"
		
		使单元格中的内容进行左对齐：<td align="left"

iframe的使用场景有：ajax上传文件资源加载跨域访问典型系统

优势： 1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发 1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度
劣势：
1.它可能破坏浏览器的后退功能

	2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中
	
	1.采用二进制格式且格式私有
	
	3.flash 文件很大，第一次使用较长的等待时间

4：表格重要属性

（1）colspan用来设置横向合并单元格
rowspan用来设置纵向合并单元格

（2）在这里插入图片描述

二：canvas画布

1: js定义画布画笔

在这里插入图片描述

2: canvas绘制矩形

在这里插入图片描述

3：canvas绘制路径

在这里插入图片描述

4：canvas绘制三角形

在这里插入图片描述

5：save和restore

在这里插入图片描述

6：canvas画圆

在这里插入图片描述

7：canvas中的变换

在这里插入图片描述

8：canvas的合成

在这里插入图片描述

9：重要实例

在这里插入图片描述

/*陳小黄*/

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端技术总结——HTML（包括html5）

WEB前端技术总结——HTML（包括html5）目录WEB前端技术总结——HTML（包括html5）一：HTML基础知识1：常用标签2：meta标签的作用3：内联框架4：表格重要属性二：canvas画布1: js定义画布画笔2: canvas绘制矩形3：canvas绘制路径4：canvas绘制三角形5：save和restore6：canvas画圆7：canvas中的变换8：canvas的...
复制链接

扫一扫