01-html

最新推荐文章于 2024-11-06 10:07:07 发布

wxf468907066

最新推荐文章于 2024-11-06 10:07:07 发布

阅读量253

点赞数

分类专栏： javaweb 文章标签： html

本文链接：https://blog.csdn.net/wxf468907066/article/details/51265217

版权

javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

1.html的简介

a.什么是html?

HyperText Mark-up Language,超文本标记型语言,是网页的语言.
- 超文本:超出文本范畴
- 标记:理解为标签,html中所有的操作都是通过标签来实现的
- html是做网页的.

b,html程序遵循一定的规范

1,html程序以<html>开始同时</html>结束
- 比如创建java里面方法,public void add() {方法体}
2,html程序包含两部分内容:head和body
- <html>
  - <head>设置页面信息</head>
  - <body>显示到页面上的内容</body>
- </html>
3,html的标签有开始标签,同时也要结束标签
4,html的代码不区分大小写的
5,有些标签没有结束标签,需要在标签内结束<br/>
- 实现换行的操作,使用标签实现<br>,没有</br>

c,html的操作思想

在网页中可能有很多的数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来(封装),通过修改标签的属性值来实现标签内数据样式的变化.标签相当于一个容器,通过修改容器的属性值,实现容器内数据样式的变化.

2.字体标签

a,文字标签< font >

< font color = “设置文字颜色” size = “文字的大小” >要操作的文字的内容< /font >
- 常用的两个属性
  - color:设置文字的颜色
    - 1,直接使用英文单词进行表示red green yellow…
    - 2,使用十六进制数字进行表示 #ffffff
      - 通过RGB
    - 3,使用RGB颜色值配置 rgb(255,0,0)
  - size:设置文字的大小
    - 文字大小值范围:1-7,如果值超过了7,使用还是7的效果

b,标题标签 < hn >

<h1></h1> <h2></h2>......<h6></h6>
标题标签可以自动换行,从h1到h6字体的大小依次变小的

c,水平线标签< hr/ >

属性
- color:表示设置水平线颜色
- size: 设置水平线的粗细,范围1-7.

d,注释标签< !–注释内容– >

在java里面有几类注释? 三类注释
- 单行注释,多行注释,文档注释
在html中注释< !–注释的内容–>
- 使内容不在html页面中进行显示

e,特殊字符 &nbsp ;

实现空格的操作

3,列表标签

1,想要实现:

传智播客
    java学院
    人事部
    学工部

* 首先需要使用 < dl >< /dl >:定义列表的范围
* 之后再dl标签里面,< dt >< /dt >:定义上层内容
* 在dl标签里面, < dd >< /dd >:定义下层内容
* eg:
* <dl>
* <dt>传智播客</dt>
* <dd>java学院<dd>
* <dd>人事部</dd>
* <dd>学工部</dd>
* </dl>

2,有序列表标签

1,java学院
2,人事部
3,学工部
- a java学院
b 人事部
c 学工部
- i.java学院
ii.人事部
iii.学工部
- 使用<ol></ol>:定义有序列表的范围
- ol 标签上面有属性 type: 排序的方式
- type属性里面的值1 a i
之后再ol 标签里面: <i></li>: 封装具体的内容

<ol>
<li>java学院</li>

<li>人事部</li>

<li>学工部</li>

</ol>

3,无序列表标签

(特殊符号)java学院
(特殊符号)人事部
(特殊符号)学工部

* 首先使用标签`

`:定义无序列表的范围 * ul标签上面有属性type: 设置特殊符号 * type属性里面的值disc(圆点), circle(空心圆点) , square(方块)

4.图形标签

1,在html中显示图片
2,标签:<img src = "图片的路径名称"/>
3,属性:
- src :图片的路径名称
- width: 图片的宽度
- height:图片的高度
- border:图片边框的粗细
- alt:显示在图片上面的内容
  - 鼠标移动到图片上面,稍等片刻出现文字
  - 如果图片找不到,显示alt的内容
  - 这个属性在某些浏览器上面不能显示,兼容性不太好

5,超链接标签

1,什么是超链接? –>点击打开新的内容
2,标签: <a href = "链接到的地址">显示在页面上的内容</a>
- eg: <a href = "www.baidu.com">百度</a>
3,属性
href :链接到的地址
target:超链接的打开方式
- 默认情况下,打开方式在当前的页面打开
- target里面的值:_self,当前页面打开;_blank,在新的标签页打开

6,表格标签

1,什么是表格:对数据进行格式化,使数据显示更加清晰,结构分明
2,标签
- 首先定义表格范围:<table></table>
  - 属性:
    - border:设置表格线
    - bordercolor:设置表格线颜色
    - cellspacing:设置单元格之间的距离
    - cellpadding:设置文字和单元格之间的距离
    - width:设置表格的宽度
    - height:设置表格的高度
- 在table标签里面表示行:<tr></tr>
  - 属性
    - align:设置对其方式,值left,right,center
- 在tr标签里面表示列:<td></td >
  - 属性
    - align:设置某个单元格的对齐方式,值left,right,center
- 在tr标签里面也可以表示单元格:<th></th>
  - 实现居中和加粗的效果
3,合并单元格
- 是在td标签上面进行的操作,使用两个属性
  - rowspan:跨行
    - <th rowspan = "4">人员信息</th>
  - colspan:跨列
    - <td colspan = "3">统计信息</td>
操作技巧:
- 首先数表格里面有多少航,数每行里面有多少个单元格
4,标题标签<caption>标题内容</caption>

7.表单标签

1,什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单
2,使用表单标签实现数据提交到服务器上的这个过程
3,form 标签:如果写表单,先定义表单范围
- 属性:
  - action:提交的服务器的地址
  - method:表单的提交方式(有很多种,常见的有两种 get和post)
  - 代码:
  - <form action = "table标签.html" method = "get">
    - get和post提交,默认方式是get
    - get提交方式会在地址栏携带数据,安全性差
    - post提交方式地址值栏不会携带数据,安全性比较高,数据在请求体里面
4,输入项:可以输入内容或者选择内容的地方
- 要求1:输入项里面必须要求name属性,只有这样才能够把信息提交到服务器上
- 要求2:在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value,设置的值
- 输入项需要写到form标签里面
- 大部分输入项是通过标签input进行封装操作的.
- <input type = "输入项的类型" />
- 第一个:普通输入项<input type = "text"/>
- 第二个:密码输入项<input type = "password"/>
- 第三个:单选输入项<input type = "radio"/>
  - 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
  - 设置默认属性,使用属性 checked = “checked”
- 第四个:复选输入项<input type = "checkbox"/>
  - 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
  - - 设置默认属性,使用属性 checked = “checked”
- 第五个:文件输入项<input type = "file"/>
- 第六个:隐藏项,这个值不会显示在页面上,但是提交表单也可以提交到服务器上<input type = "hidden"/>
- 第七个:普通按钮<>
  - 可以写value属性,设置输入项的默认值
5,下面的两个输入项不是使用input标签进行封装的
- 第八个:下拉选择输入项:
  - <select>
    - <option>AAAA</option>
    - <option>BBBB</option>
    - <option>CCCC</option>
  - </select>
  - 使用属性 selected = “selected”默认选中
- 第九个:文本域:
  - <textarea cols = "10" row = "5"></textarea>
6,提交按钮和其他的按钮
- 提交按钮: <input type = "submit"/>
  - 属性 value :设置提交按钮显示的内容
  - 点击提交按钮:地址发生了变化
  - file:///D:/Android/day1_html/table%E6%A0%87%E7%AD%BE.html?sex=on&love=on
  - 给输入项添加name属性后:
  - file:///D:/Android/day1_html/table%E6%A0%87%E7%AD%BE.html?username=%CE%C0%D1%A9%B7%E5&password=123456&sex=on&love=on&love=on&love=on&hid=bbb&xueli=AAAA&des=%CE%D2%CA%C7%CE%C0%D1%A9%B7%E5
- 重置按钮: <intput type = "reset"/>
  - 属性 value :设置提交按钮显示的内容
  - file:///D:/Android/day1_html/table%E6%A0%87%E7%AD%BE.html?username=sfdg&password=sfdg&sex=nan&love=l&love=y&love=p&hid=bbb&xueli=aaa&des=sfdg
  - 不是做清空表单输入项的操作,是表单输入项回到初始状态
- 使用图片进行提交:<input type = "image" src = "图片路径"/>