1、页面重构师（像素级还原,无限接近100%的还原度）(htmlcss)(pc端移动端页面) DOCTYPE（标准模式）(IE6、7浏览器的淘汰)：指定一个标准在浏览器上运行，不写的话不同的浏览器运行的结果不一样。 结构：指的是html HTML4：格式语法等规范不明确，可以随意使用 块级元素：每一个元素独占一行，会自动换行。 绝对路径：是外部的引入，由/或者http开头的为绝对路径。 h1~h6：标题标签，数字从1-6标题从大到小 header：用于表示页面或某个区域的头部 table：表格的标签，代表整个表格 form：常用于定义一个表单的范围 常见type属性10种： 具有交互性表单： 按钮表单： 特殊表单: 特殊属性：
前端之客户端学习1
学习小目标
2、初级前端工程师(javascript的基本语法)(要能够做页面上JS的所有效果)
3、中级前端工程师(node.js可以做后台前端，模块化)
4、高级前端工程师（各种前端框架，reacyVue移动端小程序）HTML(以及常用标签)
1、结构、样式和行为分别指什么？
样式：指的是CSS
行为：指的是javascript2、HTML4、XHTML和HTML5的区别？
XHTML：制定了规范，但是没有增加新的内容，不被程序员认可和使用
HTML5：由几个浏览器公司先研发出来，后由W3C收回去管理，里面新行了内容并制定了规范，新的内容包含html.css.javascript方面。3、节点树
4、描述一个HTML网页基本组成部分以及每个标签的作用。
5、什么是行内元素和块级元素？
行内元素：元素不独占一行，会在一排显示。6、什么是相对路径和绝对路径？
相对路径：是代码所在整个文件夹内部的一个引入，由./和.//或者省略./开头的路径。7、常用的HTML标签由哪些？
a ：超链接，用来跳转到其它页面，或者跳转到整个页面的指定位置
p ：段落标签，通常用于一段文字，写两个p标签会自动换行，并有html默认的一个间距
strong：用于强调某个内容的标签，被强调的元素会加粗加黑
span：仅用于给一小段文本添加样式，可以跨越字符，不会换行
ul ：无序列表
ol：有序列表
li：列表项
div：表示页面中的一块区域
img：用于引入图片的标签
br：空元素，强制换行的标签
pre：预格式化元素，保留文本在源代码中的格式特殊标签
1、语义化的标签
nav：用于表示导航栏
aside：用于表示跟主题周围相关的附加信息
article：表示文章或其他可独立页面存在的内容
section：用于表示一个整体的一部分主题
footer：用于表示一个整体的一部分主题用于表示页面或某个区域的底部2、为什么要语义化？
3、表格标签
caption：表格的标题
thead：表头，表格每列的内容名称
tbody：表格主体，表格的主要内容
tfoot：表尾，一般很少用，表格的结尾
tr：代表表格的每一行
th：用于表头的单元格，字体会加粗
td：表格的单元格，用于分列
rowspan：跨行，相当于上下单元格合并
colspan：跨列，相当于左右单元格合并4、表单标签
* 属性:action 提交到地址，默认提交到当前页面
* method 表单的提交方式:
* 常用的有两种：get和post，默认是get请求:
* get请求栏会携带提交的数据，而post不会；
* get请求安全性低，post较高;
* get请求有数据大小的限制，而post没有限制;
input : 可以输入内容或选择内容的部分
select:下拉输入项5、什么是表单？表单的作用是什么？
6、input标签type属性不同作用不同。
以下是一些示例代码
1、一般表格的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格示例</title> </head> <body> <table border="1"> <caption>前端基础考试成绩</caption> <thead> <tr> <th>班级</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>得分</th> </tr> </thead> <tbody> <tr> <td rowspan="2">3年1班</td> <td>喜羊羊</td> <td>男</td> <td>4</td> <td>80</td> </tr> <tr> <td>美洋洋</td> <td>女</td> <td>3</td> <td>70</td> </tr> <tr> <td>3年2班</td> <td>灰太狼</td> <td>男</td> <td>6</td> <td>85</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">总分</td> <td>235</td> </tr> <tr> <td colspan="4">平均分</td> <td>78</td> </tr> </tfoot> </table> </body> </html> 2、简单的表单实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <form action="#" method="POST"> <fieldset> <legend>注册</legend> <div> <label for="username">用户名：</label> <!--加readonly变只读，还可以提交服务器，只能用在输入框--> <!--disabled禁用，不能提交服务器--> <input id="username" type="text" placeholder="请输入用户名"> </div> <div> <label for="pwd">密码：</label> <input id="pwd" type="password"> </div> <div> <label for="phone">手机号：</label> <input id="phone" type="number"> </div> <div> <label for="email">邮箱：</label> <input id="email" type="email"> </div> <!--单选--> <div> <label>性别：</label> <input id="male" name="gender" type="radio"><label for="male">男</label> <input id="female" name="gender" type="radio"><label for="female">女</label> </div> <!--多选--> <div> <label>选择使用的编辑器：</label> <input id="#1" type="checkbox"><label for="#1">vscode</label> <input id="#2" type="checkbox"><label for="#2">webstorm</label> <input id="#3" type="checkbox"><label for="#3">pycharm</label> <input id="#4" type="checkbox"><label for="#4">sublime</label> </div> <!--选择文件--> <div> <label for="">上传头像：</label> <input type="file"> </div> <div> <label>所在的城市：</label> <select><!--加multiple，为多选--> <option>成都</option> <option>北京</option> <option>上海</option> </select> </div> <!--带有选择的输入框--> <div> <label>选择会的语言：</label> <input list="language" type="text"> <datalist id="language"> <option>HTML</option> <option>CSS</option> <option>Java</option> </datalist> </div> <div> <label for="mark">备注：</label> <textarea id="mark" cols="30" rows="10"></textarea> </div> <!--按钮--> <div> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="没有功能的普通按钮"> <img src="../buttonSure.jpg" alt=""> <input type="image" src="../buttonSure.jpg"> <!--隐藏表单，传递数据--> </div> </fieldset> </form> </body> </html> 总结
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
