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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 郝少普 中级黑马   /  2012-11-18 13:51  /  1505 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

写的不是很好,个人笔记,拿txt格式写的,貌似有点乱

HTML的结构 <html>...</html>
  <head>...</head>
  <body>...</body>
1.<html></html>
            ——用于标识HTML文档的开始和结束。         

2.<head></head>
         ——定义了HTML文档的头部分3.<body></body>
           ——定义了HTML文档的主体部分,其间放置的是实际要显示的文本内容和其他控制文本显示方式的标签。
<p>代表隔开一行      &nbsp代表空格   <p align=#>...</p> (#=left, center, right)代表文字的对齐   
加入p图片:
表格:
<table border="边框" bodercolor="边框颜色" width="边框宽度" height="边框高度" align="对齐方式" bgcolor="背景颜色" cellspacing="单元格之间的距离" cellpadding="内容与边框的距离">
<tr align="水平对齐方式" valign="竖直对齐方式">
<td Rowspan=“竖直合并单元格”colspan=“水平合并单元格”>…</td>
<td>...</td>

</tr>
<tr>
<td>…</td>
<td>...</td>

</tr>

</table>
表格的属性
Width
height  
Border  
Bgcolor  
Background  
bordercolor Bordercolorlight  
Bordercolordark
  Align  
Cellspacing
单元格属性
1、valign
2、Colspan
3、Rowspan
行属性
1、valign
2、align
3、height

body的属性:bgcolor代表背景颜色的属性
            background表示添加背景图片
            text网页文字默认颜色
            leftmargin左边距
<hn>...</hn>n为1-6随数字的增大文字会变小,特点:全部独占一行。可以添加对齐方式:align
落标记:<p></p>.可以添加对齐方式标记:align
强制换行标记:<br/>
<center></center>是居中标签,可以单独使用
标尺线
        <hr size = # width=# align=# color=#>:设定线宽
设定线长 设定对齐方式 设定线的颜色
<pre></pre>为原样输出标记
<bgsound src="声音文件">放在head里,用来设置声音文件
<embed src="媒体文件" hidden="是否有播放器" autostart="是否自动播放" width="媒体宽度" height="媒体长度">放在body里,用来设置声音文件(含播放器)
<font  face=“字体样式” size=“字体大小” color=“字体颜色"></font>
<i>倾斜文本</i>
     <b>粗体文本</b>
     <u>下划线文本</u>
          <s>删除线文本</s>   <blink>闪烁</blink>  <em>强调</em>  <strong>增强</strong>
<sub>下标</sub> <sup>上标</sup> <marquee direction="滚动方向" width="宽" height="高" bgcolor="背景颜色"  behavior=“滚动方式(alternate来回滚动,scroll默认滚动,slide滚动一次停止)”>滑动</marquee>

有序列表由<ol>和<li>定义:

<ol type=a,A,I,i,1>
   
<li>sports</li>
       
<li>drink</li>
       
<li>friends</li>

</ol>
   

<ul type:circle,square,disc>
   
<li>sports</li>
       
<li>drink</li>
       
<li>friends</li>

</ul>
<!--注释-->
<dl>
<dt></dt>
<dd></dd>
</dl>
<a href="网址#点" target="_blank,_self">可以点击的内容</a>
相对路径写在BODY里,"../"表示上一级

锚点连接:
<a name="定义好的点"></a>
<a href="#定义好的锚点">要点击的</a>
<img src="图片名称以及后缀名" border="加边框宽度" align="水平对齐方式" alt="" width="" height="" >


<form>
输入框:<input type="text" value="你好">
密码输入框:<input type="password">
单选默认:<input type="radio" checked="checked" name="123">
单选:<input type="radio" name="123">
多选默认:<input type="checkbox" checked="checked">
多选:<input type="checkbox">
浏览:<input type="file">
按钮:<input type="button" value="按钮">
提交按钮:<input type="submit" value="提交">
重置按钮:<input type="reset" value="重置按钮">
下拉列表:<select>
          <option></option>
          <option></option>         
          </select>
大文本框:<textarea cols="宽" rows="高">
          </textarea>
</form>
<html>超文本标记语言

css:层叠样式表(就是需要某些标签在HTML里多处实现同一种属性,CSS可以将属性和属性值只写一遍。标签就是选择器)
选择器:{属性1:值1;属性:值2}
外部样式:
链接式:link rel="stylesheet" type="text/css" href="css地址"
导入式:<style type="text/css">
        @import url("css地址")
        </style>
内部样式:<style type="text/css">
        选择器{属性1:值1;属性:值2}
        选择器{属性1:值1;属性:值2}
        </style>
         任何一个标签都可以作为选择器
行内样式:<标签 style="属性:属性值;">


行内样式优先级最高!!



选择器:标签选择器;定义:标签{属性1:值1;属性2:值2;}  使用:标签使用方式
        类别选择器:.a{属性1:值1;属性2:值2;}使用:<标签 class="a">
        ID选择器:定义:#a{属性1:值1;属性2:值2;}  使用:<标签 id="a">
        伪类选择器:定义:a:link{color:颜色;}
  
CSS的属性:COLOR颜色;
           font-family字体样式;
           font-size 数字px 字体大小;
           font-weight:bold bolder lighter normal 数字 文字粗细;
           font-style:oblique 斜体;
           line-height:数字PX 行距;
           letter-spacing:数字px 字距;
           word-spacing:数字px 词距;
           text-align:left right center 对齐方式;
           text-decoration:blink闪动 line-through删除线 none underline下划线 overline上划线 文本修饰;
           text-indent:数字px 文本缩进;
           body{background-color:背景颜色;
           background-image:url(图片地址)插入图片 ;
           background-repeat:repeat重复 no-repeat不重复;
           background-position:top bottom left right 数字px数字px 位置;
           background-attachment:fixed scroll背景限制;
                }
           border:边框大小px;
           padding-left:上下px 左右px内边距;
           margin-left:外边距;


           li{border-bottom-color:边框颜色;
           border-bottom-style:dashed虚线 dovted点线 double双线 solid实线 线形状;
           border-bottom-width:think thick 数字px 边框粗细
              }
           8


           ul{list-style-image:url(图片地址);
              list-style-position:inside;
              list-style-type:lower-greek;
              list-style:none 去掉;
             }
         
           DIV是独立块状模型
           
           div{width;height;background-color;float:left浮动到指定位置,只占块的空间;clear:left清除浮动,视其它DIV无浮动;padding;margin;}
           
<span></span>是无意义的标签
!CSS:定义 链接 使用!
!css  background-image背景填充;background-position调位置!
!边距:padding-left;margin-left!
!.a:hover{}代表鼠标接触变色!
!.选择器 选择器{}!
!padding-left:上下px 左右px内边距;
margin-left:外边距;
同一行应该浮动,先浮动的优先级高!
!div要设置宽高!
           

评分

参与人数 1技术分 +1 收起 理由
古银平 + 1 赞一个!

查看全部评分

1 个回复

正序浏览
值得学习ing!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马