黑马程序员技术交流社区

标题: [前端与移动开发] 前端技术帖 [打印本页]

作者: 水三变 时间: 2019-4-18 18:24
标题: [前端与移动开发] 前端技术帖
1.段落标签
2.图片标签img
3.Css的书写位置
4.4.Css的语法：
选中标签{ css属性:属性值:}
5.Html介绍
HTML是超文本标记语言，不是编程语言；
用HTML标签来描述网页元素，比如：链接、图片、文字等；
我们需要将所有的标签放在尖括号“<>” 里面
6.html的基本结构
一对html标签嵌套一对head标签和body标签，head标签嵌套一对title标签，head是给浏览器看的，body是给用户看的；
<html>
   <head>
            <title>标题</tilte>
   </head>
   <body>
            网页主体内容
   </body>
</html>
7.超链接新窗口打开：target:”_blank”
锚点链接
作用：实现页面内部的跳转
锚点链接的添加：
01 确认要跳转的位置标签，然后在标签身上添加id=”id名称”；
02 调用id名称，用超链接a进行调用，<a href=”#id名称”>锚点按钮</a>
8.表格
table嵌套tr，tr嵌套多个td，tr表示行，td单元格我们也可以认为是列；
table表示整体，tr表示行，td表示列；
table 基本结构
<table>
<tr>
<td></td>
   </tr>
</table>
9.列表
列表分为：无序列表，有序列表，自定义列表
10.Input按钮组：
普通按钮：<input type=“button” value=“普通按钮” />  必须要自己设置value值；
提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
11.Css作用
Css就是层叠样式表
作用：进行页面的版面布局和外观样式的美化
通过css书写代码能够将结构html和样式css分离书写，简化代码，提高可阅读性；
Css引入方式（书写位置）
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式
12.Css选择器可以分为：基础选择器和高级选择器（复合选择器）；
基础选择器：标签选择器、类选择器、id选择器
高级选择器（复合选择器）：后代选择器、指定标签选择器、并集选择器
13.background-position:X坐标（水平方向）  Y坐标（垂直方向）；
取值：可以是纯数字，也可以是方位名字（top/bottom/left/right）;
注意：01如果使用方位名字只写一个值另外一个值就默认居中，所以两个值建议都写；
02 取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；
   03 建议大家在书写的时候X和Y轴都书写；
   04 精确的取值和方位名词是可以混合使用的；
背景图片固定：background-attachment: fixed;
14.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:
权重计算
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
      !important  提高权重，有提权的效果，有了样式优先生效；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2