黑马程序员_HTML学习

来源：互联网发布：笔记用什么软件编辑：程序博客网时间：2024/04/27 23:09

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

一、HTML

1、html是描述网页长是什么样子，有什么内容的一个文本，即侧重内容展示。

用浏览器查看网页,同一个网页，不同的浏览器显示的有可能不一样。

浏览器有：IE6、IE7、IE8、火狐、等。

静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器。

动态页面：服务器没有浏览者要看的页面，而是服务器动态生成的html页面发给浏览器，动态语言的服务器端可以用asp.net、php、java等编写。

2、页面格式

<head>我的第一个网页</head> <%--头部信息，不会在页面中显示--%>

<%-- 编写显示内容html标签--%>

<p>我是程序员 </p> <%--分段--%>

</body>

</html>

3、文字格式：<br>回车、<p>分段、<center>居中、<b>粗体、<h>标题字体不同显示、<font>字体设置，如颜色、大小

4、url、超链接：

url:表示资源在网络中的地址。如：www.baidu.com、ftp://192.168.2.23/b.zip;

超链接：<a href=“http://127.0.0.0.1/a.html”>a网页</a>，超链接中也可以放置图片。打开行新窗体:target

5、相对路径：“/”表示网站的根目录，"../"表示父目录,"../../"表示父目录的父目录，不写表示相对于当前路径的目录。

6、<img src="mm.jpg" border="0" width="60" height="100" alt="漂亮妹妹">显示图片，可以设置图片的width宽度和height高度，边框border，显示文字alt。最好先设置图片大小

7、列表、表格

有序列表：<ul><li>张三</li><li>李四</li><li>王五</li></ul>

无序列表：<ol><li>张三</li><li>李四</li><li>王五</li></ol>

表格：

<table>

</table>

<table>创建表格

<tr>创建行：属性有align水平对齐,对应的值是left,center,valign;valign垂直对齐top,middle,bolltom

<td>创建单元格：也有tr的属性，还可以用rowspan,colspan就行多跨行，跨多列.

表头的td可以用th代替，表示表头粗体，居中显示，最好用<thead>代替<tr>

9、表单

<from>

//存放<input>、<textarea>、<select>等表单元素

</from>

<input>元素：type 控件的类型;submit(提交按钮)、button(普通按钮)、checkbox(复选框)、file(文件选择框)、

hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置)、text(文本框)。

<select>下拉列表：<option>项，size显示几项,selected某项被选中。

textarea:多行显示文本。cols列数、rows行数

filedset:GroupBox效果相同

10、样式表、css

css主要用来美化界面。分为：元素内联、页面嵌入和外部引用三种方式。

元素内联：直接将样式写人元素的style属性中，样式没有可复用的场合。

页面嵌入：在head中加入，用于页面引用样式的控件,样式可以复用。

外部引用：将css内容写入css后缀的文件,适用于多个页面共享css。

样式选择器：标签选择器应用于标签、class选择器自己写的样式，使用的标签引用，多个之间用逗号分开、id选择器应用于id标签，标签+class选择器

关联选择器、组合选择器、伪选择器是为标签的不同状态设定不同的样式。

计量单位：px(像素)、百分比、em相对单位

backgroud-color背景颜色。

border-style：边框风格。

display:元素是否显示。none不显示，block块显示前后换行，inline行显示。

cursor：鼠标在元素上时候显示的光标图标。

11、div层、块span

div:将内容放到层中，就以将这些内容当成一个整体进行处理，会影响布局。

span：只是吧一段内容定义到一个整体进行操作，但不影响布局和显示。

常用如下：

<html>
<title>用户登录界面</title>

</head>
< body style="padding-top: 100px; padding-left: 400px;">
    <form id="form1" runat="server" method="post">
    <div>
        <table>
        <tr>
                <td colspan="2" style=" padding-left:100px;">
                      <h3>登录信息填写</h3>
                </td>

            </tr>
            <tr>
                <td>
                          登录名:
                </td>
                <td>
                    <input type="text" id="txtName" class="txt"/>
                </td>
            </tr>
            <tr>
                <td>
密          码:
                </td>
                <td>
                    <input type="password" id="txtPwd" class="txt"/>
                </td>
            </tr>
            <tr>
                <td>
确认密码:
                </td>
                <td>
                    <input type="password" id="txtPwdAgain" class="txt"/>
                </td>
            </tr>
            <tr>
                <td>
邮      件:
                </td>
                <td>
                    <input type="text" id="txtEmail" class="txt"/>
                </td>
            </tr>
            <tr>
                <td>
确认邮件:
                </td>
                <td>
                    <input type="text" id="txtEmailAgain" class="txt" />
                </td>
            </tr>
            <tr>
                <td>
性        别:
                </td>
                <td>
男：<input type="radio" name="sex" value="男" checked="checked" />
女：<input type="radio" name="sex" value="女" />
                </td>
            </tr>
            <tr>
                <td>
城          市:
                </td>
                <td>
                    <select id="city">
                        <option>上海</option>
                        <option>合肥</option>
                        <option>北京</option>
                        <option>南京</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
兴趣爱好:
                </td>
                <td>
                    <input type="checkbox" name="hobbies" />看书
<input type="checkbox" name="hobbies" />旅游
<input type="checkbox" name="hobbies" />听音乐
</td>
            </tr>
            <tr>
                <td>
                   
                </td>
                <td style=" padding-left:40px;">
                     <input type="submit" value="提交" onclick="return validate()" />   <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </div>
    </form>
< /body>
< /html>

-------Windows Phone 7手机开发、.Net培训、期待与您交流！ -------