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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

前端4期杰

初级黑马

  • 黑马币:15

  • 帖子:5

  • 精华:0

[学习交流] 新人笔记技术帖

© 前端4期杰 初级黑马   /  2019-4-20 01:38  /  680 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

Html 常用标签:
标题标签( 双标签 )<h1></h1> 到 <h6></h6>
段落标签( 双标签 )<p> </p>
线标签 (单标签)<hr />
强制换行标签(单标签)<br />
布局标签( 双标签 )<div></div>和<span></span>
图片标签 <img src=”图片路径 ” />
超链接标签( 双标签 )<a href=”文件路径”></a>

常见的文本修饰标签(小标签)
加粗标签:<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签:<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签:<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签:<u>单纯的加粗</u>   <ins>语义化强调</ins>

路径:
同级路径 : 文件(html文件)和目标文件在同一个目录文件下面平级存在,可以直接书写目标文件名称
下级路径 : 文件(html文件)和存放目标文件的父级是平级存在,可以先书写目标文件的父级名称+/+目标文件名称
上级路径 :存放文件(html文件)的父级和存放目标文件的父级是平级关系,可以直接以 ../ 表示上一级去查找目标文件路径;
绝对路径:以web站点根目录为参考基础的目录路径,

常用的特殊字符 : 空格&nbsp;、小于号&lt;、大于号&gt;、        版权&copy;


表格 : table嵌套tr,tr嵌套多个td,tr表示行,td单元格我们也可以认为是列;
table表示整体;tr表示行;td表示列;th表示首行,默认加粗加黑居中

表格的常见属性:
宽:width;   
高:height;   
边框:border,如果设置border=0是没有边框;
对齐方式:align  取值left(居左)、center(居中)、right(居右);设置表格在网页中的水平对齐方式;
单元格和单元格之间的距离:cellspacing
单元格内容到单元格边框的距离:cellpadding

table单元格合并
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
列表:
无序列表:一对<ul></ul>标签嵌套若干对<li></li>标签
有序列表:一对<ol></ol>标签嵌套若干对<li></li>标签
自定义列表:一对dl标签嵌套多对的dt标签和dd标签,dt表示我们要描述的标题,dd是描述的内容  一个dt可以对应多个dd;



表单 :
input控件:文本框 type=”text”
           密码 type=”password”
           单选按钮:type=“radio”
           复选按钮:type=“checkbox”
input按钮组:提交按钮:<input type=“submit” />;
              重置按钮:<input type=“reset” />;
          图片按钮:<input type=“image“ src=”图片路径” />
下拉列表:  一对select标签嵌套多对的option标签

         



Css作用
Css的引入方式:
行内式 将样式用style属性添加给标签,在标签的开始   标签身上书写
内部样式:书写在head标签里面,title标签下面,  以一对style标签包裹
外部连接:新建一个.css文件 然后用单标签link标签配 合自己的3属性书写在head标签里面进行调用
Css选择器:
标签选择器 :以标签名称命名的选择器,可以把将页面中所有的同类元素(该标签)全部选中
               类选择器:在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义; 然后在html里面哪个标签需要,就在开始标签敲空格class=“类名称”进行调用
          Id选择器:在css里面用 “  #  ”   +  id名称 +{ css键值对 } 进行样式定义;:然后在html里面哪个标签需要,就在开始标签敲空格id=“id名称”进行调用;
         通配符选择器:用一个 * 号表示选中了所有的标签
常见的文字控制属性:文字大小 font-size
                    文字字体 font-family
                   字体加粗样式 font-weight
                   字体风格 font-style
                   文字颜色 color
                   文字居中显示text-align:center;
                   文本行高line-height
                   首行缩进text-indent
复合选择器 :
后代选择器:父级 + 空格+子级元素{ css键值对}
Css里面一个空格表示后代关系
           子元素选择器 :只能选择嵌套关系的父子关系得到元素,也就是嵌套的第一层元素,一个大于号“>”表示选中子级;
           交集选择器:直接在标签选择器后面紧跟着书写类选择器或者id选择器即可;
           并集选择器:样式一致的盒子如果单独设置样式需要书写多次,我们可以把样式相同的盒子只写一个样式,用英文的逗号隔开即可
盒子的实体化三属性:
宽 width
高height
背景  background
标签显示模式:
块元素 :独自占一行;可以设置宽高并且生效;如果不设置宽度width     就默认显示为100%(父级多宽盒子就多宽);
              行内元素:一行共存多个可以设置宽高,但是不生效;默认宽   度是内容撑开;
              行内块元素:一行共存多个,默认宽高由内容撑开,但是可以控制固定的宽度和高度和外边距,内边距。
三种显示模式之间的转换
通过设置display属性的不同取值实现相互转换:
将元素转化为块级元素:display:block;
将元素转化为行内元素:display:inline;
将元素转化为行内块元素:display:inline-block;
单行文字文本垂直居中:
设置文字的行高line-height等于盒子的自身高度;

背景属性background
背景颜色: background-color
背景图片: background-image
背景平铺: background-repeat  
背景位置:background-position:

0 个回复

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