【汇总】HTML 常用知识点

2017-11-22  本文已影响24人  Mr隐士

一、W3C --- web标准

符合 W3C 标准的页面是什么样的？

后续更新

二、HTML 基础

1. HTML 是一门 超文本标记语言，运行在浏览器上，由浏览器解析

推荐使用 html 后缀名
htm 是历史遗留的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名

2. HTML 结构

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

<!DOCTYPE html>             声明文档类型
<html>                      页面根元素
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
    <h1>我的第一个标题</h1>
     
    <p>我的第一个段落。</p>
 
</body>
</html>

(1) <!DOCTYPE html> 标签 声明是 html5 文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

(2) <html></html> 标签 根元素

(3) <head></head> 标签 定义文档的头部，是所有头部元素的容器

(4) <body></body> 标签 定义文档的主体

(5) <title></title> 标题 双标签，是 <head></head> 标签中唯一必须的元素

(6) <meta> head中 单标签 描述了元数据 参考资料

常用meta整理
meta 设置

<meta name="keywords" content="搜索引擎定义关键词">
<meta name="description" content="网页 描述内容">
<meta name="author" content="组这名字">
<meta http-equiv="refresh" content="30">

(7) <base> head中 单标签 为页面上的所有链接 规定默认地址、打开方式

(8) <link> 单标签 引入外部资源 （ 引入css样式、引入浏览器工具栏图标）

<link rel="stylesheet" type="text/css" href="mystyle.css">

<link rel="shortcut icon" href="http://www.cifi.com.cn/static/default/images/favicon.ico">  // 路径必须使用绝对路径

(9) <style></style> 双标签 引入外部css样式、包含css样式

(10) <script></script> 双标签 引入外部脚本、包含脚本代码；新增异步属性

三、元素 类型

1. 块级元素 （block element）

2. 行内元素（内联元素） (inline element）

3. 块级元素、行内元素的 的重要区别：

4. 行内块 元素

5. 行内元素、行内块元素（ 都属于 内联元素 ） 及 存在间隙的bug

四、常用标签

1. a 标签

<body>
    <a href="http://www.baidu.com" id="test">  Click Me  </a>
</body>
<script>
    var test = document.getElementById('test');

    function stopDefault(e) {
        if (e && e.preventDefault)
            e.preventDefault();
        else {
            window.event.returnValue = false;
        }
    }
    test.onclick = function(e) {
        stopDefault(e);
    }
</script>

2. img 标签

3. ul ol dl 等 列表标签

4. table 系列标签

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>张新</td>
            <td>18</td>
            <td>帅</td>
        </tr>
    </tbody>
</table>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style media="screen">
        table {
            width: 200px;
            height: 100px;
            background-color: red;
        }

        th, td {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <table cellspacing="1" border="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td >张新</td>
                <td>18</td>
                <td>帅</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

5. 易忽略标签汇总

<h1></h1> 标题标签 --- 利于搜索引擎
- 搜索引擎使用标题为您的网页的结构和内容编制索引
- h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
<font size="6"></font>   一号标题 对应 6号字体，依次类推


<br> 换行

<hr> 定义水平线

<q>引用文本</q>                  它的语义：引用别人的话, 不单单是加了双引号

&nbsp;                          空格（分号不能少）

<pre></pre>                     保留原格式（对空行和空格进行控制）

<b></b>  <strong></strong>      加粗

<i></i>  <em></em>              斜体

<del></del>  <s></s>            删除文本标签

<ins></ins>  <u></u>            下划线

<sub></sub>                     上标
<sup></sup>                     下标

<small></small>                 缩小

<code></code>                   电脑自动输出

五、表单控件

1. 表单构成：表单域、提示信息、表单控件

2. 表单标签 <form> </form>

3. 文本输入框 <input type="text"> 

<style>
    input::placeholder {
        color: green;
    }
</style>

4. 密码输入框 <input type="password">

5. 单选框 <input type="radio"> 圆形选项

6. 多选框 <input type="checkbox"> 方形选项

7. 提交按钮 <input type="submit">

8. 下拉列表 <select> <option> tab1 </option></select> 

<select>
    <optgroup label="北京市">
        <option value="33">1</option>
        <option value="22">2</option>
        <option value="11">3</option>
    </optgroup>
    <optgroup label="天津市">
        <option value="33">4</option>
        <option value="22">5</option>
        <option value="11">6</option>
    </optgroup>
</select>

9. 文本域 <textarea> </textarea>

10. 文件上传控件 <input type="file">

11. 隐藏域 <input type="hidden" value=""> 收集 或 发送信息

12. <label></label> 标签，被点击时 出发相应表单控件

13. 完整的表单提交代码【待实现】

六、常用的全局属性（含h5）

1. title=" " 显示提示信息

2. class=" " 规定标签类名

3. style=" " 规定行内样式

4. id=" " 规定元素id，作为唯一标识

5. data-属性名 = " " （h5）自定义属性，用于 存储数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>11</title>
    </head>
    <body>
        <button type="button" data-id="888">按钮</button>
    </body>
    <script>
        var btn = document.getElementsByTagName('button')[0];

        btn.addEventListener('click', function (e) {
            console.log(e.target.dataset.id);  // '888'
        });
    </script>
</html>

6. draggable="true / false / auto" （h5）元素是否可以被拖动， 默认值 auto 使用浏览器默认行为

<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <style type="text/css">
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
</head>
<body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>
<script type="text/javascript">
    function allowDrop(e) {
        // 阻止默认事件
        e.preventDefault();
    }

    function drag(e) {
        e.dataTransfer.setData("Text", e.target.id);
    }

    function drop(e) {
        var data = e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
        e.preventDefault();
    }
</script>
</html>

七、路径

相对路径：相对当前文件所在位置的路径

绝对路径

根目录

八、link 标签引入 浏览器工具栏图标；制作 .ico 格式的图标

关于网站图标favicon.ico
favicon.ico 制作工具

<link rel="shortcut icon" href="http://www.cifi.com.cn/static/default/images/favicon.ico">
上一篇 下一篇

猜你喜欢

热点阅读