• 【幻化万千戏红尘】qianfengDay25-HTML基础学习:


    Tomcat:服务器

    免费

    主要运行B/S程序

    目录说明:

    bin:执行文件

    lib:第三方的jar包

    webapps:发布的项目

    网络程序结构:

    1、B/S

    2、C/S

    HTML:超文本标记语言 (HyperText Markup Language)

    超文本:包含音频、视频、图片等内容

    Html主要用来做网页(描述信息),后缀名:.html或.htm

    HTML的语法规则:

    1、不区分大小写

    2、由固定标签组成(不允许自定义标签)

    3、标签有开始也有结束

    4、属性的值都得用双引号

    5、标签允许嵌套使用

    常用标签:

    <html>:html文档的标记

    <head>:头标签

    <title>:网页的标题

    <body>:网页的正文内容

    <h1>-<h6>:内容的标题,从大到小

    <ol>:有序标签 属性:type:设置序号的类型 start:设置起始的数字 子标签:<li>:描述列表的每一项

    <ul>:无序列表 子标签:<li>:描述列表的每一项

    <p>:段落

    <br/>:换行

    <hr/>:横线

     空格

    <strong>:加粗

    <input>:用户交互标签

    type属性常用的值:

    1、text:文本框

    2、password:密码框

    3、button:按钮

    4、radio:单选框

    5、checkbox:复选框

    6、submit:提交按钮

    7、reset:重置按钮

    <table>:表格   属性:border:设置边框

    <caption>:表格的标题

    <tr>:行

    <th>:列名

    <td>:列

    跨行:rowspan

    跨列:colspan

    CSS:层叠样式表 (Cascading Style Sheets)

    主要就是设计HTML5的样式效果

    使用方式:

    1、外部样式,写成css文件

    2、网页内部,主要写在head

    3、标签内部,style

    CSS语法组成:

    选择器 {属性名称:值;}

    CSS的选择器的分类:

    1、标签 标签名

    2、class #类名

    3、id .id值

    例子:

    p{color:Blue;}

    当前页面的p标签的内容的颜色为蓝色

    <title>表单的学习</title>

    <style type="text/css">

    #btnrs{

    margin-left:40px;

    }

    </style>

    </head>

    <body>

    <form align="center" action="" method="post">

    <table>

    <tr>

    <td><lable>用户名:</lable><input type="text" name="uName"/></td></tr>

    <tr><td><lable>密   码:</lable><input type="password" name="upsw"/></td></tr>

    <tr><td><lable>意见:</lable><textarea rows="5"></textarea></td></tr>

    <tr><td align="center"><input type="submit"  value="登陆"></input>

    <input type="reset" id="btnrs" value="重置"></input></td></tr>

    </table>

    </form>

    </body>

    <lable>姓名:</lable><input type="text"/><br/>

    <lable>密码:</lable><input type="password"/><br/>

    <label>请选择你的性别:</label>

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

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

    <input type="radio" name="sex">未知</input><br/>

    <label>请选择你喜欢的电视:</label>

    <input type="checkbox">葫芦娃</input>

    <input type="checkbox">黑猫警长</input>

    <input type="checkbox">红高粱</input>

    <input type="checkbox">大宅门</input><br/>

    <label>请选择你的家乡</label>

    <select>

    <option>广东</option>

    <option>广西</option>

    <option>湖南</option>

    <option>湖北</option>

    <option selected="selected">河南</option>

    <option>山东</option>

    <option>山西</option>

    <option>河北</option>

    </select>

    <table id="tb" align="center" border="2">

    <caption id="cap">1606座位表</caption>

    <tr >

    <th>第一列</th>

    <th>第二列</th>

    <th>第三列</th>

    <th>第四列</th>

    <th>第五列</th>

    </tr>

    <tr class="tr1">

    <td>周忠箱</td>

    <td>周忠箱</td>

    <td>周忠箱</td>

    <td>周忠箱</td>

    <td>周忠箱</td>

    </tr>

    <tr class="tr2">

    <td>洪健栩</td>

    <td>洪健栩</td>

    <td>洪健栩</td>

    <td>洪健栩</td>

    <td>洪健栩</td>

    </tr>

    <tr class="tr3">

    <td>陈俊余</td>

    <td>陈俊余</td>

    <td>陈俊余</td>

    <td>陈俊余</td>

    <td>陈俊余</td>

    </tr>

    </table>

    <table border="1">

    <tr><th><th>姓名</th><th colspan="2">QQ号</th></tr>

    <tr><td rowspan="3">神话人物</td></tr>

    <tr><td>嫦娥</td>

    <td>11111111</td>

    <td>22222222</td>

    </tr>

    <tr><td>八戒</td>

    <td>66666666</td>

    <td>88888888</td>

    </tr>

    </table>

    <div >

    <img alt="看看" src="4.jpg" width="200px" height="400px"/>

    <h3>鹅</h3>

    <p>鹅,鹅,鹅……</p>

    <p>我是小小鸟,<strong>飞的越来越高</strong></p>

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

    <input type="text" id="txtName"></input><br/>

    <!-- 密码框 -->

    <input type="password" ></input>

    <a href="Study1.html" class="lj">看看</a>

    <p class="spread">This is some text. This is some text.</p>

    <!-- 样式表的第三种形式,用在标签内部 -->

    <a style="text-decoration:blink;color:#00AD00;" href="http://stu.1000phone.net">这是一个神奇的,快来点击……</a>

    </div>

    </p>

    <hr/>

    <img src="4.jpg" alt="美女哦" width="100px" height="100px"/>

    <br/>

    <a href="http://www.baidu.com">百度</a>

    <br/>

    <a href="Study2.html">继续学习</a>

    下周

    Servlet

    HTTP协议

    XML解析

    JSON解析

    正则+注解+考试

  • 相关阅读:
    整理诗稿有感
    穿越校园有感
    晚饭后独自散步有感
    漫步锦里有感
    世界经理人: 三个重要法则让你彻底改变!
    看艺人名字作诗有感
    如果你不想成为默默无闻的人,那么规划生涯
    技术人员PK管理人员的博弈论
    英雄气概
    与君相识天涯有感
  • 原文地址:https://www.cnblogs.com/weigongcheng/p/5766226.html
Copyright © 2020-2023  润新知