<!DOCTYPE html>
声明为html5
HTML中meta没有结束标签
head标签
可以包含 <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>这些标签
link标签
链接样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
link rel= “shortcut icon” ...
style
在head中设置样式, 内部样式表
base标签
设置默认链接,可以让a使用相对路径。设置时默认链接以/结尾
meta标签
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>
设置页面字符集
HTML5可以简写成<meta charset=”utf-8″>
name属性
便于搜索引擎发现
<meta name=”keywords” content=””>:告诉搜索引擎,当前页面的关键字。
<meta name=”author” content=””>:告诉搜索引擎,标注网站作者是谁。
<meta name=”copyright” content=””>:标注网站的版权信息。
搜索引擎会检索页面的description和keywords
可见部分
标题h1~h6, 标题的设置会让搜索引擎搜到
段落 p , 是块级元素,浏览器在其前后加空行
链接 a
<a href="https://www.baidu.com">baidu.com</a>
不写https的话从项目下查找
href是属性,a是标签/元素。属性在开始标签里,以key-value形式出现name="value"
Label a 的target属性设置窗口打开方式: view_window
为新标签中打开
链接可以link到某个id
书签作用
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片 img
<img loading="lazy" src="./images/head.png" width="258" height="258" />
html文件和image在不同目录下,./回退一层
如果在同一目录下就images/head.png
img alt属性:在不能显示图片的时候显示替代文字
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
img中使用map,需要加#
空标签<br />
可以换行
水平线 <hr>
加粗 b 或 strong
斜体 i 或 em
插入字(下划线) ins
删除字(中间横线) del
内联样式,在标签里设置 属性 style="",多个值分号隔开
表格table
tr 行标签
td 列标签
th 表格第一行
caption 表格上面的表头
列表
有序列表 ol
无序列表 ul
列表项都用 li
表单 form
通常用到input标签, 设置type属性
type属性:
- text
- password
- radio单选 同一组的单选按钮,name 取值一定要一致
- checkbox 复选
- submit 表单要设置action(目的页面),表单中有submit的input元素,会把表单内容传到另一个页面
<form action="glass.html" method="GET">
username : </span><input type="text"><br>
passwd : </span><input type="password"><br>
<input type="submit" value="Jump">
</form>
output标签用于显示计算结果
<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>
<label>为input元素设置文字,可以让鼠标点击文字时增加动作
下拉菜单 select
<form>
<select>
<option value="...">Name</>
textarea
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
Script
可以定义脚本或通过src引用外部脚本
<script>
document.write('zzzzzy');
</script>
document.write可以直接写html代码
<script>
function onClick()
{
document.getElementById("pharse").innerHTML="This is my 1st pharse!";
}
</script>
字符实体
预留符号不能直接在HTML中使用,要&... 比如空格是  <是<
XHTML
标签都要关闭, <br />
标签,属性名都要小写
Canvas
画布,对它设置长款之后,通过JS在画布上绘制
画线:
ctx.moveTo( , )
ctx.lineTo( , )
ctx.stroke()
绘制文字
ctx.font="30px Arial";
ctx.strokeText("zzzy world",20,50); //设置文字内容和起点坐标
SVG由XML来决定图像
MATHML用来写数学符号和公式的