HTML
HTML
一、HTML 简介
Hyper Text Markup Language 超文本标记语言
-
超文本
包括 文本、图片、音频、视频等等...
-
标记语言
是一门 独立的 语言
-
保存在 以 .html 或者 .htm 结尾的文件中
-
不需要编译，运行在 浏览器中，由浏览器的引擎进行解释和运行
关于浏览器引擎：
? IE、Chrome（谷歌）、Firefox （火狐）、Safari (Mac )
不同浏览器对于同样的代码可能具有不同的解释方式
浏览器的兼容性问题
二、HelloWorld
Document
HelloWorld
三、HTML语法
HTML 由 一系列的 标签组成
1、标签的语法
<标签名> 一对正反标签 或者 <标签名 /> 空标签
2、一个完整的标签
<标签名 标签属性名="值" 标签属性名="值" > 标签内容
四、一个完整的HTML
第一个HTML文件
安静的黑胡椒安静的黑胡椒安静的黑胡椒
安静的黑胡椒
安静的黑胡椒
安静的黑胡椒
安静的黑胡椒
安静的黑胡椒
浏览器中的内容
对原始HTML文档解析后的结果
五、HTML 常用标签
1、标题标签
从 h1 到 h6 表示六个级别的标题， 从大到小
标题标签 独占一行 --> 行级元素
111
aaaaaaa
111
111
111
111
111
2、HTML实体（entity）
在浏览器中输出一些特殊符号
当a=9时，67 一定成立
| 实体名称 | 作用 |
|---|---|
| > | > |
| < | < |
| 空格 | |
| © | ? |
| & | & |
具体详见W3School实体
3、几个常用空标签
| 标签 | 作用 |
|---|---|
| br | 换行 |
| hr | 水平线 |
4、格式化标签
所有字体样式标签，已经不建议使用，后期会由css替代
aaaaaa
aaaaa
aaaaaa
aaaaaa
CO2
42
aaaaa
无条件居中
5、块和段落标签
标签本身没有太多特性，作为容器使用
-
div
独占一行，行级元素（块级元素）
-
p（段落）
独占一行，行级元素（块级元素 block）
-
span
不独占一行， 行内元素（inline）
6、图片标签
-
标签名
img -
属性
-
src
用于表示图片的地址
相对路径、绝对路径、网络地址
-
alt
当图片加载失败的时候，显示的文字
-
-
用法
7、超链接
-
标签名
a -
属性
-
href
指定跳转路径
可以是相对路径（另一个html文件） 也可以是 网络地址
特殊值
# ---> 跳转到当前页面（不跳转） 但是浏览器地址栏上的地址末尾会追加一个# javascript:void(0) ---> 真正意义上的什么也不做 #另外一个html标签的id属性的值 --> 锚记 -
target
目标，以何种方式打开href对应的页面
-
blank / _blank
在新窗口打开页面
blank：在新窗口打开，当要打开的窗口已经存在，显示并刷新该窗口
_blank: 在新窗口打开，不论是否已经打开过
-
_parent / IFRAME_NAME 了解
配合
iframe一起使用，在
iframe中的a标签 target 为_parent时，在父页面打开连接。a标签 target 为
iframe标签name属性的值时，在iframe中打开连接。
-
-
-
用法
Document
跳转到论坛
跳转到04-img.html
跳转到#
跳转到javascript:void(0)
to a
to b
to c
aaaa
bbbb
cccc
回到顶部
没有target
blank
_blank
![]()
8、列表
大多数情况下 ， 用于 网页的菜单导航
-
标签
ul > liol > li -
ol的属性
-
type
1 数字（默认值）
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字
-
reversed
倒叙
-
start
从几开始编号
-
-
用法
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
- xxx1
- xxx2
- xxx3
- xxx4
9、表格标签
Document
用户信息表
编号
姓名
年龄
性别
1
zs
22
m
2
ls
33
f
3
gblasdasdadsw
44
m
跨行、列
1-1
1-2
1-3
1-4
1-5
2-1
2-2
2-3
2-4
3-1
3-2
3-3
4-1
4-2
4-3
5-1
10、表单标签
0、注意
对于所有的表单组件，
1、强烈建议都提供name属性（Servlet）
2、提交到java代码中的值是value属性的值
2-1 所有需要用户输入的内容 输入的值就是value值
2-2 所有用户选择的内容 必须指定value属性的值
朗读并背诵全文
表单标签
一般情况下，所有的表单组件（组成表单的标签）
都放在form中（但是不是绝对的）
如果单独使用表单组件 一定会 配合 JavaScript 代码
1、表单标签
2、文本框
3、密码框
4、单选按钮
5、复选框
6、数值框
7、电子邮件
8、范围
9、日期
10、文件选择器
11、拾色器
12、隐藏域
13、只读
14、下拉菜单
15、文本域
16、几个按钮
提交按钮：默认行为： 提交表单
按钮上默认文字是提交，可以使用value 重置
普通按钮，配合js使用，本身无效果