第一课：Java web之HTML

来源：互联网发布：淘宝小号交易网编辑：程序博客网时间：2024/05/16 15:24

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：加载页面的路径

1 0