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)