HTML5初学笔记

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    </nav>
  <form>
    <input type="text" placeholder="Search...">
    <button type="submit">Go</button>
  </form>
</header>

<canvas id="myCanvas"></canvas>
 
<script type="text/javascript">
var canvas=document.getElementById('myCanvas'); // 获取canvas元素
var ctx=canvas.getContext('2d'); // 申请2D上下文
ctx.fillStyle='#FF0000'; // 设置填充颜色
ctx.fillRect(0,0,80,100); // 绘制图像
</script>

<svg width="200" height="200" viewBox="0 0 100 100"> 
  <circle cx="50" cy="50" r="40" fill="tomato" stroke="#000" stroke-width="3"/> 定义元素(可挂监听器)
</svg>

<defs>
  <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#ff0"/>
    <stop offset="100%" stop-color="#f0f"/>
  </linearGradient>
</defs>
<rect width="100" height="50" fill="url(#g)"/>

<filter id="blur">
  <feGaussianBlur stdDeviation="3"/>
</filter>
<circle cx="50" cy="50" r="40" filter="url(#blur)"/>

<div id="box" draggable="true">拽我</div> //定义dragable标签
<div id="bin">放这儿</div>

<script>
const box = document.getElementById('box');
const bin = document.getElementById('bin');

// 拖拽开始
box.addEventListener('dragstart', e => {  // 在可拖拽的元素添加dragstart监听器
  e.dataTransfer.setData('text/plain', e.target.id);   // 存数据
  e.dataTransfer.effectAllowed = 'move';               // 光标样式
});

// 经过放置区必须阻止默认行为，否则浏览器拒收
bin.addEventListener('dragover', e => e.preventDefault());

// 放下
bin.addEventListener('drop', e => { // 在目的地定义drop监听器
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');     // 读数据
  const el = document.getElementById(id);
  el.parentNode.removeChild(el);                       // 举例：扔进垃圾桶
  bin.textContent = '已删除';
});
</script>

// 拿到页面里用于显示结果的元素（假设 <p id="demo"></p>）
var x = document.getElementById("demo");

/**
 * 入口函数：点击按钮时调用
 * 1. 判断浏览器是否支持地理定位
 * 2. 支持：申请获取当前位置
 * 3. 不支持：直接给出提示
 */
function getLocation() {
    if (navigator.geolocation) {
        /* 官方 API：getCurrentPosition(
               成功回调,
               失败回调（可选）,
               配置对象（可选）
           )
           下面只传了成功回调，最简单写法 */
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "该浏览器不支持获取地理位置。";
    }
}

/**
 * 成功获取位置后的回调函数
 * @param {Position} position  - 由浏览器传入的地理位置对象
 */
function showPosition(position) {
    /* position.coords 下存放所有坐标信息
       常用：latitude 纬度、longitude 经度
       其它：accuracy 精度（米）、altitude 海拔、speed 速度等 */
    x.innerHTML = "纬度: " + position.coords.latitude +
                  "<br>经度: " + position.coords.longitude;
}

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4"> 
    // 播放能播放的，如果都可以则任选一个
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script> 

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

<input list="browsers"> // 通过list属性关联datalist元素
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

<input type="text" placeholder="请输入内容">