JavaWeb基础（day13 HTML）

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标签

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2020-07-10 20:06  呆呆来啦  阅读(163)  评论(0)  编辑  收藏  举报