html

<!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中使用,要&... 比如空格是&nbsp <是&lt

XHTML

标签都要关闭, <br />
标签,属性名都要小写

Canvas

画布,对它设置长款之后,通过JS在画布上绘制
画线:

ctx.moveTo( , )
ctx.lineTo( , )
ctx.stroke() 

绘制文字

ctx.font="30px Arial";
ctx.strokeText("zzzy world",20,50); //设置文字内容和起点坐标

SVG由XML来决定图像

MATHML用来写数学符号和公式的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML, XML, XHTML 有什么区别 先说一下三者的定义。 HTML:HyperText Markup L...
    ezrealor阅读 396评论 0 1
  • 1、网页乱码的问题是如何产生的?解决方法? ①保存的编码格式和浏览器解析时的解码格式不匹配导致的。将保存的编码格式...
    鸿鹄飞天阅读 833评论 0 0
  • 一.网页乱码的问题是如何产生的?怎样解决 乱码产生的根本原因就是我们在保存文件时的编码格式和用浏览器解析文件时的解...
    婷楼沐熙阅读 879评论 0 0
  • HTML、XML、XHTML 有什么区别 首先,他们都是一种标记语言(Markup Language),不同的是:...
    饥人谷_zhangfan阅读 207评论 1 2
  • HTML、XML、XHTML 有什么区别 HTML:超文本标记语言(HyperText Markup Langua...
    饥人谷_一叶之秋阅读 242评论 0 1