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:
|
|