html基础知识

最新推荐文章于 2025-08-11 22:30:00 发布

火车上遇见

最新推荐文章于 2025-08-11 22:30:00 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/WAN_EXE/article/details/70255716

本文介绍了HTML的基本结构，包括头部和主体部分，并展示了如何通过CSS来美化网页元素。同时，文章探讨了JavaScript在网页中的应用，例如动态显示隐藏表格行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>