初识HTML

最新推荐文章于 2024-06-07 18:11:32 发布

乱炖_

最新推荐文章于 2024-06-07 18:11:32 发布

阅读量119

点赞数

分类专栏：前端自学之路文章标签： html5 javascript css html

本文链接：https://blog.csdn.net/u012779308/article/details/115358819

版权

前端自学之路专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，主要显现为应用于文档内容的元素。

元素

I like <code>CSDN</code> and Cnblogs. 
<!-- 如上所示，<code>称为一个元素的开始标签 -->
<!-- 而</code>称为一个元素的结束标签 -->
<!-- 两个标签合在一起称作一个code元素 -->
<!-- 而夹在这两个标签之间的就是元素的内容 -->

空元素

I like <code></code> CSDN and Cnblogs.

不包含内容的元素被称为空元素，空元素虽然有时候没有意义，但也是有效的HTML代码。

空元素也有如下写法。这种标签被称作自结束标签。

I like <code /> CSDN and Cnblogs.

虚元素

I like CSDN and Cnblogs.
<hr />
I like CSDN and Cnblogs.

像<hr />标签这种单个标签就可以展示效果的我们称之为虚元素。

虚元素有两种写法：

一种是只是用开始标签<hr>
另一种是使用自结束标签<hr />

元素属性

I like <a class = "link" href = "https://www.csdn.net/">CSDN</a> and Cnblogs.
<!-- 上述例子，href就是<a>元素的专有属性。而引号中的内容就是属性值 -->
<!-- class则是一种全局属性，一个元素可以应用多个属性 -->

布尔属性

Enter your name: <input disabled />
<!-- disabled就是一种布尔属性，该属性可以阻止用户输入数据 -->
<!-- 如下两种写法也可以达到相同的目的 -->
<!-- 将布尔属性设置为空字符或与布尔属性名称相同的值 -->
Enter your name: <input disabled = "" />
Enter your name: <input disabled = "disabled" />

自定义属性

Enter your name: <input disabled = "true" data-creator = "adam"
                     data-purpose = "collection" />
<!-- 自定义属性必须以 “data-” 开头，这是为了避免与HTML未来版本可能增加的属性名产生冲突 -->

HTML文档

处理HTML文档的各种软件有一个通用的名称，即user agent（用户代理）。

浏览器是最流行的用户代理，但不是惟一的一种。

HTML的通用文档结构


<!DOCTYPE html>
<!-- DOCTYPE元素告诉浏览器，自此到html结束标签，所有元素内容都当做HTML处理 -->
<html>
    <!-- 元数据包含在head元素中 -->
    <head>
        <!-- title是一个标题元素，通常显示在浏览器的标签页 -->
        <title>Example</title>
    </head>
    
    <!-- 文档的内容放置在body元素中 -->
    <body>

    </body>

</html>

元素关系

父元素 —— 若A元素包含B元素，则A元素为B的父元素。
子元素 —— 若B元素被A元素包含，则B元素为A元素的子元素。子元素是关系最近的后代元素。
后代元素 —— 若A元素包含B元素和C元素，且C元素内包含D元素，则B元素，C元素和D元素都是A元素的后代元素。
兄弟元素 —— 若A元素包含B元素和C元素，则B元素和C元素互为兄弟元素。

元素类型

元数据元素（metadata element）—— 用来构建HTML文档的基本结构
流元素（flow element） —— 是短语元素的超集
短语元素（phrasing element） —— HTML的基本成分

短语元素与流元素都是用来确定一个元素合法的父元素和子元素范围。

也有些受限元素无法归类，如<li>元素，表示列表项。它只能有三种父元素 ol有序列表 ul无序列表 menu表示菜单。

HTML5全局属性及用法

accesskey属性

<!-- accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键 -->
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>

    <body>
        <!-- 在下面这个表单当中，使用Alt+n会聚焦在第一个input元素，以此类推 -->
        <form>
            Name: <input type="text" name="name" accesskey="n" />
            <p />
            Password: <input typr="password" name="password" accesskey="p" />
            <p />
            <input type="submit" value="Log In" accesskey="s" />
        </form>
    </body>

</html>

class属性

<!-- class属性用来将元素归类 -->
<!-- 通常用来设计CSS样式时以所定义的一个或多个类为应用目标 -->
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            .class2{
                background-color:black;
                color:white;
                padding:5px;
                margin:2px;
            }
            .class1 {
                font-size:x-large;
            }
        </style>
    </head>

    <body>
        <!-- 在工作中应用的class类名最好言之有物，这样便于后期维护 -->
        <a class="class1 class2" href="http://csdn.net">CSDN</a>
        <p />
        <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
    </body>

</html>

我们也可以通过JS脚本来给class类添加样式

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>

    <body>
        <a class="class1 class2" href="http://csdn.net">CSDN</a>
        <p />
        <a class="class2 ontherclass" href="http://w3c.org">W3C</a>
        <script>
            //获取所有类名包含otherclass的元素
            var elems = document.getElementsByClassName("ontherclass");
            //遍历elems中的所有元素，并给其添加样式
            for(i = 0; i < elems.length; i++){
                var x = elems[i];
                x.style.border = "thin solid black";
                x.style.background = "white";
                x.style.color = "black";
            }
        </script>
    </body>

</html>

contenteditable属性

<!-- contenteditable属性值为true时，会启用对标签内容的编辑功能 -->
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    
    <body>
        <p> 这是一个没有属性的p元素 </p>
        <p contenteditable="true">这是一个contenteditable属性值为true的p元素</p>
        <p contenteditable="false">这是一个contenteditable属性值为false的p元素</p> 
    </body>
</html>

contextmenu属性

<!-- contextmenu属性为元素设定快捷菜单，当在元素上右击时弹出菜单 -->
<!-- 目前只有firefox支持该属性 -->
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>

    <body>
        <div contextmenu="mymenu">
            <!-- 需要设定id与contextmenu的属性值进行绑定 -->
            <menu type="context" id="mymenu">
              <menuitem label="CSDN"></menuitem>
              <menuitem label="Cnblogs"></menuitem>
            </menu>

        </div>
    </body>
</html>

火狐浏览器好像也不支持，笔者这边先存疑

dir属性

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <!-- dir的两个属性值决定了文字的方向 -->
        <p dir="rtl">这是一串从右到左的文字</p>
        <p dir="ltr">这是一串从左到右的文字</p>
    </body>
</html>

draggable属性

draggable属性是HTML5支持拖放操作的方式之一

dropzone属性

dropzone属性可以和draggabel属性互相搭配使用。两者都是拖放操作的方式。

hidden属性

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            table {
                border-collapse: collapse;
            }
            th,td{
                border:1px solid #333;
                text-align:center;
            }
        </style>
        <script>
            var toggleHidden = function() {
                //获取所有id为toggle的元素
                var elem = document.getElementById("toggle");
                //检测元素是否拥有属性hidden
                if (elem.hasAttribute("hidden")) {
                    //如果拥有，则移除hidden属性
                    elem.removeAttribute("hidden");
                } else {
                    //如果没有，则添加hidden属性
                    elem.setAttribute("hidden","hidden");
                }
            }
        </script>
    </head>
    <body>
        <button onclick="toggleHidden()">影分身之术</button>
        <table>
            <tr><th>名字</th><th>城市</th></tr>
            <tr><td>老秦</td><td>大连</td></tr>
            <tr id="toggle" hidden><td>老秦的影分身</td><td>影之大连</td></tr>
            <tr><td>老秦的多重影分身</td><td>暗影之大连</td></tr>
        </table>
    </body>
</html>

id属性

<!-- id属性是元素的唯一的标识符 -->
<!-- 通常用在样式应用和脚本选择中 -->
<!-- 还可以用来导航到文档的特定位置 -->
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style>
            #w3clink {
                color:black;
                padding:5px;
                border: thin solid black;
            }
        </style>
    </head>

    <body>
        <a href= "http://csdn.net">CSDN</a>
        <p />
        <a id="w3clink" href="http://w3c.org">W3C</a>
    </body>
</html>

lang属性

lang属性用于说明元素内容的语言。例：lang="en"代表元素内语言是英语

spellcheck属性

spellcheck属性用于对元素内容进行拼写检查。当其值为true是开启拼写检查，false时则相反。

style属性

<!-- style属性用于内联样式表 -->
<a href="http://csdn.net" style="color:black;background-color:red;">CSDN</a>

tabindex属性

<!-- tabindex属性可以改变TAB键的默认转移顺序 -->
<form>
    <label>Name:<input type="text" name="name" tabindex="1" /></label>
    <p />
    <!-- 属性值为-1的元素不会在用户按下TAB键后被选中 -->
    <label>City:<input type="text" name="city" tabindex="-1" /></label>
    <p />
    <label>Country:<input type="text" name="country" tabindex="2" /></label>
    <p />
    <input type="submit" tabindex="3" />
</form>

title属性

<!-- title属性提供了元素的额外信息 -->
<a title="Hello 我被使用了title属性" href="http://csdn.net">CSDN</a>

乱炖_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，主要显现为应用于文档内容的元素。元素I like <code>CSDN</code> and Cnblogs. <!-- 而夹在这两个标签
复制链接

扫一扫