HTML基础笔记

来源：互联网发布：阿里云百度云知乎编辑：程序博客网时间：2024/06/06 01:55

HTML基础知识学习记录

一、使用元素

1、 a:生成超链接2、 body:表示HTML文档的内容3、 button:生成用来提交表单的按钮4、 code:表示计算机代码片段5、 DOCTYPE:表示HTML文档的开始6、 hr:一条直线7、 html:表示文档的HTML部分8、 input:表示用户输入的数据9、 label：生成另一元素的说明标签10、 p:表示段落11、 style:定义CSS样式12、 table:用表格组织的数据13、 td:表格单元格14、 th:表头单元格15、 textarea:生成用于获取用户输入数据的多行文本框16、 title:HTML文档的标题17、 tr:表格行18、 br:换行其他特性：空元素、自闭合元素、虚元素（如hr）

二、使用元素属性

1、一个元素使用多个属性

如：I like <a class="link" href="/apple.html" id="firstlink">apple</a>.

2、使用布尔属性

如：enter your name:<input disabled> //disable本来存在，但也可给它设值    enter your name:<input disabled="">    enter your name:<input disabled="disabled">

3、使用自定义属性

以data-开头的属性如：enter your name:<input disabled="true" data-creator="adam" data-purposr="collection">

三、创建HTML文档

实例：<!DOCTYPE HTML><html>    <head>        <title>hello world<title>    </head>    <body>        I like <code>apple</code>.    </body></html>

四、全局属性

1、accesskey属性

作用：设置快捷键<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <form>            Name: <input type="text" name="name" accesskey="n">            <p/>            Password: <input type="password" name="password" accesskey="p">            <p/>            <input type="submit" value="Login" accesskey="s">         </form>    </body></html>

2、class属性

用于将元素归类，通常是为了能找到文档中的某一类元素或者为某一类元素应用CSS样式。<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <style type="text/css">        .class2{            background-color:grey;            color:white;            padding:5px;            margin:2px;        }        .class{            font-size:x-large;        }    </head>    <body>        <a class="class1 class2" href="http://apress.com">Apress web site</a>        <p/>        <a class="class2 classother" href="http://w3c.org">W3C web site</a>    </body></html>或者在脚本中使用class属性<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <a class="class1 class2" href="http://apress.com">Apress web site</a>        <p/>        <a class="class2 classother" href="http://w3c.org">W3C web site</a>        <script type="text/javascript">            var elems = document.getElementsByClassName("otherclass");            for(i=0;i<elems.length;i++){                var x = elems[i];                x.style.border = "thin solid black";                x.style.backgroundColor = "white";                x.style.color = "black";            }        </script>    </body></html>

3、contenteditable属性

顾名思义：就是可编辑的属性<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <p contenteditable="true">It is raining ringht now</p>    </body></html>

4、contextmenu属性

为元素设定快捷菜单

5、dir属性

用来规定元素中文字的方向：ltr(用于从左到右的文字)和rtl(用于从右到左).可以在<p>元素中使用<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <p dir="ltr">It is left-to-right</p>        <p dir="rtl">It IS right-to-left</p>    </body></html>

6、draggable属性与dropzone属性

通常搭配使用，用来表示元素是否可拖放.

7、hidden属性

布尔属性，表示相关元素当前无需关注，用来隐藏相关元素.<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <script>            var toggleHidden = function(){                var elem = docment.getElemtById("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>

8、ID属性

给元素分配一个唯一的标识符，这种标识符通常用来将样式应用到元素上或者在JavaScript程序中用来选择元素.<!DOCTYPE HTML><html>    <head>        <title>Example</title>        <style>            #w3clink{                backgound:grep;                color:white;                padding:5px;                border:thin solid black            }        </style>    </head>    <body>        <a href="http://apress.com">Apress web site</a>        <p/>        <a id="w3clink" href="http://w3c.com">W3C web site</a>    </body></html>

9、lang属性

用来标识元素内容使用的语言.<p lang="en/fr/es...">xxxxxx</p>

10、spellcheck属性

用于检查输入元素输入内容的拼写问题<textarea spellcheck="true">xxxxxxxxx</textarea>

11、style属性

用来直接在元素身上定义CSS样式.<a href="http://apress.com" style="backgound:grep;color:white;padding:10px">visit the Apress web site</a>

12、tabindex属性

改变tab键切换元素顺序name: <input type="text" name="name" tabindex="1">city: <input type="text" name="city" tabindex="0">

13、title属性

提供元素的额外信息，把鼠标移动到相关元素上就会显示的内容.

阅读全文

0 0