Java Web学习之html学习

Posted 听路走歌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java Web学习之html学习相关的知识，希望对你有一定的参考价值。

HTML
1，概念：最基础的网页开发语言  超文本标记语言
          标记语言：由标签构成的语言<标签名称>如html xml
          标记语言不是编程语言


2，快速入门：
          语法：
    1，html文档后缀名 .html 或者.htm
    2,标签分为
         1，围堵标签:有开始标签和结束标签 如<html> </html>

    3,标签可以嵌套
          需要正确嵌套，不能你中有我，我中有你
     错误示范：<a><b></a></b>
     正确示范：<a><b></b></a>

    4,在开始标签中定义属性，属性由键值对构成，值需要用引号（单双都可）引起来


    5，html标签不区分大小写，建议使用小写。

基础代码块：

<html>

    <head>
        <title>前端基本知识学习</title>
    </head>
    
    <body>
        <font color='red'>hello word </font><br/>
        
    </body>

</html>

3，标签学习：
    1，文件标签：构成html最基本的标签
        *html：html文档的根标签
        *head：头标签，用于指定html文档的一些属性，引入外部的资源
        *title：定义标题的标签
        *body：体标签
        *<!DOCTYPE html>: html5定义该文档是html文档
    
    2，文本标签：和文本有关的标签
    *注释：<!-- 注释内容 --> 
    *<h1> to <h6> ：标题标签 数字越大，字体越小
    *<p>： 段落标签
    *<br>:换行标签
    *<hr>：显示一条水平线
              属性：
           color：颜色
           width：宽度
           size：高度
           align：对齐方式
                    center：居中
                    left：左对齐
                    right：右对齐
    *<b>：字体加粗
    *<i>：字体斜体
    *<center>文本居中（已过时）
    *<font>：字体标签 字体颜色，大小等待
        属性：
                color：颜色
                size：大小
                face：字体样式
    属性定义：
        *color
         rgb（值1，值2，值3） 值得范围（0-255）用16进制表示
         如（#FF00FF）
         值1值2值3 值的范围转为16进制为：00-FF之间

        *width
        数值：width=‘20’，数值单位默认为px（像素）
        数值：%：占比相对于父元素的比例

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马程序员简介</title>
</head>
<body>
<h1>
  公司简介
</h1>
<hr color="#ffd700">
<p>
<font color="#FF0000">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村成立的一个解决当前软件开发技术飞速发展，而企业招不到人才困扰的高端培训机构。"中关村黑马程序员训练营"已成长为行业"学员质量最好、课程内容最深、企业最满意"的3G移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员所有学员均是大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年青人。黑马程序员的学员筛选制度，远比很多90%以上的企业招聘流程更为严格。
</p>
<p>
任何一名学员想成功入学"黑马程序员"，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等全方位测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术研发最新的技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>

<hr color="#ffd700">

<font color="gray" size="2">
  <center>
    江苏传智播客教育科技有限公司<br>
    版权所有Copyright 2006-2021&copy,All RightReserved 苏ICP备1876746
  </center>
</font>

</body>
</html>

3，图片标签：
        img：展示图片
               属性：
            *src：指定图片的位置
    展示图片一般使用相对路径
    ./:代表当前目录  不写的话默认为当前目录
    ../：代表上一级目录

    4,   列表标签：
        *有序列表
        ol：定义有序列表
        li：定义有序列表的项
        属性：type：定义排列形式  start 定义从哪个开始进行排序
        *无序列表
        ul：定义无序列表
        li：定义无序列表的项

    5，链接标签：
        <a>定义一个超链接
        属性：
        href：指定访问资源的URL（url：统一资源定位符）
        target：指定打开资源的方式
            target="_self"默认在当前页面里打开
            target="_blank"在空白页面打开
        可以打开其他标签 如： <a href="列表标签.html">列表标签</a>
        mailto：发送邮件： <a href="mailto:1363625113@qq.com">联系我们</a>
        img 和a标签结合使用： <a href="http://www.baidu.com"><img src="picture/view.jpg"></a>
    
    6，div和span:结合css使用
        span：文本信息在一行中显示，行内标签 内联标签
        div:每一个div占满一整行，自动换行动作 块级标签

    7，语义化标签
        html5为了提高程序的可读性，提供了一些标签
        如header  页眉
        footer  页脚        需要结合css使用

    8，表格标签：
        *table：定义表格
        属性：
        width：宽度
        border：边框，可以定义，也可以不定义
        cellpadding：定义内容和单元格之间的距离
        cellspacing：定义单元格之间的距离，如果指定为0，则单元格之间的线合为一条
        bgcolor：背景色
        align：对齐方式 如center
        *tr：定义行
        bgcolor：背景色
        align：（对齐方式）

        *td：定义单元格
        *colspan：合并列
        *rowspan：合并行

        *th：定义表头单元格
        *caption：表格标题
        *thead:表示表格的头部分
        *tbody：表示表格的体部分
        *tfoot：表示表格的脚部分


案例：旅游网站首页

1，确定使用table确定布局
    2，如果某一行只有一个单元格，则使用<tr><td></td></tr>
    3,  如果某一行有多个单元格，使用表格嵌套
        <tr>
               <td>
            <table></table>
               </td>
        </tr>

9，表单标签：用于采集用户输入的数据，用于和服务器进行交互
    使用的标签:form 用于定义表单，可以通过form定义一个范围，范围代表采集用户数据的范围
        form的属性：action：指定提交数据的URL  如：<form action="">
                 method:指定提交方式
                分类：一共七种，两种比较常用
                get：
                1，请求参数会在地址栏中显示，封装在请求行中
                2，请求参数长度会有限制
                3，不太安全                

                post：
                1，请求参数不会在地址栏中显示，会封装在请求体中
        表单项中的数据要想被提交，必须指定其name属性
                2，请求参数长度没有限制
                3，较为安全

    10，表单项标签：
        *input：可以通过type属性值改变元素展示样式
             *type属性：
            text：文本输入框 默认
              *placeholder：指定输入框提示信息，当输入框的内容发生变化，会自动清空提示信息
            password：密码输入框
            radio：单选框
              注意：
              1，要想让多个单选框实现单选效果，则多个单选框的name属性值必须一致
              2，一般会给每一个单选框提供value属性，指定其被选中后提交的值
            checkbox：复选框
              1，一般会给每一个复选框提供value属性，指定其被选中后提交的值
              2，checked属性，可以指定默认值 如：checked=“checked”
            file：文件选择框
               如：图片：<input type="file" name="file">
            hidden：隐藏域，用于提交信息 （看不到）
            按钮：
                   sumbit：提交按钮，可以提交表单
                   button：普通按钮
                   image: 图片提交按钮   *src属性指定图片路径
           *label：指定输入项的文字输入  label的for属性一般会和input的id属性对应，会让input输入框获取焦点。
         如：<label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
            
        *select：下拉列表
            子元素：option 指定列表项

        *textarea：文本域
            cols：指定列数，每一行有多少个字符
            rows：默认有多少行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面e</title>
</head>
<body>
    <!--定义表单-->
    <form action="#" method="post"></form>
        <table border="1" align="center" width="500">
          <tr>
            <td><label for="username">用户名</label></td>
            <td>  <input type="text" name="username" id="username"></td>
          </tr>
          <tr>
            <td><label for="password">密码</label></td>
            <td>  <input type="password" name="password" id="password"></td>
          </tr>
          <tr>
            <td><label for="email">Email</label></td>
            <td>  <input type="email" name="email" id="email"></td>
          </tr>
          <tr>
            <td><label for="name">姓名</label></td>
            <td>  <input type="text" name="username" id="name"></td>
          </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td>  <input type="text" name="tel" id="tel"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td> <input type="radio" name="gender" value="male">男
                     <input type="radio" name="gender" value="female">女</td>
            </tr>
            <tr>
                <td><label for="bir">出生日期</label></td>
                <td>  <input type="date" name="email" id="bir"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>  <input type="text" name="email" id="checkcode">
                      <img src="img/verify_code.jpg"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册">按钮</input></td></td>
            </tr>
        </table>
</body>
</html>

html学习告一段落，以后每学一段，一个笔记。原创不易，请多多支持！

 

 

以上是关于Java Web学习之html学习的主要内容，如果未能解决你的问题，请参考以下文章

Java Web学习之CSS学习

java学习之IO对象流

python学习之web中的html基础

Java学习之国际化程序

java学习之JDBC

Web学习之html