自学WEB

HTML

1、标题标签    <h1></h1>  h1-h6

2、段落标签   <p></p>

3、字体标签   <font color="red" size="5" face="楷体"></font>

4、图片标签   <img> 属性 src="文件路径"，height=“高度” width="宽度" alt="找不到图片显示的内容" title="鼠标放到图片上显示的内容"

5、超链接      <a href="要去的链接"></a>  target=""  //target的属性为_blank时在新窗口打开href所指的界面,target的属性为_self时用href所指的页面替换当前页面

6、列表：

    1>无序列表：<ul type="disc实心圆||square方块||circle空心圆"></ul>  <li></li>自定义列表项

    2>有序列表：<ol start="从什么开始" type="" reversed="reversed"></ol>  //reversed="reversed"对列表进行降序

type：

1	默认值。数字有序列表。（1、2、3、4）
a	按字母顺序排列的有序列表，小写。（a、b、c、d）
A	按字母顺序排列的有序列表，大写。（A、B、C、D）
i	罗马字母，小写。（i, ii, iii, iv）
I	罗马字母，大写。（I, II, III, IV）

7、表格标签<table></table>   border="表格边框的宽度" width="表格的宽度" hight="表格的高度" align="单元格内容的水平对齐方式，left||center||right"

                                            bgcolor="背景颜色" cellspacing="单元格之间的空白" cellpadding="单元格与其他内容之间的空白"

8、<frameset></frameset>不能和body同时使用  使用cols确定行数 rows确定列数 

<frame></frame> src确定页面的路径,target确实需要显示的页面在何处显示

9、表单

<form action="#" method="get">
隐藏字段：<input type="hidden" name="id" value="" /><br />//隐藏字段，数据会被放送到服务器但不会再浏览器显示。一般用于发送一些隐藏的信息
用户名：<input type="text"  name="username"  size="40px" maxlength="20" /><br />

placeholder="请输入用户名" 效果：

       <!--初始值value="王晓寒"，只读--readonly="readonly" //让文本框只能读不能写-->
密     码：<input type="password" name="password" required="required"//必须输入密码/><br />
确认密码：<input type="password" name="repassword" required="required"//必须输入确认密码/><br />
性别：<input type="radio" name="sex"value="男"/>男 //radio单选框
 <input type="radio" name="sex" value="女" checked="checked"//默认选择女 />女<br />
爱好：<input type="checkbox" name="habit" value="钓鱼"/>钓鱼 //checkbox复选框
 <input type="checkbox" name="habit" value="篮球"/>篮球
 <input type="checkbox" name="habit" value="足球" checked="checked"//默认选择足球/>足球<br />
头像：<input type="file" name="file" /><br />
籍贯：<select name="from">//select下拉框
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected" //默认选择上海这个复选框>上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍：
<textarea name="jianjie">

</textarea><br />
提交按钮：<input type="submit" value="注册"/><br />
普通按钮：<input type="button" value="register" /><br />
重置按钮：<input type="reset" />//reset重置按钮
</form>

10、&nbsp 是空格

CSS

1、div     div级模块单独占一行

2、css链入css文件   <link rel="stylesheet" type="text/css" href="css/demo.css"/>

3、选择器

     1>元素选择器：将HTML标记作为选择器，

例如：h1{

color:red;

                  }

     2>id选择器：

       例如：#id{

        color:red;

                 }

     3>类选择器：.类名

       例如：.myclass{

                        color:red;

                }

     4>属性选择器：标签名[标签属性=“标签属性值”]

       例如：input[type="text"]{

                color:red;

                }         

     5>层级选择器：选择div下的p标签

       例如：div p{

                       color:red;

               }              

 4、CSS的样式：

1>边框和尺寸 border，width，height

2>布局float，clear       float:left 元素向左浮动||float:right 元素向右浮动||float:none 元素不浮动

                                         clear:left不允许左侧有浮动元素||clear:right不允许右侧有浮动元素||clear:both不允许两侧有浮动元素

        3>display的属性

           

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

5、CSS的盒子模型

JS

1、JavaScript的引入

1>内部引入：<script type="text/javascript">
                    </script>

2>外部引入：<script src="1.js" type="text/script" charset="utf-8"></script>

2、获取元素：document.getElementById("id").value

3、location.href='xxx.html'跳转到xxx.html页面