html个人笔记

HTML

1.1常用编辑器

dreamweaver、sublime、webstorm、Hbuilder、vscode

1.2 浏览器内核

分为渲染引擎和JS引擎

渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机

JS引擎：JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果

• IE: Trident
• Firefox: Gecko
• Chrome: Webkit 到 Blink
• Safari: Webkit
• Opera: Presto 到 Webkit 到 Blink

1.3 标签

<!-- 四类八种 -->
    <b>粗体</b><strong></strong>
    <i>斜体</i><em></em>
    <s>删除线</s><del></del>
    <u>下划线</u><ins></ins>
<img src="图片路径" alt="出错显示信息">
<a href="跳转链接" target="目标窗口的弹出方式">文本或图像</a>
<!-- 锚点定位 -->
    <a href="#one"></a>
    <p id="one">段落</p>
<ul>
	<li></li>
	<li></li>
</ul>

1.4 表格

<table align="center" border="1" cellspacing="0" cellpadding="10" width="900">
        <caption>年中工资报表</caption>
        <thead>
            <tr>
                <th colspan="2">区域办事处</th>
                <!-- <th>岗位</th> -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">abc</td>
                <td>abc</td>
            </tr>
            <tr>
                <!-- <td>abc</td> -->
                <td>abc</td>
            </tr>
        </tbody>
    </table>

1. 合并单元格的步骤是？
   
   1.先判断是跨行(rowspan)还是跨列(colspan)
   
   2.把属性名和合并的行数写在第一个要合并的单元格上
   
   3.把多余的单元格注释掉
2. table布局的缺点是？
   
   a.太深的嵌套,比如table> tr> td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
   
   b.灵活性差,比如要将tr设置border等属性, 是不行的，得通过td
   
   c.代码臃肿,当在table中套用table的时候， 阅读代码会显得异常混乱
   
   d.混乱的colspan与rowspan,用来布局时，频繁使用他们会造成整个文档顺序混乱。
   
   e.不够语义化

1.5 表单

<!--
        action 提交的地址
        method 提交的方式
        name 表单名字
     -->
    <form action="https://www.baidu.com" method="GET" name="form1">
        <!--
        label 标记标签 (获取焦点 label for与input id)
        input 控件标签 size 长度
     -->
        <div>
            <label for="user">姓名</label>
            <input type="text" id="user" value="默认值">
        </div>
        <!-- 密码框 -->
        <div>
            <label for="pwd">密码</label>
            <input type="password" id="pwd" size="30">
        </div>
        <!--
            单选框，name一样具有单选效果
            默认单选框内容:
            checked="checked"
            checked=true
            checked
         -->
        <div>
            <input type="radio" name="sex" checked><span>男</span>
            <input type="radio" name="sex"><span>女</span>
        </div>
        <!-- 多选框 -->
        <div>
            <input type="checkbox" checked><span>1</span>
            <input type="checkbox"><span>2</span>
            <input type="checkbox" checked><span>3</span>
        </div>
        <!--
            组合标签
            默认选择内容，selected，同checked
         -->
        <div>
            <span>家庭住址</span>
            <select name="" id="">
                <option value="">石家庄</option>
                <option value="" selected>迁安</option>
            </select>
        </div>
        <br>
        <!-- row 长 cols宽 -->
        <div>
            <span>多行文本框</span>
            <textarea name="" id="" cols="30" rows="7"></textarea>
        </div>
        <br>
        <input type="reset" value="重新设置">
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
    </form>

1.6 HTML5

<header>头部标签</header>
    <!-- 导航标签 -->
    <nav>
        <ul>
            <li><a href="#">导航标签链接1</a></li>
            <li><a href="#">导航标签链接2</a></li>
        </ul>
    </nav>
    <section>小节标签</section>
    <section>
        <!-- 侧边栏标签aside -->
        <aside>
            <ul>
                <li> <a href="\"></a> 侧边栏</li>
            </ul>
        </aside>
    </section>
    <section>
        <!-- 文章标签 -->
        <article></article>
    </section>
    <footer>尾部标签</footer>
    <!-- 进度条标签 -->
    <progress max="600" value="100"></progress>

1.7 HTML5-form

<form action="#" method="GET" name="form-1">
        <!-- h5新增选择框 -->
            <span>选择</span>
            <input type="text" list="l1">
            <datalist id="l1">
                <option value="op3"></option>
                <option value="op4"></option>
                <option value="op5"></option>
            </datalist>
        <button>h5普通按钮</button>
        <section>
            <!--
                placeholder：占位符
                required：不能为空
                autofocus：自动获取焦点
                autocomplete：自动完成
            -->
            <label for="user">姓名</label>
            <input type="text" id="user" name="user" placeholder="占位符" required autofocus autocomplete="off">
        </section>
        <section>
            <!-- maxlength -->
            <label for="pwd">密码</label>
            <input type="password" id="pwd" name="pwd" placeholder="占位符" maxlength="6" minlength="3">
        </section>
        <!-- 新增的table属性 -->
        <section>
            <label for="">邮箱</label>
            <input type="email" autocomplete="off">
        </section>
        <section>
            <label for="">地址</label>
            <input type="url" name="" id="">
            <input type="color">
        </section>
        <section>
            <label for="">搜索框</label>
            <input type="search" placeholder="输入搜索内容">
        </section>
        <section>
            <label for="">时间</label>
            <input type="time" name="" id=""><br>
            <label for="">日期</label>
            <input type="date" name="" id=""><br>
            <label for="">月份</label>
            <input type="month" name="" id=""><br>
            <label for="">周</label>
            <input type="week" name="" id="">
        </section>
    </form>

1.8 HTML5-media

<!--
        控件：controls
        循环：loop
        静音：muted
    -->
    <audio src="" controls loop="loop" muted="muted"></audio>
    <audio controls>
        <source src="">
    </audio>
    <video src="" controls loop="loop" muted="muted" width="200" height="300"></video>
    <!-- video双标签，同audio -->