java web之html详解

最新推荐文章于 2022-09-15 10:30:30 发布
最新推荐文章于 2022-09-15 10:30:30 发布
阅读量227 收藏
点赞数
分类专栏： java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinqizhe/article/details/98482218
版权

java web

html部分

-<!DOCTYPE html>:声明html版本
-<head>:放置网页的头信息
-<body>:放置网页的内容信息,这些内容都显示在浏览器页面中
    如:

    <!DOCTYPE html>
    <html>
    <head>
        <!-- 告知网页的文字编码 utf-8 -->
        <meta charset="UTF-8">
        <!-- 网页的标题 -->
        <title>Insert title here</title>
    </head>
    <body>
      <!-- 文本内容 -->
    </body>
    </html>

body体中显示文本
    -标题标签/元素:
        <h#>文字<h#>
            (#号取值为1-6;1为最大,6为最小)
            
    -段落元素:
        <p>段落文本</p>
            p节点可以自动换行,且段落间间距更大

    -列表元素:
        <ul>:无序列表,列表元素用
            <ul>
                <li>列表元素</li>
                <li>列表元素</li>
            </ul>
        <ol>:有序列表,列表元素用
            <ol>
                <li>列表元素</li>
                <li>列表元素</li>
            </ol>

    -分区元素:
        <div>:可以说成div层,div块,更多用户做网页布局和网页的内容,按照块来显示
              可以自动换行,行间距不大
        <span>:可以说成行内块,一般用于处理一个大块文字中的部分文字

    -行内元素:
        <i>:用来定义斜体文字
        <b>:用来给文字加粗
        <del>:给文字带有删除线
        <u>:给文字添加下划线
        
    -空格折叠:
        默认情况下,html中的多个空格,多个制表符,多个换行都会压缩成空格

    -文字换行
        <br>:换行,此元素没有</br>
        <br />等同于<br>

body体中显示图像
    -图片元素:
        <img />:显示图片,此元素没有</img>
        属性:
            src:文件的路径
            width:指定图片的宽度
            height:指定图片的高度

    -多媒体元素:
        <embed>:可以显示视频或音频
        属性:
            src:指定播放源
            width:宽度
            height:高度
        <video>:可以播放视频,但视频的格式有约束

<img src="web概述.png" width="100px" height="100px"/>
<embed src="aa.mp4"/>
<embed src="aa.mp3" width="0" height="0"/>

在body体显示表格
    -<table>表格元素:
        border:边框
        width:宽度
        height:高度
        align:对齐方式
        cellpadding:单元格边框与内容之间的距离(可以是固定像素,也可以是百分比)
        cellspacing:单元格之间的距离(可以是固定像素,也可以是百分比)

    -<tr>行元素:
        align:水平对齐方式 left center right
        valign:垂直对齐方式 top middle bottom

    -<td>单元格元素:
        align:水平对齐方式
        valign:垂直对齐方式
        width:宽度
        height:高度
        colspan:列合并
        rowspan:行合并

    -<th>单元格元素(仅代表表头)
    -<thead> 表头
    -<tbody> 表格内容
    -<tfoot> 表尾    

如:
 

   <table border="1" align="center">
   <thead>
    <tr align="center" valign="">
       <th>id</th>
       <th>用户名</th>
       <th>密码</th>
       <th>地址</th>
       <th>年龄</th>
       <th>删除</th>
       <th>修改</th>
    </tr>
   </thead>
   <tbody>
    <tr align="center">
       <td>1</td>
       <td>张三</td>
       <td>zs</td>
       <td>北京亦庄</td>
       <td>20</td>
       <td><a href="#">删除</a></td>
       <td><a href="#">修改</a></td>
    </tr>
    <tr align="center">
       <td>2</td>
       <td>王五</td>
       <td>ww</td>
       <td>北京亦庄</td>
       <td>20</td>
       <td><a href="#">删除</a></td>
       <td><a href="#">修改</a></td>
    </tr>
    <tr align="center">
       <td>3</td>
       <td>李四</td>
       <td>ls</td>
       <td>北京亦庄</td>
       <td>20</td>
       <td><a href="#">删除</a></td>
       <td><a href="#">修改</a></td>
    </tr>
   </tbody>
   <tfoot>
    <tr align="center">
       <td colspan="7">7个单元格合并成一个单元格</td>       
    </tr>
    <tr align="center">
       <td rowspan="2">3</td>
       <td>李四</td>
       <td>ls</td>
       <td>北京亦庄</td>
       <td>20</td>
       <td><a href="#">删除</a></td>
       <td><a href="#">修改</a></td>
    </tr>
    <tr align="center">
       <td>李四</td>
       <td>ls</td>
       <td>北京亦庄</td>
       <td>20</td>
       <td><a href="#">删除</a></td>
       <td><a href="#">修改</a></td>
    </tr>
   </tfoot>
  </table>

在body中显示表单
    用来显示和收集信息,并把收集的信息提交给服务器
    表单由两部分组成
    -<form>元素:
        表单控件元素,用来定义一个表单
        action:表单要提交到哪个目的地(可以是本地,也可以是服务器)
        method:表单要提交的方式
            post提交:可以传递的数据量大,地址栏不显示,安全
            get提交:可以传递的数据量小,地址栏显示,不安全
        enctype:表单提交的编码方式

    -<input type="" name="">表单控件:
         <input type="text" /> 文本框
         <input type="password" /> 密码框
         <input type="radio" /> 单选框
         <input type="checkbox" /> 多选框
         <input type="button" /> 按钮
         <input type="submit" /> 提交按钮
         <input type="reset" /> 重置按钮
         <input type="hidden" /> 隐藏
         <input type="file" /> 文件框
         其他表单控件
         <select ></select>  下拉列表框
         <textarea></textarea> 多行多列的文本框

    type:类型
    <input>元素的属性
        name:名称
        value:值
        maxLength:限制输入字符数
        readonly:设置只读
        
    单选框和多选框的常用属性
        value:值
        name:名称
        checked:设置默认选中

    按钮的属性
        value:按钮上显示的字    

如:

      <div style="text-align:center;font-size:30px;font-weight:bold;">用户登录</div>
      <table border="1" align="center">
      <form action="aa.html" method="post">
        <tr>
           <td>用户名</td>
           <td>
              <input type="text" name="userName" value="张三" />
              <input type="button" value="检查用户名同名"/>
           </td>
        </tr>
        <tr>
           <td>密码</td>
           <td><input type="password" name="userPassword" value="zs" /></td>
        </tr>    
        <tr>
           <td>性别</td>
           <td>
             <input type="radio" name="userSex" value="男" checked="checked" />男
             <input type="radio" name="userSex" value="女" />女
           </td>
        </tr>    
        <tr>
           <td>爱好</td>
           <td>
             <input type="checkbox" name="userHobby" value="读书" checked="checked" />读书
             <input type="checkbox" name="userHobby" value="旅游" />旅游
             <input type="checkbox" name="userHobby" value="学习" />学习
             <input type="checkbox" name="userHobby" value="音乐" />音乐
           </td>
        </tr>    
        <tr>
           <td>头像</td>
           <td>
             <input type="file" name="userHead"  />         
           </td>
        </tr>    
        <tr>
           <td>隐藏数据</td>
           <td>
             <input type="hidden" value="aaa" name="userHide"  />         
           </td>
        </tr>    
        <tr>
           <td>籍贯</td>
           <td>
             <select name="userJIGuan">
               <option value="北京">北京</option>
               <option value="上海" selected="selected">上海</option>
               <option value="广州">广州</option>          
             </select>
           </td>
        </tr>    
        <tr>
           <td>备注</td>
           <td>
             <textarea cols="20" rows="5" name="userComment" ></textarea>
           </td>
        </tr>    
        <tr>
           <td colspan="2" align="center">
             <input type="submit" value="登录"/>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="reset" value="重置"/>
           </td>
        </tr>    
      </form>
      </table>


        
-超链接元素
    分类:
        a标记超链接:
            属性:href="超链接的目的地"
            target="目标的打开方式"
                _blank:在一个新的空白浏览器窗口打开
                _self:在当前的浏览器窗口打开
                其他的frame名字
        a标记锚点:
            定义锚点:
                <a name="自定义的锚点的名字">网页中显示文字</a>
              连接到锚点
                <a href="#锚点的名字">网页中显示的文字</a>

如:

     <!--超链接-->
      <a href="aa.html" target="_blank" >超链接演示</a>
      <!--锚点--><br />
      <a name="maoName">定义一个锚点</a>    
     <a href="#maoName">跳转到锚点的位置</a>


 

幼儿园扛把子丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb HTML
ako881010的博客
11-07 904
1.HTML介绍 1.1.什么是HTML HTML的全称为HyperTextMarkupLanguage，译为超文本标记语言。 超文本，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结...
JavaWeb-HTML
最新发布
weixin_49856572的博客
07-31 150
HTML创建及标签介绍
JAVAWeb-HTML
阿辉爱睡觉的博客
05-29 545
HTML结构 HTML标签 HTML代码是由标签构成的 <body>hello</body> 标签名 (body) 放到 < > 中 大多数标签成对出现 <body> 为开始标签, </body> 为结束标签. 少数标签只有开始标签, 称为 "单标签". 开始标签和结束标签之间, 写的是标签的内容. (hello) 开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
JAVA WEB学习课件及代码详解第二部分
07-07
JAVA的J2EE WEB学习资料，其中包括了学习视频、讲义、笔记、以及练习代码等，适合刚接触JAVA同时需要搭建WEB平台的同学使用。 此为第一部分，包括以下课程内容： 1、day05_JDBC 2、day06_JDBC连接池&JDBCTemplate 3...
java web 开发详解
11-26
Java 的 Web框架虽然各不相同，但基本也都是遵循特定的路数的：使用Servlet或者Filter拦截请求，使用MVC的思想设计架构，使用约定，XML或 Annotation实现配置，运用Java面向对象的特点，面向抽象实现请求和响应的...
JAVA Web之HTML语言PPT
03-22
JAVA Web 开发常用HTML语言详解及实例，包含部分JAVA script的介绍，属于JAVA开发的客户端资料。
Java Web应用详解.张丽(带详细书签).pdf
04-23
动态网站篇深入讲解Servlet、JSP、JavaBean、JDBC数据库连接、数据库连接池等Java Web开发的核心技术。系统框架篇则是以架构设计的高度，讲解搭建网站的三大框架Struts、Hibernate、Sprin9及标签库。项目实战篇详细...
[Java.Web培训视频]_001.HTML常见标签深入详解
07-31
[北京圣思园Java.Web培训视频]_001.HTML常见标签深入详解
JavaWeb之html
west_xia_616的博客
03-21 293
一、HTML概述HTML：Hyper Text Markup Language超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览器程序如何显示Web文档（即网页）的信息，如何链接各种信息。HTML基本结构&lt;html&gt; &lt;head&gt; &lt;title&gt;我的第一个网页&lt;/title&gt; &lt;/head&gt; &lt...
Java Web中 HTML
qq_43609524的博客
05-19 264
web概念概述 Javaweb 使用Java语言开发基于互联网的项目 软件架构: C/S: Client/Server客户端/服务器端 在用户本地有一个客户端程序，在远程有一 个服务器端程序 如 :QQ,迅雷… 优点: 用户体验好 缺点: 开发、安装,部署，维护麻烦 B/S: Browser/Server浏览器/服务器端 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 优点: 开发、安装，部署，维护简单 缺点: 如果应用过大，用户的体验可能会受到影响；对硬件要求
JAVA WEB之HTML
Intelligebce的博客
10-01 252
一、HTML简介 **全称为HyperText Markup Language 译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式，比如字体颜色、大小。。。。 **HTML是最基础的网页语言 **HTML是通过标签来定义的语言，代码都是由标签组成 **HTML文件后缀名为.html或者.htm 不需要编译，直接通过浏览器...
Java Web之HTML
weixin_43215113的博客
07-25 222
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 HTML超文本标记语言 HTML是⽤于创建⽹⻚的语⾔。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。HTML代表超⽂ 本标记语⾔。HTML是⼀种标记语⾔，它具有标记标签的集合。 HTML标签是由尖括号括起来的词，如 <html>，<body> 。标签通常成对出...
JavaWeb之HTML
qq_41911251的博客
12-14 755
HTML 01:初识HTML HTML Hyper Text Markup Language 超文本标记语言 超文本：文字、图片、音频、视频、动画等 W3C标准 World Wide Web Consortium（万维网联盟）是Web技术领域中立性技术标准机构 W3C标准包括： ​ 结构化标准语言(HTML、XML) ​ 表现标准语言(CSS) ​ 行为标准(DOM、ECMAScript) 常见IDE： 记事本 Dreamweaver IDEA WebStorm HTML02:网页
【前端基础1-HTML和CSS】
独上高楼，望尽天涯路。
09-15 159
HTML、CSS基础知识，思维导图总结
JavaWeb（1）之HTML
笑笑不说话
04-05 436
1. HTML
JavaWeb_HTML 汇总
魏宇轩
09-17 953
汇总
JavaWeb——01_HTML
雨一直下
01-12 2468
传智播客-铁男 录制时间：2014.11.11 01-HTML的简介 HTML: HyperText Markup Language,超文本标记语言。文件的后缀可以是html或者htm。 编辑文本 使用浏览器打开（chrome、ie、firefox） code:这是一段<font color="red" size="18">HTML</font>代码。 效果：这是一段HTML代码。 全
Java web xml
07-27
回答: Java Web中的web.xml文件是用来初始化配置信息的，比如Welcome页面、servlet、filter、listener等。然而，web.xml文件并不是必须的，一个Web工程可以没有web.xml文件。当你的Web应用没有使用到这些配置信息时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值