html基础知识

来源：互联网发布：java try catch嵌套编辑：程序博客网时间：2024/05/18 00:19

html的结构包括头和身体，还有两个辨识是html文档的标签。

有元素<></>这个样子表示的是元素，元素有属性。

元素有父元素，子元素和兄弟元素，元素还属于某一类。

<!DOCTYPE HTML><html>    <head>        <!-- metadata goes here -->        <title>Example</title>    </head>    <body>        <!-- content and elements go here -->        I like <code>apples</code> and oranges.    </body></html>

下面是一个稍微复杂的html，不过也挺好理解的，就死利用了javascript是否移除表单的属性。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <script>            var toggleHidden = function() {                var elem = document.getElementById("toggle");                if (elem.hasAttribute("hidden")) {                    elem.removeAttribute("hidden");                } else {                    elem.setAttribute("hidden", "hidden");                }            }        </script>    </head>    <body>        <button onClick="toggleHidden()">Toggle</button>        <table>            <tr><th>Name</th><th>City</th></tr>            <tr><td>Adam Freeman</td><td>London</td></tr>            <tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>            <tr><td>Anne Jones</td><td>Paris</td></tr>        </table>    </body></html>

css选择器中class之前是.号，id开头是#符号。

style属性是用来直接在元素身上定义css样式。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>        <body>        <h2>hello</h2>        <a href="http://appress.com" style="background:grey; color:white; padding:15px">Apress web site</a>    </body></html>

使用.css文件

可以使用＠import从一个css中导入另一个css中。

命名为styles.css

a {    background-color: gray;    color: white;}span {    border: thin black solid;    padding: 10px;}

html文件， href表示路径，可以是远端服务器的路径。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <link href="styles.css" rel="stylesheet" type="text/css">    </head>            <body>        <a href="http://apress.com">Visit the Apress website</a>        <p>I like <span>apples</span> and oranges.</p>        <a href="http://w3c.org">Visit the W3C website</a>        </body></html>

样式的层叠，

最开始是从元素内嵌样式开始的，到文档内嵌样式，到外部链接样式，到用户自定义（浏览器中的某个文件），最后到浏览器的默认样式。

如果某个样式标记为important则会改变样式的层叠关系。

继承样式也比较重要

<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <style type="text/css">            a.myclass1 {                color: black;            }            a.myclass2 {                color:white;                background: grey;            }                        p {                color: white;                background: grey;                border: medium solid black;            }                        span {                border: inherit;            }        </style>    </head>        <body>        <a href="http://wangrling.github.io">Visit the wangrling website</a>        <p> I like <span>apples</span> and oranges.</p>        <a class="myclass1 myclass2" href="http://wangrling.github.io">Visit the wangrling website.</a>    </body>        </html>

颜色，很重要的一个值。

长度，角度，

在html中使用script，需要有<script >元素

<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>        <body>        <script type="application/javascript">            document.writeln("Hello");            function myFunc() {                document.writeln("This is a document");            };            myFunc();        </script>    </body></html>

0 0