{"id":332,"date":"2020-07-24T15:36:46","date_gmt":"2020-07-24T06:36:46","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=332"},"modified":"2020-07-24T15:36:46","modified_gmt":"2020-07-24T06:36:46","slug":"02-2%e3%80%80html%e3%81%ae%e5%a4%89%e6%9b%b4","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=332","title":{"rendered":"02.2\u3000html\u306e\u5909\u66f4"},"content":{"rendered":"

\u30fbhtml\u306e\u5909\u66f4\u5185\u5bb9\u306e\u8aac\u660e<\/p>\n

\r\n$ cd \/var\/www\/html\/JS\/02\r\n$ cat index.html\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<title>\u304a\u7d75\u63cf\u304d DEMO<\/title>\r\n<script src=\"lib\/jquery-3.5.1.min.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"css\/layout.css\">\r\n<script type=\"text\/javascript\" src=\"js\/canvas.js\"><\/script>\r\n<\/head>\r\n<body>\r\n  <canvas id=\"canvas\" width=\"500\" height=\"300\" ><\/canvas>\r\n  <div class=\"option\">\r\n    <div class=\"color\">\r\n      \u8272\uff1a\r\n      <a class=\"black\" data-color=\"0, 0, 0, 1\"><\/a>\r\n      <span class=\"black\"> :black <\/span>\r\n      <a class=\"red\" data-color=\"255, 0, 0, 1\"><\/a>\r\n      <span class=\"red\"> :red <\/span>\r\n      <a class=\"blue\" data-color=\"0, 0, 255, 1\"><\/a>\r\n      <span class=\"blue\"> :blue <\/span>\r\n    <\/div>\r\n    <div class=\"bold\">\r\n      \u592a\u3055\uff1a\r\n      <a class=\"small\" data-bold=\"1\">\u5c0f<\/a>\r\n      <a class=\"middle\" data-bold=\"5\">\u4e2d<\/a>\r\n      <a class=\"large\" data-bold=\"10\">\u5927<\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <br>\r\n  <input type=\"button\" value=\"clear\" id=\"clear\">\r\n  <a id=\"download\" href=\"#\" download=\"canvas.jpg\">\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a>\r\n  <div id=\"result\"><img src=\"\"><\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.jQuery\u306e\u6700\u65b0\u7248\u3078\u306e\u5909\u66f4\u3000jquery-1.12.1.min.js\u3000-> jquery-3.5.1.min.js<\/p>\n
\r\n<script src=\"lib\/jquery-3.5.1.min.js\"><\/script>\r\n<\/pre>\n
2.CSS\u306e\u5916\u90e8\u30ea\u30f3\u30af<\/p>\n
\r\n<link rel=\"stylesheet\" href=\"css\/layout.css\">\r\n<\/pre>\n
3.JavaScript\u306e\u5916\u90e8\u30ea\u30f3\u30af<\/p>\n
\r\n<script type=\"text\/javascript\" src=\"js\/canvas.js\"><\/script>\r\n<\/pre>\n
4.href=””\u306e\u7121\u52b9\u5316
\nbefore:<\/p>\n
\r\n    <div class=\"bold\">\r\n      \u592a\u3055\uff1a\r\n      <a href=\"\" class=\"small\" data-bold=\"1\">\u5c0f<\/a>\r\n      <a href=\"\" class=\"middle\" data-bold=\"5\">\u4e2d<\/a>\r\n      <a href=\"\" class=\"large\" data-bold=\"10\">\u5927<\/a>\r\n    <\/div>\r\n<\/pre>\n
;
\nafter:<\/p>\n
\r\n    <div class=\"bold\">\r\n      \u592a\u3055\uff1a\r\n      <a href=\"\" class=\"small\" data-bold=\"1\">\u5c0f<\/a>\r\n      <a href=\"\" class=\"middle\" data-bold=\"5\">\u4e2d<\/a>\r\n      <a href=\"\" class=\"large\" data-bold=\"10\">\u5927<\/a>\r\n    <\/div>\r\n<\/pre>\n
;<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30fbhtml\u306e\u5909\u66f4\u5185\u5bb9\u306e\u8aac\u660e $ cd \/var\/www\/html\/JS\/02 $ cat index.html <!DOCTYPE html> <html> <head> <me…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/332"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=332"}],"version-history":[{"count":1,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/332\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}