黑马程序员技术交流社区
标题:
新人笔记技术帖
[打印本页]
作者:
前端4期杰
时间:
2019-4-20 01:38
标题:
新人笔记技术帖
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站点根目录为参考基础的目录路径，
常用的特殊字符 : 空格 、小于号<、大于号>、 版权©；
表格 : 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:
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2