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 -->