欢迎光临
我的个人博客网站

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> 

html个人笔记

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 --> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » html个人笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏