对于html与css常用标签的记录

对于html与css常用标签的记录

    Html常用标签
     

<titile>设置网页标题（浏览器上方标签栏）</titile><hr />定义一条水平线<br />换行<h1>定义标题 h1~h6逐级（字号和重要性）递减</h1><p align="设置对齐方式">段落文本</p>

 

             align属性：

                     默认 left左对齐  

                     center居中对齐

                     right右对齐

      

---

<img src="图片地址" alt="不能显示时的替换文本" title="鼠标悬停信息"/>

   

    width  图像宽度   像素

    height 图像高度   像素   一般宽或者高只设置一个，另一个会等比例变化

    border 图像边框宽度  数字

    vspace 顶底部空白  垂直边距  像素

    hspace 左右侧空白  水平边距

 

    绝对路径  指带盘符的路径

    相对路径  ../指上一文件夹  /指下一文件夹

 

   

<em>特殊显示文本</em>倾斜标记<div>区块布局</div><span>行内标记  特殊显示 文本</span><ul>无序列表<li>名</li>...</ul><ol>有序列表</ol><dl>解释列表<dt>解释标题</dt><dd>解释文本</dd></dl>

表单

<form action="服务器地址" method="get保密性差 数据量限制/post保密性好 无数据量限制" name=”表单名”>  <input type="text文本 password密码 button按钮 radio单选按钮 checkbox多选框 reset重置按钮 file文件上传 submit提交按钮" name="输入类型名"  value="显示值" 见P143 /><textarea>定义多行文本框</textarea><select>定义下拉列表，需要有列表项<optgroup>可分多个组进行选择
<option>选项</option>
</optgroup></select></form><a href="跳转目标" target="_self原窗口打开"  _blank 新窗口打开>超链接</a>

链接伪类 一般应用于鼠标链接的悬浮样式，一般放置于css样式的属性当中。

a: link{  }表示为未访问的样式属性

a: visited访问后  一般应用相同样式

a: hover  鼠标经过悬停样式

锚点链接   即跳转目标 href 变为#id名   再定义一个元素id与其相同 点击此超链接 即会跳转到指定地方
 

块元素 <div>,<h1>~<h6>，<p>,<ul>,<ol>,<li>行内元素<span>,<em>,<del><a>,<strong>

 

行内元素只可以定义左右外边距

元素转换属性 display

inline 此元素显示为行内元素

block 此元素显示为块元素

inline-block 此元素显示为行内块元素，可设置宽高，不独占一行

none 隐藏元素，不显示

行内元素具有块元素特性，可以设置宽高

块元素具有行内元素的特性，不独占一行

---

 常用特殊字符，放置于标签的内容之内，防止与标签内的定义发生冲突，使用时要注意末尾的分号

空格      

<          &lt;

>          &gt;

---

CSS样式属性

 

CSS样式 放于head标签中

外链式：

<link rel="stylesheet" type="text/css" href="引用外部文件的相对地址" />

内嵌式：

<style type="text/css">css表单样式</style>

 

    标记选择器   将页面内同一种标记制定统一样式 标记名为标签 如body  p

   

    类选择器  定义一类名的样式  类名第一个字符不能用数字 并且严格区分大小写 

   

    id选择器       用#id名来指定样式

   

    通配符选择器   *   匹配页面中所有元素 

 

    标签指定选择器    标签名 . 类(Class)名

 

    后代选择器      外标记 内标记  中间用空格分隔

 

    并集选择器    多个名组成一起定义样式

 

    选择器中属性的值与定义的属性值单位之间不允许出现空格

    text-属性   设置文本属性

   

    css的继承性   不可被继承的属性{

       边框属性 border

       边距属性 padding内边距     margin外边距

       背景     background

       定位

       宽 高    width  height }

border-style边框样式

 一值 四边

 二值 上下/左右

 三值 上/左右/下

 四值 上/右/下/左

    none无

    solid单实线

    double双实线

    dashed虚线

    dotted点线

   

    权重   id>class>标记选择器

    在CSS选择器中加!important 具有最大优先级

   

    常用font-weight:normal正常或者是bold加粗来定义文本   

 

background:url();背景图像地址

background-position：控制背景图像位置

background-attachment：scroll图像随页面滚动

background-color:transparent;背景透明

background-repeat:背景图像平铺

默认   repeat 水平竖直方向

no-repeat 不平铺

repeat-x  沿水平方向

repeat-y  沿竖直方向

 

fixed 固定背景图像

 

 

某个块元素的背景往往在css样式中进行定义background:url() no-repeat;

 

text-align只适用于块元素

text-indent:2em;首行缩进2单位

          

.classname:hover{

#鼠标悬浮属性设置悬浮变换背景

background:url();

}

    float：left ；right ；none不浮动

    clear：left ；right；both全部     清除浮动    避免浮动对元素的影响

   

    overflow:hidden;对父元素应用    清除浮动      详情见P185

    postion:    P189定位模式

 

 

console.log(“在控制台输出信息”)

 

定义函数function name( ) {  }