文档章节

JavaWeb前端开发知识总结(HTML)

S
 Sunmos
发布于 2017/05/13 00:19
字数 1737
阅读 0
收藏 0
点赞 0
评论 0

JavaWeb前端开发知识总结(HTML)

1. HTML技术

1.1 HTML概述

HTML是用来描述网页的一种语言;
HTML指的是超文本标记语言 (Hyper Text Markup Language) ;
HTML不是一种编程语言,而是一种标记语言 (markup language) ,标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页.

1.2 HTML标签

  • HTML标记标签通常被称为HTML标签 (HTML tag).
    • HTML 标签是由尖括号包围的关键词,比如 ;
    • HTML 标签通常是成对出现的,比如;
    • 标签对中的第一个标签是开始标签,第二个标签是结束标签;
    • 开始和结束标签也被称为开放标签和闭合标签.
  • HTML规范:
    • 格式: <标签 属性1=“属性值1” 属性2=“属性值2”…>内容题

1.2.1 排版标签

段落标签(P标签):

特点:段前和断后自动换行
格式:<p align="center">段落内容</p>
align属性:对齐方式,取值可以是:center/right/left

换行标签(br标签):

<br/>换行:源码的换行被浏览器忽略成一个空格而不能实现换行,使用br标签代表换行.

特殊字符:

空格:&nbsp;
>  :  &gt;
< : &lt;

1.2.2 超链接标签

作用:跳转指定资源,资源可以是:图片/文件/网页.
格式:<a href="指定资源路径" target="跳转方式">名称</a>
属性:
    href:指定跳转的资源路径;
    target属性:
        _blank:新开一个网页标签页;
        _self:在本身网页打开,覆盖之前的网页;
注意:href属性和标签的内容体同时存在才能有超链接效果;
扩展:href=""和href="#"区别:
    href="":会刷新页面;
    href="#":只是在地址栏添加了一个#,不会刷新页面;
<a>标签绑定事件一定要将href="#",绑定事件,可以通过事件的返回值控制链接是否跳转.

1.2.3 图片标签

作用:在网页中展示图片;
格式:<img src="本地路径图片或者互联网图片"/>
相对路径:
    1.同一级目录     -- <img src="1.png" />或者<img src="./1.png" />
    2.下级目录       -- <img src="img/1.png" />或者<img src="./img/1.png" />
    3.在上一级目录   -- <img src="../1.png" />
    4.在上一级目录的photo文件夹内:  -- <img src="../photo/1.png" />

1.2.4 表格标签

表格创建步骤:
    1.<table></table>
    2.<table><tr></tr></table>
    3.<table><tr><td>内容</td></tr></table>
<table>标签:
    作用:定义一个表格
    属性:
        边框—border:数字;
        align:对齐方式,可取值为center/right/left;
<tr>标签:
    作用:定义表格中的行;
单元格<td><th>:
    <th>:用于表格的表头(字体会居中加粗),表格的每列的说明;
    <td>:一般单元格,用于展示具体数据;
    跨行属性:rowspan="数字"  -- 数字代表跨几行;
    跨列属性:colspan="数字"  -- 数字代表跨几列;
    跨行跨列步骤:
        1.确定合并方式,是跨行还是跨列;
        2.确定合并几行或者几列;
        3.删除被设置合并属性外的其他需要被合并的单元格;

1.3 表单

1.3.1 input标签

type属性:
    - text:type的默认值;
    - password:密码框;
    - radio:单选框,checked属性设置默认选中checked="checked",通过name属性进行分组(name相同就是同一组),
        没有被选中不会提交,后台获取不到name属性,不能设置readonly属性;
    - checkbox:复选框,checked设置默认选中checked="checked",通过name属性进行分组(name相同就是同一组),
        不能设置readonly属性;
    - button:普通按钮,点击事件默认会提交表单;
    - submit:提交表单按钮;
    - reset:重置表单按钮(相当于重新加载网页);
    - file:文本选择框;
    - hidden:隐藏输入框,一般设置不需要显示的数据;
name属性:
     表单元素名称,代表提交之后的参数名,对于radio/checkbox,name可以使用来分组;
value属性:设置<input>标签的默认值
    1.对于radio/checkbox类型一定要设置value属性,value代表的是该标签的提交的值;
    2.对于按钮类型,设置按钮显示的名称;
readOnly只读属性:
    readOnly="readOnly",对于radio/disabled/按钮类型没有效果;
disabled禁用属性:disabled="disabled";

1.3.2 select标签

作用:下拉选择框,配合<option>标签使用
常用属性:
    name属性:表单名称以及提交后的参数名;
    multiple:设置下拉选项可以多选--multiple="multiple"
    readOnly:不能设置只读;
    disabled禁用:不能设置禁用;
子标签:<option>标签
<option><option/>之间的值是浏览器显示在下拉列表中的内容,而value属性中的值是表单被提交时被发送到服务器的值,如果没有指定value属性,选项的值将设置为<option>标签中的内容.
    属性:
        value:对于选项的值;
        selected:设置默认选中--selected="selected"

1.3.3 textarea标签

<textarea>标签:文本域,可以输入大量文字,可以自动换行
属性:
    name:标签名称以及提交后的参数名;
    cols:文本框所占列数;
    rows:文本框所占行数;
    readOnly:只读属性 -- readOnly="readOnly";
    disabled:禁用 -- disabled="disabled";

1.3.4 form标签

作用:提交表单
属性:
    action:提交的地址;
    method:提交的方式, get/post;
      get/post提交表单的区别:
          1.get地址栏有参数显示,post不会再地址栏显示参数(参数是放在了请求体中);
          2.get提交数据不安全(在地址栏显示数据),post相对安全;
          3.get提交的数据有限制大小(地址栏的数据长度有限制),post理论上对提交的数据大小不限制.

2.HTML综合案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册</title>
    </head>
    <body>
        <form action="#" method="post">
            <table border="4" width="500" height="20" align="center">
                <tr>
                    <td align="right" width="100">用户名:</td>
                    <td>
                        <input type="text" name="name" id="name" placeholder="请输入用户名" />
                    </td>
                </tr>
                <tr>
                    <td align="right">密码:</td>
                    <td>
                        <input type="password" name="rpassword" id="rpassword" placeholder="请输入密码" />
                    </td>
                </tr>
                <tr>
                    <td align="right">确认密码:</td>
                    <td>
                        <input type="password" name="rpassword" id="rpassword" placeholder="请确认密码" />
                    </td>
                </tr>
                <tr>
                    <td align="right">性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男" checked="checked" /><input type="radio" name="sex" value="女" /></td>
                </tr>
                <tr>
                    <td align="right">籍贯:</td>
                    <td>
                        <select name="pronvice">
                            <option value="请选择">--请选择--</option>
                            <option value="北京">北京</option>
                            <option value="深圳">深圳</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="成都" selected="selected">成都</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>头像:</td>
                    <td>
                        <input type="file" name="file" id="file" value="" />
                    </td>
                </tr>
                <tr>
                    <td align="center" colspan="2">
                        <input type="submit" name="submit" value="注册" /> &nbsp; &nbsp; &nbsp;
                        <input type="reset" name="reset" value="重置" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

本文转载自:http://blog.csdn.net/l631106040120/article/details/71107690

共有 人打赏支持
S
粉丝 0
博文 34
码字总数 0
作品 0
成都
三,JavaWeb之什么是JavaWeb

但是不要怕,学会JSP,servlet,Java就行了,其他的等开始开发后台了再慢慢一个一个撸过去就行了。下面是装13环节。这么多高大上的技术,必须知道他们的中文名才能装得下去是不?否则请脑补一...

zhanggong ⋅ 2016/01/13 ⋅ 0

做一个完整的Java Web项目需要掌握哪些技术?

最近自己做了几个JavaWeb项目,有公司的商业项目,也有个人做着玩的小项目,写篇文章记录总结一下收获,列举出在做项目的整个过程中,所需要用到的技能和知识点,带给还没有真正接触过完整j...

Deamon Thread ⋅ 2017/12/19 ⋅ 0

java-学习路线

学习路线 java基础 java基础 java界面编程 java API java语法 AWT java IO 面向对象 事件机制 多线程 常见api Swing 网络编程 集合框架 反射注解 数据库开发 SQL基础 JDBC编程 JDBC高级 SQL基...

zhaoliang1131 ⋅ 2017/01/17 ⋅ 0

2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方 ⋅ 2017/12/14 ⋅ 0

Java Web学习计划

--- 本月为入门阶段,从零开始,一步一步的做出一个实用的网站。 深入学习Java语言,初步掌握前端技术,使用JSP和MySQL完成一个简单的网站 第1周 Java高级编程学习目标:
1.深入了解JDK环境...

SVD ⋅ 2016/12/01 ⋅ 0

学习前端开发,一段心路历程,这根本没有速成的方法

     本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们总结成了十条警言,希望能够对你的学习带来一些小的帮助。            希望收藏了我写的文章的你同...

学习web前端 ⋅ 2017/10/21 ⋅ 0

作为一名Java开发工程师需要掌握的专业技能

在学习Java编程完之后,学员们面临的就是就业问题。作为一名Java开发工程师,企业在招聘的时候,也是有一定的标准的。 为了帮助大家更好的找到适合自己的工作,小编在这里分享了作为一名Jav...

嘿你好夏天 ⋅ 2017/11/23 ⋅ 0

学习前端开发,一段心路历程,这个世界根本没有速成的方法

在已经成功的为大家讲解了很多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们...

大数据大佬 ⋅ 06/08 ⋅ 0

JAVAWeb对ajax中get与post的使用

JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息发生变化,而不影响整个页面的话,博主知道的也只用ajax了。...

meiqi0538 ⋅ 04/04 ⋅ 0

结合个人经历总结的前端入门方法

作者:qiu deqing 链接:https://github.com/qiu-deqing/FE-learning 结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面...

SomaLihq ⋅ 2017/01/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kubeflow实战系列:利用TFJob导出分布式TensorFlow模型

介绍 本系列将介绍如何在阿里云容器服务上运行Kubeflow, 本文介绍如何使用TfJob导出分布式模型训练模型。 第一篇:阿里云上使用JupyterHub 第二篇:阿里云上小试TFJob 第三篇:利用TFJob运行...

全部原谅 ⋅ 18分钟前 ⋅ 0

007. 深入JVM学习—老年代

老年代空间的主要目的是用于存储由Eden发送来的对象,一般在经历好几次“Minor GC”还会保存下来的对象,才会被复制到老年代,这样就可以存放更多的对象,同时在老年代中执行GC的次数也相对较...

影狼 ⋅ 19分钟前 ⋅ 0

常见的一些C#开源框架或者开源项目

原:https://blog.csdn.net/qq_27825451/article/details/70666044 Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更......

whoisliang ⋅ 20分钟前 ⋅ 0

设计模式基本原理

刚开始接触编程这行的时候看过设计模式,当时感觉学这些模式没有太大的用处,当时也看不太懂。但是随着慢慢接触这一行,经过一段时间的编程以后,再回过头来看设计模式,发现设计模式的确是太...

王子城 ⋅ 24分钟前 ⋅ 0

阿里云全面支持IPv6!一文揽尽4位大咖精彩演讲

摘要: 自从去年11月以来,阿里巴巴高度重视数据中心的网络改造、云产品改造、应用及网络改造等多个维度,经过半年以来的建设,阿里云已经完成了域名解析等关键产品的分析,现在阿里云已经完...

传授知识的天使 ⋅ 34分钟前 ⋅ 0

windows Android sdk 配置

1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html 2、默认路径安装后,安装完成,开始配置环境变量。 3、打开计算机属性——高级系...

阿豪boy ⋅ 37分钟前 ⋅ 0

bash shell script 简明教程

User <--> bash <--> kernel shell is not kernel or part of kernel various shells: tcsh, csh, bash, ksh find the using shell: echo $SHELL find all the shells: cat /etc/shells what......

mskk ⋅ 39分钟前 ⋅ 0

Service Mesh简史

William Morgan Service Mesh是一个相当新的概念,讲它的“历史”似乎有些勉强。就目前而言,Service Mesh已经在部分企业生产环境中运行了超过18个月,它的源头可以追溯到2010年前后互联网公...

好雨云帮 ⋅ 39分钟前 ⋅ 0

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 52分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 52分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部