# HTML 笔记 # 概念 ## html标签 HTML是Hyper Text Markup Language 超文本标记语言 的缩写 HTML是由一套标记标签 (markup tag)组成,通常就叫标签 标签由开始标签和结束标签组成

这是一个开始标签

这是一个结束标签

**Hello World**

标签之间的文本叫做内容 ```html

大标题

小一点的标题

再小一点的标题

更小一点的标题

``` ## html元素 元素指的是从开始标签到结束标签之间所有的代码 比如

hello world

一个完整的HTML文件,应该至少包含html元素,body元素,以及里面的内容 ```html

标题

``` ## html属性 属性用来修饰标签的 比如要设置一个标题居中

居中标题

写在开始标签里的 **align="center"** 就叫属性 align 是**属性名** center 是**属性值** 属性值应该使用双引号括起来 ## html注释 html使用 进行注释 # 基本元素 ## html标题 标题会自动粗体,大写其中的内容,并且带有换行效果 一般会使用

分别表示不同大小的标题

标题1

标题2

标题3

标题4

标题5
标题5
## html段落 p标签即表示段落 是paragraph的缩写 自带换行效果 ## 粗体 都可以用来实现粗体的效果 区别: b是bold的缩写,仅仅表示该文本是粗体的,**并不暗示这段文字的重要性** strong虽然也是粗体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。 在SEO(搜索引擎优化)的时候,也更加容易帮助用户找到重点的内容 推荐使用strong ```html

无粗体效果

b标签粗体效果
strong标签粗体效果 ``` ## 斜体 都可以表示斜体效果 区别: i是italic的缩写,仅仅表示该文本是斜体的,并不暗示这段文字的重要性 em 是 Emphasized的缩写,虽然也是斜体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。 ```html //嵌套

无效果

粗体
斜体
同时有粗体和斜体 ``` ## 预格式 有时候,需要在网页上显示代码,比如java代码 就需要用到pre ```java

这里是没有用预格式的情况:

public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } }

使用预格式的情况:

public class HelloWorld {

	public static void main(String[] args) {
		System.out.println("Hello World");
	}
}

``` ## 删除效果 即删除标签 delete的缩写

无删除效果

使用del标签实现的删除效果
使用s标签实现的删除效果,但是不建议使用,因为很多浏览器不支持s标签 ## 下划线 即下划线标签 使用ins标签实现的下划线效果
使用u标签实现的下划线效果,但是不建议使用 ## 图像 即图像标签 需要设置其属性 src指定图像的路径 ```html ``` 1. 显示图像 2. 同级目录图像 如果是本地文件,只需把图片放在同一个目录下即可 src直接使用文件名,不需要/ 3. 上级目录图像 ```java 图片在上级目录,则在src上加上 ../,即可访问上级目录的图片 如果是在上级目录的上级目录,则使用 ../../ ``` 4. 设置图像大小 ```html ``` 5. 图像居中 img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签. 经常采用的手段是放在div中居中 ```java
```
## 替换图片上的字 如果图片不存在,默认会显示一个缺失图片,这是不友好的 所以可以加上alt属性。 当图片存在的时候,alt是不会显示的 当图片不存在的时候,alt就会出现 ```java
这个是一个图片
这个是一个图片 ```
这个是一个图片
这个是一个图片 ## 超链 ```java 标签即用来显示超链 完整元素是 超链显示文本 ``` 标签即用来显示超链 完整元素是 超链显示文本 1. 12306 2. 在新的页面打开超链 新增属性target ```html http://www.12306.cn ``` 3. 超链上提示文字 当鼠标放在超链上的时候,就会弹出提示文字 ```html www.12306.com ``` 4. 使用图片作为超链 ```html ``` ## 表格 ```html 标签用于显示一个表格 表示行
表示列又叫单元格 ``` 1. 3行2列表格 ```html tr(table row)表示行,所有3个tr元素 td(table data)表示列,每一行,有2列,所以每一个tr元素里,有2个td元素 ``` ```html
1 2
3 4
a b
``` 2. 带边框的表格 设置table的属性border ```java
1 2
3 4
a b
``` 3. 设置table宽度 ```html 设置table的属性 width px即像素的意思。 比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素 ``` ```html
1 2
3 4
a b
``` 4. 单元格宽度绝对值 设置td的属性width 在示例里,1单元格设置了宽度,那么3,和a单元格,自动继承该宽度 2单元格的宽度由table宽度和1单元格的宽度决定 ```html
1 2
3 4
a b
``` 5. 单元格宽度相对值 设置td的属性width为百分数 ```html
1 2
3 4
a b
``` 6. 单元格水平对齐 ```html
1 2
3 4
a b
``` 7. 单元格垂直对齐 设置td的属性valign ```html
1 2
2
2
3 4
4
4
a b
b
b
``` 8. 横跨两列, 水平合并 设置td的属性colspan ```html
1,2
3 4
a b
``` 9. 横跨两行,垂直合并 设置td的属性rowspan ```html
1,3 2
4
a b
``` 10. 背景色 设置tr或者td的属性bgcolor ```html
1 2
3 4
a b
``` ## 列表 列表分无序列表和有序列表 分别用
    标签和
      标签表示 1. 无序列表 ```html
      • DOTA
      • LOL
      ``` 2. 有序列表 ```html
      1. 地卜师
      2. 卡尔
      ``` ## 块 div span 1. 看不出任何效果 ```html
      这两种标签都是布局用的 这种标签本身没有任何显示效果 通常是用来结合css进行页面布局 这没有标签
      这是一个div
      这是一个span ``` 2. div布局 一个简单的div布局的例子 注: 这里使用了[style外边距样式](https://how2j.cn/k/css2/css2-margin/248.html),margin-left:50px 指的是左边距50个像素 需要对两个图片进行左边距控制 如果不使用div,则需要对每一个图像设置边距 使用了div后,先把两个图像都放在一个div里 只需要设置div的边距,就可以达到两个图片都移动的效果 ```html

      ```

      3. div和span的区别 div是块元素,即自动换行 常见的块元素还有h1,table,p span是内联元素,即不会换行 常见的内联元素还有img,a,b,strong ```html
      第一个div
      第二个div
      第一个span 第二个span ``` ## 字体 1. 字体元素 绿色默认大小字体
      蓝色大2号字体
      红色小2号字体 ```html 绿色默认大小字体
      蓝色大2号字体
      红色小2号字体 ``` 2. 颜色表示方法 在html中,颜色通常使用两种方式来表示: 1. 颜色名,比如red, blue 2. 颜色对应的16进制,比如#ff0000 就表示红色 用red表示红色字体
      用#ff0000表示红色字体 ## 内联框架 ```html ``` # 表单元素 ## 文本框 即表示文本框 并且只能够输入一行 如果要输入多行 使用[文本域](https://how2j.cn/k/html/html-textarea/196.html) 注: 标签很特别,一般是不需要写成或者 这样的。 并且 这样的写法也是满足标准的 1. 文本框 ``` ``` 2. 设置文本框长度 ```html ``` 3. 设置默认文本值 ```html ``` 4. 有背景文字的文字框 使用属性placeholder placeholder是一个html5的属性,对于大多数的已经支持html5的浏览器来说,是可以看到效果的,但是对于老的不支持html5的浏览器,比如ie8,就看不到效果 ```html ``` ## 密码框 即表示密码框 1. 密码框输入为星号 ```html ``` ## 表单 1. 表单 ```html action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去 注: 这里把数据提交到服务端的login.jsp去了,鉴于当前学习的进度,就不对JSP的内容展开了。 JSP的内容可以到JSP章节进行学习 注: 有好奇的同学可以参考图片中的login.jsp
      用于向服务器提交数据,比如账号密码 账号:
      密码:
      ```
      账号:
      密码:
      2. method="get" 使用method="get" 提交数据 是常用的提交数据的方式 如果form元素没有提供method属性,**默认就是get**方式提交数据 get方式的一个特点就是,可以在浏览器的**地址栏看到提交的参数**,即便是密码也看得到 ```html
      账号:
      密码:
      ``` 3. method="post" 使用method="post" 也可以提交数据 **post****不会**在地址栏显示提交的参数 如果要提交二进制数据,比如上传文件,必须采用post方式 ```html
      账号:
      密码:
      ``` 4. get和post的区别 get和post的区别 get 是form默认的提交方式 如果通过一个超链访问某个地址,是get方式 如果在地址栏直接输入某个地址,是get方式 提交数据会在浏览器显示出来 **不可以**用于提交二进制数据,比如上传文件 post 必须在form上通过 method="post" 显示指定 提交数据**不会**在浏览器显示出来 可以用于提交二进制数据,比如上传文件 ## 单选框 表示单选框 1. 单选框 两个单选,都可以同时选中。 为了达到,同一时间,只能选中其一的效果,需要使用[分组](https://how2j.cn/k/html/html-checkbox/193.html#step364) ```html 单选1 单选2 ``` 单选1 单选2 2. 默认选中 默认选中 3. 分组 分组即,多个单选框,都在一个分组里,同一时间,只能选中一个单选框 设置name属性相同即可 ```html

      今天晚上做什么?

      学习java
      东京热
      dota
      LOL
      当name一致时,被默认分为一组,只能选其一, checked 是默认选择 ``` ## 复选框 即表示复选框 ```html

      今天晚上做什么?

      学习java
      东京热
      dota
      LOL
      ```

      今天晚上做什么?

      学习java
      东京热
      dota
      LOL
      ## 下拉列表 ```html ```] ``` 2. 设置高度 使用属性size ```html ``` 3. 设置可以多选 使用ctrl或者shift进行多选 ```html ``` 4. 默认选中 对option元素设置selected="selected" 属性 ```html ``` 5. 文本域 ```html ``` 2. 设置高度和行数 ```html ``` ## 普通按钮 即普通按钮 1. 2. 普通按钮不具备提交form的效果 ## 提交按钮 即为提交按钮 用于提交form,把数据提交到服务端
      账号:
      密码:
      ```html
      账号:
      密码:
      ``` ## 重置按钮 重置按钮 可以把输入框的改动复原 ```html
      账号:
      密码:
      ```
      账号:
      密码:
      ## 图像提交 即使用图像作为按钮进行form的提交
      账号:
      密码:
      ```html
      账号:
      密码:
      ``` ## 按钮 1. Button 即按钮标签 与不同的是, ``` 2. 里面是图 ```html ``` 3. 提交数据 设置type="submit" IE下button的type的默认值为button不具备提交功能 其他浏览器type的默认值是submit ```html
      账号:
      密码:
      ```