Differences

This shows you the differences between two versions of the page.

--- html_and_css [2018/12/25 23:51] – admin
+++ html_and_css [2021/07/23 23:56] (current) – admin
@@ Line 1: / Line 1: @@
-#html
+#HTML
+## Basic
+ - **Block elements vs inline elements.** https://www.w3schools.com/html/html_blocks.asp
+ - **Checkbox** https://www.tunnelsup.com/jquery-checkbox-checked-reading-and-setting/
+## add favicon to website
+```
+<link rel="icon"
+      type="image/png"
+      href="http://example.com/myicon.png">
+```
+## insert html code from another file
+ref: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file
+Solution 1. Use jQuery.js
+```
+<!doctype html>
+<head>
+<script src="script/jquery.js"></script>
+<script> $(function(){$("#nav_menu").load("nav_menu.html"); });</script>
+</head>
+<body>
+<div id="nav_menu"></div>
+</div>
+</body>
+```
+Solution 2. Use a custom javascript
+a.html:
+```
+<html>
+  <body>
+  <h1>Put your HTML content before insertion of b.js.</h1>
+      ...
+  <script src="b.js"></script>
+      ...
+  <p>And whatever content you want afterwards.</p>
+  </body>
+</html>
+```
+b.js:
+```
+document.write('\
+    <h1>Add your HTML code here</h1>\
+     <p>Notice however, that you have to escape LF's with a '\', just like\
+        demonstrated in this code listing.\
+    </p>\
+');
+```
+Or just use the following handy bash script published as a Gist on Github, that automates all necessary work, converting b.html to b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
+{{ ::html_to_js.zip |}}
+Solution 3. Use htm file and ```frameset```
 #CSS
-###在html中使用external stylesheet:
+##在html中使用external stylesheet:
-```<link rel="stylesheet" type="tex/css" href="../LSstyle.css">```
+```<link rel="stylesheet" type="tex/css" href="LSstyle.css">```
+##不同的vhost共用stylesheet的方法:在每个vhost里面建立symbolic link
+```ln -s /home/wwwroot/LSstyle.css LSstyle.css```
-###不同的开头：
+### Class vs ID：
 . define an **id**
@@ Line 17: / Line 83: @@
 ```img.roundedCorner6px{ border-radius:6px; overflow:hidden; }```
-两者似乎可以互相替换：[[https://www.w3schools.com/code/tryit.asp?filename=FYJD2ER45BQL]]
+class可以用于各种元素，但id只针对一个元素：[[https://www.htmldog.com/guides/css/intermediate/classid/]]
-但是class的定义方法必须得指定tag，不如id来得通用[?] ++++ Code Example|
+++++ Code Example|
 ```
@@ Line 52: / Line 119: @@
 ++++
+<wrap lo>参考资料：
+ * CSS dropdown menu https://catalin.red/css3-dropdown-menu/
+</wrap>