web前端 -- html总结

2024-02-07 14:57:05

HTML 指的是超文本标记语言: HyperText Markup Language；

块级元素：<h1>~<h6>，<p>，<div>，<ul>，<li>，<ol>，<title>，<head>；

行内元素：<span>，<b>，<strong>，<i>，<em>，<lable>，<sub>，<sup>；

行内块级元素：<button>，<input>，<td>，<textarea>，<im>，<a>，<audio>，<video>，<iframe>；

HTML字符实体：

空格：  小于号：< 大于号：>人民币/日元：¥ 版权：© 注册商标：®

链接（a）：定义一个超级链接。

Href：跳转地址，Target取值：_blank：新页面，_self：页面本身，空连接：Href=”#”，

锚点：<a id="tips">跳转位置</a> <a href="#tips">点击跳转</a>

普通链接：<a href=”http://www.baidu.com/”>百度</a>

图像链接： <a href="http://www.baidu.com/"><img src="URL" alt="替换文本"></a>

在移动端，可以点击a启动打电话：<a href="tel:138...">拨打电话</a>

邮件链接：<a href="mailto:123@qq.com">发送e-mail</a>

表单input通用属性：

placeholder：输入框的提示，readonly：文本区只读，disabled：禁用，autofocus=“autofocus”：页面加载完成，自动获得焦点，maxlength：最大长度，value：表单的值

表格table：

caption，表格标题，用于设置表格标题，不常用;

border-collapse：折叠边框;

cellpadding 来创建单元格内容与其边框之间的空白;

cellspacing 增加单元格之间的距离;

colspan：跨列，rowspan：跨行;

lable属性：

可以通过for属性，结合表单的id，绑定到另一个表单上，点击它就像点击了这个表单一样。

// 方法一：
<label  for="textInput">输入框</label>
<input type="text" id="textInput"><br>

// 方法二：
<label>
    <span>输入框</span>
    <input type="text"><br>
</label>

html列表标签：

<ol><li></li></ol>：有序列表; reversed：倒序，start：自定义开始序号，type：（a：小写，A：大写，i：罗马小写，I：罗马大写，1：数字默认）

<ul><li></li></ul>：无序列表; type（disc：实心圆默认，square：实心方块，circle：空心圆）

<dl><dt>标题</dt><dd>内容</dd></dl>：自定义列表；

iframe：框架

iframe使用src属性来显示目标链接页面；iframe的name属性和链接的target属性要一致。

优点：可以复用；局部刷新。

缺点：不利于搜索引擎；不能复用父页面样式，增加请求，影响性能。

URL ：统一资源定位器

http：超文本传输协议，明文不安全，免费的，端口号80。

https：安全超文本传输协议，加密安全，收费的，端口号443。

ftp：文件传输协议，用于将文件下载或上传至网站。

html5的新特性：

用于绘画的 canvas 元素；

用于媒介回放的 video 和 audio 元素；

对本地离线存储的更好的支持；

新的特殊内容元素，比如 header、footer、nav、aside、audio、video；

新的表单控件，比如 color 、date、time、tel、number、email、url、search、range；

html5新标签ie9以及以下不支持：

把以下代码放在 <head> 元素中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>

    // 方法1
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    // 方法2
    <!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

</head>
 
<body>
    <p>我是内容p标签</p>
</body>
</html>

canvas：用于图形的绘制

1、在Canvas上画线

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

stroke();

2、在canvas中绘制圆形

beginPath()；

arc(x,y,r,start,stop)；

stroke()；

3、使用 canvas 绘制文本

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

<!DOCTYPE html>
    <html>
        <head> 
            <meta charset="utf-8"> 
            <title>canvas</title> 
        </head>
    <body>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    </body>
    <script>
        // 找到 <canvas> 元素
        var c=document.getElementById("myCanvas");
        // 创建 context 对象
        var ctx=c.getContext("2d");
        // 绘制一个红色的矩形
        ctx.fillStyle="#FF0000";
        ctx.fillRect(0,0,150,75);
    </script>
</html>

4、Canvas - 渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

5、Canvas - 图像

drawImage(image,x,y)，把一幅图像放置到画布上

HTML5 内联 SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

Canvas	SVG
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

html5存储（ localStorage，sessionStorage，cookie）

localStorage：永久存储，sessionStorage：关闭浏览器就会被删除，cookie：需要手动设置过期时间，不安全。

以下适用于localStorage和sessionStorage：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

码农公寓

1、在Canvas上画线

2、在canvas中绘制圆形

3、使用 canvas 绘制文本

4、Canvas - 渐变

5、Canvas - 图像

相关文章