第一课：Java web之HTML

最新推荐文章于 2022-09-05 17:55:38 发布

李之阳

最新推荐文章于 2022-09-05 17:55:38 发布

阅读量284

点赞数 1

分类专栏： Java 文章标签： java 语言 java web html

本文链接：https://blog.csdn.net/u014735704/article/details/53188357

版权

Java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. Html简介

1. Html是什么？

html是一种用来描述网页的一种语言。html（Hyper Text Markup LanguLanguage）是指超文本标记语言，它不是编程语言，而是一种标记语言。

2.html能做什么？

html通过标签的形式将信息展现给用户

3. 书写规范

<!DOCTYPE html>
<html>
    <head>
    //包括咨询信息，整个页面的属性，指导浏览器解析的标签，引入外部文件的标签
    </head>
    <body>
    //我们需要展示的信息
    </body>
</html>

2. Html的基本标签

1. 文件标签（结构标签）

<html>标签：跟标签
<head>:头标签
<title>:页面的标签
<body>:内容标签
    属性：1.text：文本的颜色
         2.bgcolor:背景色
         3.background：背景图片

2. 排版标签

<!--注释标签-->
</br>  换行标签
<p>段落标签</p> 
    属性：align：对齐方式（left center right） 
</hr> 水平标签
    属性：width：宽度
         size：粗度
         color：颜色
         align：对齐方式
    尺寸的写法：1.像素   2.百分比

3.块标签

<!-- 块标签-->
<div>:行级块标签
<span>:行内块标签

作用  div:div+css
     span:进行友好提示，比如密码错误，账号不存在等等

4.文字标签

<!--文字标签-->
<font>  属性：color：颜色
             size：大小～（最小值：1，最大值：7，默认值：3）
             face：字体 （黑体，宋体，华为彩云等等）

5.清单标签

<!--清单标签-->
//无序列表
<ul>
    <li>清单1</li>
    <li>清单2</li>
</ul>
    <ul>属性：type=disc square circle
//有序列表
<ol>
    <li>清单1</li>
    <li>清单2</li>
</ol>
    <ol>属性：type=1，A，a,I
             start：数字，代表了首项开始的位置

6.图形标签

<!--图形标签-->
<img>  属性：src:图形的地址
            width：宽度
            height:高度
            border：边框，给图片加个类似相框的边框
            align：对齐方式
            alt:图片的文字说明，（图片不存在的时候显示alt里面的内容）

7.链接标签

<!--链接标签-->
<a>
    属性： href：跳转页面的地址
          name：名称，锚点
          target ：_self（默认）在自身打开页面；   _blank 重开一个页面
          作用:(1).页面跳转时，访问互联网上的资源，前面必须加协议http://
              (2).锚点访问时，href在访问锚点时书写格式 #name的值

8.表格标签

<!--表格标签-->
<table >
    <tr>
        <td>1---1</td>
        <td>1---2</td>
        <td>1---3</td>
    </tr>

    <tr>
        <td>2---1</td>
        <td>2---2</td>
        <td>2---3</td>
    </tr>

    <tr>
        <td>3---1</td>
        <td>3---2</td>
        <td>3---3</td>
    </tr>
</table>

表格属性：border：边框
        width：宽度
        align:表格的对齐方式
        <tr>:代表行
        <td>:代表单元格
            属性：rowspan:行合并
                 colspan:列合并
        <caption>：表格的标题
表格作用： （1）实现一个简单的表格样式
         （2）进行宏观布局

3. html表单标签(重点)

1. form标签

<form></form>
属性： name：表单名称
      action：提交的路径地址
      method：提交方式  get post
      get与post区别：
      1.get提交将数据加在地址栏后面， 格式？name=value&name=value，而post提交是将数据封装在请求体中
      2.get提交相对不安全，post提交相对安全
      3.get提交有大小限制，根据浏览器不同而不同，post不限制大小

2. input标签

<input >
    属性：type：根据type值的不同会显示不同功能表单项
             text：普通的文本输入框
             password：密码输入框，特点：显示掩码
             radio：单选按钮。注意：组的概念，如果想让一组单选按钮互       斥，name属性必须相同        checked：代表默认被选中
             checkbox:复选框  注意：组的概念，如果想让一组单选按钮互       斥，name属性必须相同
             file：上传文件
             button：普通按钮，没有任何内置功能
             submit：提交按钮，点击表单按照action地址进行提交
             reset：重制按钮，点击会将表单晴空
             image：图片按钮
                 src:图片地址
                 alt:图片提示信息
             hidden：隐藏标签。 服务端需要但是用户不需要

3. select标签

<select></select>
    属性：<option>  </option> 代表一个属性
        value：
        selected：默认被选中的项

4. textarea标签（文本域）

<textarea>文本</textarea>
    属性：cols：列数
         rows:行数

4.框架标签及其他

1.什么叫框架标签

    Frameset:
        属性：cols：按列划分
             rows:按行划分
             划分的格式：rows=“120，*”。*指剩下的部分
        frame：
            属性：name：名称，方便target根据name值进行定位
                 src：加载页面的路径