zoukankan      html  css  js  c++  java

  • C#基础之HTML笔记6

                                    ——杨中科老师.Net视频笔记

    HTML基础

        在vs中新建一个名为HTML基础的解决方案，并在解决方案中添加一个web项目，选择ASP.NET WEB 应用程序，取名：WebApplication1，然后在项目中添加文件即可。

    文件结构：

    HTMLPage1.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    </head>

    <body>

    <img src="1.gif" width="50" height="50"><br>aa<font color="red">bbb</font>

    <br />

    <table border="1">

    <thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>

    <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>

    <tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>

    <tr><td>jim</td><td align="right">30</td><td>男</td></tr>

    <tr><td >j<font color="red">oh</font>n</td><td>30</td><td>男</td></tr>

    </table>

    <form action="Register.aspx">

    <input type="text" />

    <input type="checkbox" />

    <input type="radio" name="radio1"/>男

    <input type="radio" name="radio1"/>女

    <br />

    <!--<input> 是主要的表单元素，type 的可选值：submit （提交按钮）、button （普通按钮）、

    checkbox （复选框）、 file （文件选择框）、 hidden （隐藏字段）、image（图片按钮）、

    password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）

    -->

    <input type="button" value="注册" />

    <input type="submit" value="提交一下子！" /><br />

    <input type="file" />

    <!--使用file，则form的enctype必须设置为multipart/form-data,method属性为post-->

    <input type="image" src="images/reg.jpg" />

    <input type="password" />

    <input type="text" size="100" value="33333" maxlength="5" readonly="readonly" /><br />

    <input type="text" size="50" value="33333" maxlength="5" readonly="readonly" /><br />

    <input type="checkbox" name="checkbox1" checked="checked" />

    <input type="checkbox" name="checkbox1"/>

    <br />

    <select>

    <option value="1">北京</option>

    <option value="2">天津</option>

    <option selected="selected" value="3">上海</option>

    </select>

    &nbsp;&nbsp;

    <!--如果size属性大于1就是ListBox,multiple="multiple"设置按下Ctrl键可以多选-->

    <select size="2" multiple="multiple">

    <option>北京</option>

    <option>天津</option>

    <option>上海</option>

    </select>

    <br /><br />

    <select name="country" size="10">

    <optgroup label="Africa">

    <option value="gam">gambia</option>

    <option value="mad">Madagascar</option>

    <option value="nam">Nameibia</option>

    </optgroup>

    <optgroup label="Europe">

    <option value="fra">Framce</option>

    <option value="rus">Russia</option>

    <option value="uk">UK</option>

    </optgroup>

    <optgroup label="North America">

    <option value="can">Canada</option>

    <option value="mex">Mexico</option>

    <option value="usa">USA</option>

    </optgroup>

    </select>

     

    <textarea cols="100" rows="10">请在这里输入内容</textarea>

    </form>

    </body>

    </html>

    HTMLPageFieldSet.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    </head>

    <body>

    <!--将一些控件框起来-->

    <fieldset>

    <legend>常用</legend>

    <input type="text" />

    <input type="text" />

    <input type="text" />

    </fieldset>

    </body>

    </html>

    HTMLPageLabel.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    </head>

    <body>

    姓名：<input type="text" />

    婚否：<input type="checkbox" />

    <br />

    <hr />

    <label for="name">姓名：</label>

    <input id="name" type="text" />

     

    <label for="ma">婚否：</label>

    <input id="ma" type="checkbox" />

    </body>

    </html>

    Exercise1.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title>用户登录</title>

    </head>

    <body>

    <table border="1" align="center" valign= "middel">

    <tr><td><label for="username">用户名：</label></td><td><input id="username" type="text"/></td></tr>

    <tr><td><label for="password">密码：</label></td><td><input id="password" type="password"/></td></tr>

    <tr><td><label for="authcode">验证码：</label></td><td><input id="authcode" type="text"/>

    <img alt="验证码" title="验证码" src="../images/authcode.jpg" /></td></tr>

    <!-- alt 是在图片不显示时，显示在图片点位符中的文字；title是图片的提示信息-->

    <tr><td colspan="2"><input type="checkbox" id="remember" /><label for="remember">记住密码</label></td></tr>

    <tr><td colspan="2" align="center"><input type="submit" value="登录" /></td></tr>

    </table>

    </body>

    </html>

    Exercise1_1.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title>注册协议</title>

    </head>

    <body><center>

    <textarea cols="50" rows="10">

    注册本网站，要遵守相关的法律，不能做违背网络安全的活动！

    </textarea>

    <p>

    <a href="exercise2_1.htm">同意</a>&nbsp;&nbsp;<a href="exercise2_2.htm">不同意</a>

    </p>

    </center></body>

    </html>

    Exercise2_1.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    </head>

    <body>

    <table align="center">

    <tr><td><label for="username" >用户名：</label></td><td><input type="text" id="username" /></td></tr>

    <tr><td><label for="province" >省份：</label></td><td>

    <select id="province">

    <option>北京</option>

    <option>天津</option>

    <option>上海</option>

    </select>

    </td></tr>

    <tr><td colspan="2">

    <fieldset>

    <legend>爱好</legend>

    <input type="checkbox" id="ds" /><label for="ds">登山</label>

    <input type="checkbox" id="lq" /><label for="lq">篮球</label>

    <input type="checkbox" id="yy" /><label for="yy">游泳</label>

    </fieldset>

    </td></tr>

    </table>

    </body>

    </html>

    HTMLPagediv.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    </head>

    <body>

    <!--将内容放到层中，就可以将这些内容当成一个整体进行处理，比如整体隐藏，整体移动等-->

    <p>akdsalk</p>

     

    <p>asldkfalk</p>

     

    <div>你好，大家好！</div>

     

    <p>lakdfalk</p>

     

    <p>alkdsfa</p>

     

    <!--div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不影响该布局-->

    <br />

    span:

    ab<span style="background-color:#6666CC;">好好<br/>学习<input type="text"/></span>12

    <br /><br /><br /><br />

    div:

    ab<div style="background-color:#6666CC;">好好<br/>学习<input type="text"/></div>12

     

    </body>

    </html>

    HTMLPageCSS1.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title>內联CSS</title>

    <style type="text/css">

    input{background-color:Yellow;border-color:Green;text-align:left;}

    p{color:Blue;}

    </style>

    </head>

    <body><center>

    <input type="text" value="123" style="background-color:Silver;border-color:Highlight;text-align:center;" /><br />

    <input type="text" value="123" /><br />

    <input type="text" value="123" /><br />

    <input type="text" value="123" /><br />

    <input type="text" value="123" /><br />

     

    <div style="background-color:Purple;border-color:Green;text-align:left;">你好</div>

    <p>你好！</p>

    </center></body>

    </html>

    HTMLPageCSS2.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title>引用CSS</title>

    <link type="text/css" rel="Stylesheet" href="css1.css"/>

    </head>

    <body>

    <input type="text" />

    <input type="file" />

    <p>ffffffffffff</p>

    <p>dddddddddddd</p>

    </body>

    </html>

    css1.css

    input

    {

    background-color:Yellow;border-color:Green;text-align:left;

    }

     

    p

    {

    color:Blue;

    }

    HTMLPageCSS3.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    </head>

    <body style="cursor:url(../images/Arrow.cur)">

    <div style="border-color:Red;border-width:2px;border-style:double;display:block">

    你好哇！

    </div>

    <a href="#">测试</a>

    <div style="cursor:pointer;color:Blue"><u>指针风格</u></div>

    <ul style="list-style-type:none">

    <li style="cursor:help">aaaa</li>

    <li >bbbb</li>

    </ul>

    </body>

    </html>

    HTMLPageCSS4.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    <style type="text/css">

    .waring{background:Yellow;}

    .highlight{font-size:xx-large;cursor:help}

     

    input.accountno{text-align:right;color:Red}

    label.accountno{font-style:italic}

     

    #username

    {

    font-size:xx-large;

    }

     

    P strong{background:Yellow;}

     

    h1,h2,input{background:Green;}

    </style>

    </head>

     

    <body>

    <!--class选择器-->

    class选择器:<br/>

    <div class="highlight">你好</div>

    <div class="highlight waring"; style="background:Green;">谢谢你</div><br />

    <div class="waring">大家好</div>

    <br /><hr /><br />

    <!--标签+class选择器-->

    标签+class选择器:<br/>

    <input class="accountno" type="text" value="aaaaaaaaaa" /><br />

    <label class="accountno">bbbbbbbbbbbbbbb</label> <br/>

    <hr />

    <!--class选择器-->

    class选择器:<br />

    <input id="username" type="text" value="idididididid" /><br />

    <hr />

    <!--关联选择器-->

    关联选择器:<br />

    <strong>glglglglgl</strong><br />

    <p><strong>glglglglgl</strong></p>

    <hr />

    <!--组合选择器-->

    组合选择器:

    <h1>你好！</h1>

    <h2>谢谢！</h2>

    </body>

    </html>

    HTMLPageCSS5.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <title></title>

    <link type="text/css" rel="Stylesheet" href="link.css"/>

    </head>

    <body>

    <!--伪选择器的样式表文件-->

    <a href="HTMLPageCSS1.htm">测试</a>

    <a href="HTMLPageCSS2.htm">测试</a>

    <a href="HTMLPageCSS3.htm">测试</a>

    <a href="HTMLPageCSS4.htm">测试</a>

     

    </body>

    </html>

    Link.css

    /*伪选择器的样式表文件*/

     

    A:visited{TEXT-DECORATION:none}

    A:active{TEXT-DECORATION:none}

    A:link{TEXT-DECORATION:noee}

    A:hover{TEXT-DECORATION:underline}
  • 相关阅读:
    Java多线程系列 JUC锁03 公平锁(一)
    Java多线程系列 JUC锁02 互斥锁ReentrantLock
    JDBC课程3--通过ResultSet执行查询操作
    JDBC课程2--实现Statement(用于执行SQL语句)--使用自定义的JDBCTools的工具类静态方法,包括insert/update/delete三合一
    JDBC_通过DriverManager获得数据库连接
    JDBC课程1-实现Driver接口连接mysql数据库、通用的数据库连接方法（使用文件jdbc.properties）
    [终章]进阶20-流程控制结构--if/case/while结构
    MySQL进阶19--函数的创建(举例)/设置mysql的创建函数的权限/查看(show)/删除(drop) / 举4个栗子
    MySQL进阶18- 存储过程- 创建语句-参数模式(in/out/inout-对应三个例子) -调用语法-delimiter 结束标记'$'- 删除/查看/修改-三个练习
    SQL进阶17-变量的声明/使用(输出)--全局变量/会话变量--用户变量/局部变量
  • 原文地址：https://www.cnblogs.com/luowei010101/p/2179180.html
Copyright © 2011-2022 走看看