HTML简单学习

  • HTML常见元素

    • 编码<meta charset="utf-8">

    • 适配移动端界面：视口，让显示内容按照设备宽度适配。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    • a[href, target]

    • img[src, alt]

    • table td[colspan, rowspan]

    • form[target, method, enctype, action]

    • input[type, value]

    • button[type]

    • select>option[value]

    • label[for(同指定元素做关联)]

    • example

      <!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <section>
        <h1>链接</h1>
        <a href="http://www.qq.com">腾讯网</a>
        <a href="http://www.taobao.com" target="_blank">淘宝网</a>
    </section>
    <section>
        <h1>表格</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <td colspan="2">数据1</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <td rowspan="2">数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section>
        <h1>表单</h1>
        <form method="GET" action="http://www.qq.com">
            <p>
                <select name="select1">
                    <option value="1">一</option>
                    <option value="2" selected>二</option>
                </select>
            </p>
            <p>
                <input type="text" name="text1" />
            </p>
            <p>
                <input type="password" name="password" />
            </p>
            <p>
                <input type="radio" name="radio1" id="radio1-1" />
                <label >选项一</label>
                <input type="radio" name="radio1" id="radio1-2" />
                <label for="radio1-2">选项二</label>
            </p>
            <p>
                <button type="button">普通按钮</button>
                <button type="submit">提交按钮一</button>
                <input type="submit" value="提交按钮二"/>
                <button type="reset">重置按钮</button>
            </p>
        </form>
    </section>
</body>
</html>

  • 如何理解HTML

    • HTML文档
    • 描述文档的结构
    • 有区块和大纲

  • 可以使用H5O工具对页面进行大纲的显示

  • 检查HTML正确性

  • 分类

    • 按照默认样式分类

      • 块级block
        • 独占一行
        • 有规则的形状
        • 可以设置长宽
      • 行内inline
        • 不用独占一行
        • 没有规则的形状，比如span内部是一长串文字，太长的情况下可以换到下一行。
        • 不可以设置长宽
      • inline-block
        • 不用独占一行
        • 但是必须是方形，如果宽度不够自己的内容不会换行。
        • 可以设置长宽
      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>
<body>
    <div>DIV元素</div>
    <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p>
    <p><select><option>下拉框</option></select><span>你猜左边是什么元素</span></p>
</body>
</html>

    • 按内容分类（html5新增的分类方式）

      参考https://www.w3.org/TR/html5/dom.html中3.2.4.2. Kinds of content节

  • HTML默认样式

    • 默认样式的意义
      • 省事
      • 但是每个浏览器都会有默认样式，这个带来不统一的问题！
    • 使用CSS Reset来统一
posted @ 2018-12-22 21:39  麦兜爱学习  阅读(157)  评论(0)  编辑  收藏  举报