HTML

HTML是超文本标记语言。HTML就 是普通的文本文件,只不过在文本中的内容如果被一些 特殊的标签进行包裹就有了特殊的含义,这些被那些标签标记文本,就成了超文本。

网页的组成

网页的组成

  1. HTML 用于展示需要显示的信息

  1. CSS 用来美化我们写的页面

  1. JavaScript 是页面具有一定的交互效果

根据内容的划分,可以将网页划分为静态页面和动态页面

  • 静态页面就是编写以后在浏览器中不再改变的网页,如HTML ；

  • 动态页面就是可以根据不同的情况显示不同的内容,如jsp,php,动态页面也是在HTML的基础上添加 的一些内容 ；

HTML的结构

  • HTML不需要编译，可以直接用浏览器阅读

  • 扩展名为  .html  或者 .htm

  • 由标签组成

    • 标签不分大小写

    • 单标签 ：如< img/>

    • 双标签 ： 如<p> 双标签 </p>

  • 内容结构

<!-- dtd声明,这个为HTML5的声明--> 
<!DOCTYPE html> 
<!-- 页面的根标签-->
<html>
    <!-- 头标签,一般用于引入脚本,样式导入,设置 编码,定义标题等信息--> 
    <head>
        <!--设置网页编码格式--> 
        <meta charset="utf-8"> 
        <title>Hello World</title>
    </head> 
    <!-- 体标签,设置网页显示内容区域--> 
    <body>中华人民共和国万岁 
    </body>
</html>

HTML中的常用标签

  1. 注释标签    <!--注释内容-->

  2. h 系列         定义标题1-6 ，由大到小，独占一行（不建议使用H1）

  3. p 标签         段落标签,会单独占据一行

  4. hr 标签   分割线标签,显示一条分割线    size属性:水平线的高度

  5. span 标签    显示文本的,不会单独占据一行

  6. font 标签

    1. 设置文本的大小颜色等信息,不会独占一行

    2. size属性:1­ 7,默认是3

    3. color属性:可以是#xxxxxx表示3原色,也可以是 red.blue,green等

  7. b  标签     粗体标签,不会独占一行

  8. i  标签   斜体标签,不会独占一行

  9. br  标签    换行标签

  10. img 标签

    1. 显示图片的标签,不会独占一行

    2. src属性:路径,注意路径问题

    3. alt属性:图片无法显示的时候显示的文字

    4. width属性:设置宽,可以使像素值,也可以是百分比

    5. height属性:设置高,可以使像素值,也可以是百分比

    6. title属性:鼠标移上去后显示名字

  11. a 标签

    1. 超链接标签,不会独占一行

    2. href属性,指定点击后跳转的路径(url),如果需要点击后 没有反应,需要写为: javascript:void(0)

    3. target属性:指定跳转模式,blank表示新建窗口,self表 示当前页,默认是_self

  12. ol  标签

    1. 有序列表,是组合标签,ol内部嵌套li标签

    2. type属性:取值范围,”A”,”a”,”I”,”i”,”1”

  13. ul  标签

    1. 无序列表,是组合标签,ul内部嵌套li标签

    2. type属性:取值范围是,disc(实心圆),circle(空心圆),square(方块)

  14. iframe  标签

    1. iframe 元素会创建包含另外一个文档的内联框架（即 行内框架）。

    2. name属性:指定iframe的名称,如果 a 标签的中的

    3. target 属性值是其 name 属性的时候,点击a标签,对应 的链接内容会出现在 iframe 中

    4. src属性:指的是iframe中显示的内容的连接

    5. frameborder属性:取值为 0(不显示边框) 和 1(显示边框)

    6. scrolling属性:取值为 yes(可以滚动) no(不能滚动)auto(自动)

    7. width属性:表示宽度

    8. height属性:表示高度

table 标签

表格标签,是组合标签,内置有很多子标签

table标签的组成

  1. table 是父标签，相当于表格容器

  2. <caption> 表格的标题,写在 <table> 内的第一行, 用于指定表格的标题,会显示的表格正上方

  3. <tr> 表示表格一行

  4. <th> 表格每一列的标题,写在 <tr> 内

  5. <td> 表格的每一个单元格,写在 <tr> 内

table标签的属性

  1. border:表格边框的宽度

  2. width:宽度,可以是像素也可以是百分比

  3. height:高度,可以是像素也可以是百分比

  4. align:水平对齐方式 常用left center right

  5. valign:垂直对齐方式 常用top middle bottom

  6. cellspacing:外边距,单元格与单元格之间的距离

  7. cellpadding:内边距,单元格内容与单元格之间的距离

  8. bgcolor:背景颜色

table属性注意点

  1. 宽度和高度可以设置table标签和td标签

    1.1 table设置width和height设置表格宽度和高度

    1.2 td设置width和height,只会影响当前单元格,不会影响表格的宽高

  1. 水平对齐

    2.1 水平对齐可以设置table tr td

    2.2 table设置align,可以控制表格在水平方向的水 平对齐方式

    2.3 tr设置align,可以控制当前行所有单元格内容的 水平对齐方式

    2.4 td设置align,设置之前按照tr的对齐方式,设置 后是控制当前单元格内容在水平方向的对齐方式

  1. 垂直对齐

    3.1 垂直对齐可以设置tr td

    3.2 tr设置valign,可以控制当前行所有单元格内容 的垂直对齐方式

    3.3 td设置valign,设置之前按照tr的对齐方式,设置 后是控制当前单元格内容在垂直方向的对齐方式

  1. 单元格和单元格之间的距离叫外边距

    4.1 外边距cellspacing只能给table设置,默认情况 下外边距是2px

  1. 单元格内容和单元格之间的距离叫做内边距

    5.1 内边距cellpadding只能给table设置,默认是 1px

  1. 背景颜色

    6.1 table tr td 都可以设置

    6.2 table设置整个表格背景颜色,tr设置当前行,td设置单元格

    6.3 如果都进行设置,采用就近原则

细线表格

  1. 去掉边框

  2. 设置表格背景颜色为black

  3. 设置单元格背景颜色为white

  4. 设置外边距为1px

单元格的合并,对于td而言

  • 水平方向上占据的列数 colspan

  • 垂直方向上占据的行数 rowspan

HTML中的表单标签

  1. form 标签 一般用于向服务器提交的时候将form标签中的数据进行提交

    1. action属性表示请求路径,表单提交到服务器的具体url

    2. method属性表示请求方式一般取值为POST和GET

    3. GET是默认值,提交的数据会追加到请求路径上, 如../..sevrvlet?username=tom&password=123,数据 以这种格式进行提交多个数据用&连接,因为请求路径 长度有限制,所以GET请求提交的数据有限 POST,提交的数据会追加到路径上

  2. input 标签     用来获取用户输入信息的标签

    1. type属性有很多中,并且不同的属性显示的样式不同

      1. text:文本框,输入文本

      2. password:密码框

      3. radio:互斥的单选按钮checkbox:复选框

      4. submit:提交按钮,将表单数据提交到服务器

      5. file:上传文件组件

      6. image:图片提交按钮,通过src设置图片

      7. reset:重置按钮,恢复表单

      8. hidden:隐藏字段,数据会发送给服务器,浏览器页面 中不会显示,一般可用于发送用户的id

      9. button:普通按钮,一般和js结合使用（不建议使用）

    2. name属性,表单数据提交到服务器必须提供name属性

    3. value属性,设置默认值

    4. checeked属性:单选按钮或者复选框被选中

    5. readonly:是否只读

    6. disabled:是否可用

    7. size:大小,一般用于设置文本框的大小

    8. maxlength:允许输入的最大长度,一般用于显示文本框中文本内容的长度

    9. placeholder:占位符属性,常用于设置文本框的占位符

  3. select标签

    1. 下拉列表常用于单选和多选,是组合标签,需要子标签 <option> ,不会独占一行 。

    2. name属性,发送给服务器的名称

    3. multiple属性,不写默认单选,取值为multiple表示多选, 一般我们只使用单选

    4. size属性,可见选项的数目

  4. option标签

    1. selected属性,表示勾选当前选项

    2. value属性,发送给服务器的选项值 ；

      注意:

      1.如果使用多选,那么选择的时候需要按住ctrl键 进行选择.

      2.size属性我们一般情况下不去设置

      3.selected属性如果不设置的时候默认是列表中的第 一个被选中

      4.value属性如果不设置的时候,发送给服务 器的时候value值默认是 <option>文本值</option> 文本值,如果设置了就是value属性值,一般情况下都需 要进行设置

  5. textarea标签

    1. 文本域,用于多行输入文本

    2. cols属性,文本域的列数

    3. rows属性,文本域的行数

    4. name属性,发送给服务器的名称

    5. value属性,textarea的内容

关于表单标签总结

  1. 需要提交到服务器中的数据,必须都要放在form表 单中,否则是提交不过去的

  1. 最后提交的形式就是 name=value&name=value&name=value

  1. form中不需要的提交的内容,不设置name属性,如按钮本身就是作为提交功能的触发,所以就不需要设置name属性

div标签

就是普通的标签,独自使用没有任何效果,主要用于网页中区域的划分,会单独占据一行.

JavaWeb基础（day11）的更多相关文章

  1. JavaWeb基础: ServletContext

    基本概念 Web容器在启动时,会为每个Web应用程序都创建一个对应的ServletContext对象,它代表当前Web应用. ServletContext(javax.servlet.http.Ser ...

  2. JavaWeb基础: 学习大纲

    JavaWeb基础: Web应用和Web服务器 JavaWeb基础: Tomcat JavaWeb基础:HTTP协议和基于Restful的架构 JavaWeb基础: Web工程配置文件 JavaWeb ...

  3. JavaWeb基础知识总结

    JavaWeb基础知识总结.   1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供 ...

  4. 超详细的Java面试题总结（四 ）之JavaWeb基础知识总结

    系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇 超详细的Java面试题总结(二)之Java基础知识篇 超详细的Java面试题总结(三)之Java集合篇常见问题 超详细的Java ...

  5. 关于java基础、多线程、JavaWeb基础、数据库、SSM、Springboot技术汇总

    作者 : Stanley 罗昊 本人自行总结,纯手打,有疑问请在评论区留言 [转载请注明出处和署名,谢谢!] 一.java基础 1.多态有哪些体现形式? 重写.重载 2. Overriding的是什么 ...

  6. [Java面试三]JavaWeb基础知识总结.

    1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供外界访问的Web资源分为: • 静 ...

  7. [JavaWeb基础] 002.JSP和SERVLET初级入门

    上一篇中,我介绍了javaweb项目的创建和Tomcat的搭建和部署,接下来我们要在上一篇的基础上去讲解一下简单的jsp和servlet交互,做出一个简单的登陆功能页面.该例子主要讲解了从页面请求道后 ...

  8. [JavaWeb基础] 008.Spring初步配置

    框架简介: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Develop ...

  9. JavaWeb 基础知识补充

    软件架构 1. C/S: Client/Server 客户端/服务器端         * 在用户本地有一个客户端程序,在远程有一个服务器端程序         * 如:QQ,迅雷...        ...

随机推荐

  1. Spring系列.依赖注入配置

    依赖注入的配置 Spring的依赖注入分为基于构造函数的依赖注入和基于setter方法的依赖注入. 基于构造函数的依赖注入 <!-- 通过构造器参数索引方式依赖注入 --> <bea ...

  2. 前端JS的服务订阅&服务发布

    var eventCenter = { sub:function(mesName, mesCallback){ this.argus=this.argus||{}; this.argus[mesNam ...

  3. oracle 锁表解决方式

    /*查看被锁住的存储过程*/ SELECT * FROM V$DB_OBJECT_CACHE WHERE OWNER = 'APPADMIN' AND LOCKS != '0'; SELECT * F ...

  4. 【实战】基于OpenCV的水表字符识别（OCR）

    目录 1. USB摄像头取图 2. 图像预处理:获取屏幕ROI 2.1. 分离提取屏幕区域 2.2. 计算屏幕区域的旋转角度 2.3. 裁剪屏幕区域 2.4. 旋转图像至正向视角 2.5. 提取文字图 ...

  5. Python字符串处理 - str/bytes

    目录 1. str 2. bytes / bytearray 3. printf-style String Formatting 1. str homepage str.count(sub[, sta ...

  6. vsftpd服务器配置与使用

    1.ftp简介 网络文件的共享主流的主要有三种,分别为ftp.nfs.samba ftp用于internet上的控制文件的双向传输 上传和下载的操作 下载 上传 将主机中的内容拷贝到计算机上 将文件从 ...

  7. （六）POI-操作Excel的poi的字体设置

    原文链接:https://blog.csdn.net/class157/article/details/92817286 package com.java.poi; import org.apache ...

  8. Java中Clob类型转换成String类型的问题

    1.问题: 项目中使用druid+达梦数据库(基本类似Oracle),查出的Clob类型数据在运行时为ClobProxyImpl对象而不是内容,不能转为字符串 2.原代码: map为达梦数据库或Ora ...

  9. MOJITO 发布一周，爬一波弹幕分析下

    MOJITO 最近一直啥都没写,追个热点都赶不上热乎的,鄙视自己一下. 周董的新歌 「MOJITO」 发售(6 月 12 日的零点)至今大致过去了一周,翻开 B 站 MV 一看,播放量妥妥破千万,弹幕 ...

  10. 代码规范与计划(Beta阶段)

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 Beta冲刺 这个作业的目标 代码规范与计划 作业正文 如下 其他参考文献 代码规 ...