好好一百句HTML语言常用语法 - Akami - 博客园
https://www.cnblogs.com/akami/p/6940703.html
1、html的简介
* 什么是html？
- HyperText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
** 网页语言：
* 第一个html程序。
- 创建java文件.java
** 先编译，然后再运行（jvm）
- html后缀是 .html .htm
** 直接通过浏览器就可以运行
- 代码
** 这是我的第一个html程序！
* html的规范（遵循）
1、一个html文件开始标签和结束的标签
- 定义一个java方法 { }
2、html包含两部分内容
（1） 设置相关信息
（2） 显示在页面上的内容都写在body里面
3、html的标签有开始标签，也要有结束标签
-
4、html的代码不区分大小写的
5、有些标签，没有结束标签 ，在标签内结束
- 比如 换行
* html的操作思想（******理解）
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
html中常用的标签
2、文字标签和注释标签
* 文字标签：修改文字的样式
-
- 属性：
* size: 文字的大小 取值范围 1-7,超出了7，默认还是7
* color：文字颜色
- 两种表示方式
** 英文单词：red green blue black white yellow gray......
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色 #66cc66
* 注释标签
- java注释几种？三种
- html的注释 ：
3、标题标签、水平线标签和特殊字符
* 标题标签
- .......
- 从h1到h6，大小是依次变小，同时会自动换行
* 水平线标签
-
- 属性
** size: 水平线的粗细 取值范围 1-7
** color: 颜色
- 代码
* 特殊字符
- 想要在页面上显示这样的内容 :是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格：
* & : &
4、列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
**
: 表示列表的范围
** 在dl里面 : 上层内容
** 在dl里面 ：下层内容
- 代码
- 传智播客
- 财务部
- 学工部
- 人事部
- 想要在页面上显示这样的效果
1. 财务部
2. 学工部
3. 人事部
a. 财务部
b. 学工部
c. 人事部
i. 财务部
ii. 学工部
iii. 人事部
**
: 有序列表的范围
- 属性 type：设置排序方式 1(默认) a i
** 在ol标签里面 具体内容
- 代码
- 财务部
- 学工部
- 人事部
- 想要在页面上显示这样的效果
特殊符号（方框） 财务部
特殊符号（方框） 学工部
** : 表示无序列表的范围
属性： type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc
在ul里面
- 代码
5、图像标签（*******）
* 
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
** 有些浏览器下不显示（没有效果）
6、路径的介绍
* 分类：两类
** 绝对路径
- C:\Users\asus\Desktop\0413\day01\code\a.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- 
** 图片在html的下层目录
在html文件中，使用img文件夹下面的a.jpg
-- C:\Users\asus\Desktop\0413\day01\code\ 4.html
-- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
** 图片在html文件的上层目录
--- C:\Users\asus\Desktop\0413\day01\ code\4.html
--- C:\Users\asus\Desktop\0413\day01\ c.png
*** html文件所在的目录和图片是一个目录
** 图片和html文件是什么关系？
- 图片在html的所在目录的上层目录 day01
** 怎么表示上层路径 ../
- ../: day01
-- ../c.png
** 想要表示上层的上层 ../../
7、案例一：列表标签的使用（作业：完成剩余的部分）
8、超链接标签（******）
* 链接资源(******)
- 显示在页面上的内容
** href: 链接的资源的地址
** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认
- 当超链接不需要到任何的地址 在href里面加#
- 这是一个超链接2
* 定位资源
** 如果想要定位资源：定义一个位置
顶部
** 回到这个位置
回到顶部
** 引入一个标签 pre：原样输出
9、表格标签（****重要的标签*****）
* 可以对数据进行格式化，使数据显示更加清晰
* : 表示表格的范围
- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格直接的距离
- width：表格的宽度
- height：表格的高度
** 在table里面 |
- 设置对齐方式 align： left center right
*** 在tr里面 |
- 设置显示方式 align： left center right
*** 使用th也可以表示单元格
- 表示可以实现居中和加粗
* 代码