A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© a悠哉悠哉a 初级黑马   /  2019-4-20 18:24  /  1653 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

前端技术

Web标准
由于各个浏览器的内核不同,所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致‘’
结构标准HTML:页面的基本结构的搭建;
表现标准 CSS:页面的样式美化
行为标准 javascript:实现页面的交互
HTML知识:常用的布局标签
一、双标签:有始有终,又开始和结束两个标签组成,结束标签比开始标签多一个/;
1、标题标签(双标签):分为6个档次分别是h1到h6;
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2、段落标签
P 一般用来盛放一段文字也就是段落
3、图片标签img
img标签通过自身原则性属性src找到我们的图片所在位置,将图片引入到我们的html页面;
4、div和span
div大标签,主要用来做网页的布局,独自占一行;
span小标签,也是用来做布局的,但是一般用来放小图标或者特殊效果的文字,一行可以存在多个;
5、常见的文本修饰标签(小标签)
加粗标签:<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签:<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签:<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签:<u>单纯的加粗</u>   <ins>语义化强调</ins>
6、超链接a(重点)
概念
双标签  <a href=”文件路径”></a>
二、单标签:  不需要包含内容,直接在开始标签最后面添加一个结束的符号/;
例如:<br /> <hr /> <img src=””/>       
1、base标签:单标签,base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间;
<base target=“_blank”>
常用的特殊符号是:空格&nbsp;、小于号&lt;、大于号&gt;、版权&copy;

三、表格
table嵌套tr,tr嵌套多个td,tr表示行,td单元格我们也可以认为是列;
table表示整体,tr表示行,td表示列;
列表
四、列表分为:无序列表,有序列表,自定义列表
无序列表:ul嵌套li,li里面可以放任何标签,ul里面不要嵌套其他标签只放li标签;
默认的列表样式我们在css里处理;
有序列表:ol嵌套li标签;
自定义列表:dl嵌套dt和dd,dt表示我们要描述的标题,dd是描述的内容
五、表单(重点)
作用:搜集用户信息
组成部分:提示文本、表单、表单域(总体的提交数据的标签)组成  
        文本框 type=”text”     <input type="text" >
        密码 type=”password”  <input type="password">
        单选按钮:type=“radio” , <input type="radio" >想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类;
        复选按钮:type=“checkbox”,<input type="checkbox" >也可以设置同样的name名称,但是 不会影响多选的效果;
        单选按钮   <input type="radio" checked="checkde“  >
复选按钮   <input type="checkbox" checked="checkde" >
        提交按钮:<input type=“submit” />;
重置按钮:<input type=“reset” />;
图片按钮:<input type=“image“ src=”图片路径” />   src属性必须书写查找图片路径;
文件域名:<input type=“file” /> 上传文件使用;
button标签按钮:<button>我也是按钮</button>
        文本域textarea
textarea 双标签,可以控制宽高,自带的两个属性cols和rows不使用,后期我们会使用css进行对应;       
        select下拉列表:一对select标签嵌套多对的option标签
        <select>
                <option></option>
                <option></option>
        </select>
css知识:
Css的引入方式分为3种:行内式,内部样式(内联样式),外部样式Css的引入方式分为3种:行内式,内部样式(内联样式),外部样式。
CSS样式规则(键值对规则)
第一步确定给谁加样式 ---- 选择器
第二部书写  {}
第三步 在{}里面书写css键值对规则 {属性1:属性值1;属性2:属性值2;}
Css选择器可以分为:基础选择器和高级选择器(复合选择器);
             基础选择器:标签选择器、类选择器、id选择器
高级选择器(复合选择器):后代选择器、指定标签选择器、并集选择器
链接的伪类
四种状态:
      a:link        未访问的链接(访问前)
      a:visited    已访问的链接(访问后)
      a:hover      鼠标移动到连接上(鼠标经过)
      a:active      选定的链接(按下鼠标的时候)
盒子的实体化三属性(重点)
宽 width
高height
背景  background
实际开发中我们只要将实体化三属性设置好就不会出现兼容问题
三种显示模式之间的转换(强制记忆)
通过设置display属性的不同取值实现相互转换:
将元素转化为块级元素:display:block;
将元素转化为行内元素:display:inline;
将元素转化为行内块元素:display:inline-block;
Css的三大特性:
?       层叠性(覆盖性)、继承性、优先级;
层叠性(覆盖性)
层叠性(就近原则):如果一个标签书写的样式重叠冲突了,后写的css样式会把先写的样式覆盖掉,样式不冲突的话就不会层叠;
继承性:
有一些css属性子级是可以继承父级的,一般文在控制属性都会被继承,a标签继承color除外,需要单独设置(因为a独特显示,不会继承父级的color,我们需要单独设置);
能被继承的文字属性:font-size、color、font-weight、font-style、text-indent,text-indent、line-height、text-align: center;、text-decoration:、font-family:       

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马