1. HTML是什么
- HTML的全称是HyperText Mark-up Language，翻译过来就是超文本标记型语言。
- 超文本指的是超出文本的范畴，标记：理解为标签，html中所有的操作都是通过标签来实现的。
- html是做网页。
2. 第一个HTML程序
创建hello.html,利用编辑工具NotePad编辑，输入一下代码，点击保存，点击运行，选择自己有的浏览器即可。
这是我的第一个html程序
3. HTML遵循的规范
1.HTML程序以开始，同时以结束
2.HTML程序包含两部分内容：head和body，代码如下：
设置页面上的信息
显示到页面上的内容
3.html的标签有开始标签，同时也要有结束标签，代码如下：
html程序
这是我的第一个html程序
4.html代码是不区分大小写的
4. 操作思想
网页中可能有很多的数据，不同的数据可能有不同的显示效果，这个时候需要使用标签把我们需要操作的数据包起来（封装），通过修改标签的的属性值来实现标签内数据样式的变化。标签相当于一个 容器，通过修改容器的属性值，实现容器内数据样式的变化。
html程序
这是我的第一个html程序
这是我的第一个html程序
5. 字体标签
1.要操作的文字的内容
这是我的第一个html程序
两个属性 color:设置文字的颜色 size:设置文字的大小
2.color 有三种表现方式 ：
- 直接使用英文单词进行表示 red green yello
- 使用十六进制数字表示 #33cc66
这是我的第一个html程序
- 使用RGB颜色值配置 rgb（255,255.0）
颜色的第三种表示方法
- 注意：属性值size的范围是1-7，就算是写为大于7的数字，还是会呈现7的大小
6. 标题标签
html程序
这是标题一
这是标题二
这是标题三
- 标题标签可以自动换行，从h1到h6字体的大小越来越小
- 标题标签自动换行
7. 水平线标签
需要在标签内结束
属性：color ：表示设置水平线的颜色 size：设置水平线的粗细，范围是1-7
8. 注释标签
- java中有三种注释：单行注释，多行注释，文档注释
- 在html中的注释 不会在页面中进行显示
html程序
9. 特殊字符
- 实现空格的操作
实现空格 的操作
10. 列表标签
- 想要实现以下效果（去掉---以后呈现的等级效果）：
----逍遥派
--------无崖子
--------丁春秋
--------虚竹
首先需要使用
之后在dl标签里面，:定义上层的内容
在dl标签里面，:定义下层的内容
html程序
- 逍遥派
- 无崖子
- 丁春秋
- 虚竹
11. 有序列表标签
- 想要实现以下效果
（1）
1.java
2.Android
3.ios
（2）
i. java
ii. Android
iii. ios
（3）
a. java
b. Android
c. ios
*** 使用
1.ol标签的属性：type
2.决定排列的方式type默认="1",还可以写成字母type="a"还可以写成罗马数字type=“i”
*** 之后在ol标签里面：:封装具体的内容
- 无崖子
- 丁春秋
- 虚竹
- 无崖子
- 丁春秋
- 虚竹
- 无崖子
- 丁春秋
- 虚竹
12. 无序列表标签
想要实现以下效果:
（特殊符号）ios
（特殊符号）JS
（特殊符号）Android
*** 首先使用标签
****** ul标签上面有属性 type ：设置特殊的复合
****** type属性里面的值 disc circle square
*** 之后在ul标签里面：:封装具体的内容
- 无崖子
- 丁春秋
- 虚竹
- 无崖子
- 丁春秋
- 虚竹
- 无崖子
- 丁春秋
- 虚竹
13. 图形标签
- 在HTML中显示图片
图形标签
- 属性
- src：图片的路径名称
- width：图片的宽度
- height：图片的高度
- border：图片的边框的粗细
- alt：鼠标移动到图片上面，显示在图片上的内容；另外当图片找不到的时候，图片上会显示这个内容；某些浏览器下不支持。
图形标签
14. 什么是超链接标签
点击打开新的内容
实现代码
图形标签
显示在页面上的内容
属性
href ：链接到地址
target ：超链接的打开方式
在默认的情况下，打开方式是在当前页面打开
target里面的值：_self指的是在当前的页面打开 _blank指的是在新的标签页打开
图形标签
显示在页面上的内容
15. 表格标签
- 对数据进行格式化，使数据显示更加清晰，结构分明。
- 表格标签可以用工具生成
表格标签中的标签
- 首先定义表格的范围 ：
属性：- border：设置表格线
- bordercolor：设置表格线的颜色
- cellspacing：设置单元格之间的距离
- cellpadding: 设置文字和单元格之间的距离
- width：设置表格的宽度
- height：设置表格的高度
- 在table标签里面表示行：
属性：- align：设置对齐方式， 值left center right
- 在tr里面表示列：
属性：- aligh：设置单元格的左右对齐方式 left center right
- valign：设置单元格的上中下对齐方式 bottom top middle
- 在tr标签里面也可以表示单元格:
表格标签
姓名
年龄
张三
李四
王五
赵六
15
16
表格标签：添加表格线
姓名
年龄
张三
李四
王五
赵六
15
16
合并单元格
- 是在td标签上面进行的操作，使用两个属性 rowspan：跨行 colspan：跨列
- 操作技巧：首先数表格里面有多少行，数每行里面有多少个单元格
表格标签
姓名
年龄
性别
张三
13
王五
15
李四
14
表格标签
姓名
年龄
性别
张三
13
男
王五
15
女
个人信息
标题标签
人员信息
16. 表单标签
把我们填写的信息提交到服务器上，这个过程，我们称之为表单。
- form 标签：
如果写表单，首先定义表单的范围。
action：提交到服务器的地址；
method：表单的提交方式（get和post两种）
- 输入项：
可以输入内容或者选择内容的地方，大部分输入项是通过input标签进行封装操作的。
样式：
1.普通输入项：
2.密码输入项：
3.单选输入项：单选输入项里面必须有name属性，同时name的属性值必须要相同。
男女
4.复选输入项：
男女
5.文件输入项：
6.隐藏项：这个值不会显示在页面上，但是提交表单也可以提交到服务器上
7.普通按钮
8.提交按钮和其他按钮
不是做清空表单输入项的操作，使表单输入项回到原始状态。
9.提交必须注意的两点
1. 输入项里面必须有name属性。
2. 在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value
10.使用图片来进行提交
- 下面的两个输入项不是使用input标签进行封装的。
1.下拉选择输入项
*** 属性：
selected = "selected" 表示默认被选中。
多选项可以选择
2.文本域
- 设置单选框、复选框、选择输入项为某个默认值
- 单选框和复选框利用属性checked = "checkded"
- 选择输入项利用属性selected="selected"
17. 其他标签
- pre标签-原样输出标签
public static void main(String[] args){
System.out.....
}
- p 段落标签
- s 删除标签
- u 下划线
- b 加粗
- i 斜体
- div标签 自动换行
- span标签 在一行进行显示
18. 补充知识
1. 常用快捷键
- Ctrl+E：打开我的电脑
- Ctrl+Tab：浏览器的标签之间来回切换
- F2：对文件重命名
- Tab：补全代码键
- Ctrl+/：注释
- F11：全屏
2. 常用标签
段落标签
标题标签
zh
文本倾斜标签
文本加粗标签
删除线
下划线标签
23 —— 2的三次幂
h2O --- 水的化学表达式
3. 相对路径
- 当HTML文件和图片在同一个目录下的时候，引入图片（src）直接写图片名称即可。
- 当图片在HTML的下一层目录下的时候，引入图片（src）直接写HTML所在目录的名称+“/”+图片的名称。
- 当图片在HTML的上一层目录下的时候，引入图片（src）直接写“../”+图片名称。
4. 锚链接
你好你好你好你好你好你好你好你好
返回顶部
5. 空链(不知道链接到哪个页面的时候，用空链)
< 空链
6. 压缩文件的下载（知道就行，工作中不用）
压缩包下载
7. 超链接优化写法（所有页面都在新页面打开）
8. 特殊字符
例如（遇到查询即可）：
空格符 ——空格 < 小于号——< > 大于号——&qt
9. 音乐标签
10. 滚动
11. meta标签
关键字
keyowrds关键字的代表
安卓,WEB前端,IOS SEO搜索引擎排名所需的关键字
网页描述
网页重定向：跳转到其他网页
12. link标签
- 链接外部表文件
- 设置icon标题图标
- 作者的名字
- 搜索引擎的爬虫设置
13. 表格的标准结构（了解下）
thead tbody tfoot
表格的标准结构
你们
他们
我们
1
2
3
i
ii
iii
14. 细边框的表格
1
2
3
4
5
11
22
33
44
55
15. 表单
作用：收集信息
表单域：表单的区域
maxlength：input的属性：控制输入字符的最大长度。
readonly = "readonly"：只读属性 无法编辑
disabled = "disabled": 输入框未激活状态
name = "" : 用于区分的标志
value = "" :输入框的值
select 中的属性 multiple = "multiple" 指下拉多选
对下拉别表内容进行分组：optgroup 对下拉列表标签进行分组
表单示例_分组
对form表单标签里面的子标签进行分组：
表单示例_分组
form标签里面的控件
HTML 5 表单控件
16. 推荐关于html的第二篇博客
- https://www.jianshu.com/p/e1b5294c316e