HTML基础介绍1
HTML是什么
1.HTML（HyperText Mark-up Language）即超文本标签语言（可以展示的内容类型很多）
2.HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、连接等
3.HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容
HTML的运行方式
本地运行
没有意义，就是看一下解释之类的
远程访问
HTML快速入门
使用idea编写hello.html，运行效果
html开发工具：Sublime、Visual Studio Code、webstorm、Dreamweaver、Hbuilder等
创建html页面
Title
hello，我个菜狗
注意事项和细节
1.HTML文件不需要编译，直接由浏览器进行解析执行
2.可以选择的浏览器，是你电脑安装有的浏览器，如果没有安装这个浏览器，会报错
HTML基本结构
html基本结构
html注释的快捷键：ctrl+/，注意要对快捷键做处理：ctrl+shift+/
HTML标签
html的标签/元素 文档
1.在线文档：w3school 在线教程
2.离线文档
html的标签/元素-说明
1.HTML标签用两个尖括号"<>"括起来
2.HTML标签一般是双标签，如和前一个标签是起始标签，后一个标签为结束标签
3.两个标签之间的文本是html元素的内容
4.某些标签称为“单标签”，因为它只需单独使用就能完整地表达意思，如
5.HTML元素指的是从开始标签到结束标签的所有代码
html标签注意事项和细节
标签使用细节
1.标签不能交叉嵌套
2.标签必须正确关闭
3.注释不能嵌套
4.html语法不严谨，有时候标签不闭合，属性不带“”也不报错
标签使用细节
tom
jack
严谨：hello,HTML
不严谨：hello,HTML
hello,world!~
font字体标签
（用比较少，主要用css）
font标签
北京
字符实体
1.在网页上显示一些特殊的符号，称为字符实体（也叫符号实体）
把
变成文本显示在页面
字符实体
jack
<hr/>
smith smith2 hsp
smith
smith2 hsp
字符实体一览表
标题标签
1.标题使用-
标签进行定义。
定义最大的标题。
定义最小的标题
2.应用实例
标题标签
标签1
标签2.
标签3
标签4
标签5
标签6
超链接标签
指从一个网页指向一个目标的连接关系，这个目标可以是一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件，一个文件，甚至是一个应用程序
a 标签是超链接
href 属性设置连接的地址
target属性设置哪个目标进行跳转
_self : 表示当前页面（默认值），即使用当前替换目标页
_blank : 表示打开新页面来进行跳转
点击超链接，打开邮件
超链接标签
搜狐
[email protected]
无序列表 ul/li
ul/li基本语法
ul : 表示无序列表
li : 列表项
type 属性: 指定列表项前的符号
ul li标签
无序：
有序列表 ol/li
图像标签（img）
1.img标签可以在html页面上显示图片（图片要新建在文档下)
文件名：imgs
直接ctrl+v到文件
2.应用实例：使用img标签显示一张美女的照片
- img ： 标签是图片标签，用来显示图片
- src ： 属性可以设置图片的路径（指定在哪里）
- width ： 属性设置图片的高度
- height：属性设置图片的高度
- border ： 属性设置图片边框大小
- alt ： 属性设置当指定路径找不到图片时，用来代替显示的文本内容
- 相对路径：从工程名开始算
- 绝对路径：盘符/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径：.表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名：表示当前文件所在目录的文件，相当于./文件名 ./可以省略
绝对路径：正确格式是：http://IP 地址.port/工程名/资源路径
错误格式是：盘符:/目录/文件名
图像标签
应用实例：将图片做成超链接
表格（table）标签
基本语法
table ： 标签是表格标签 border ： 设置表格标签
width ： 设置表格宽度 height : 设置表格高度
align ： 设置表格相对于页面的对齐方式
cellspacing ： 设置单元格间距
tr : 是行标签 th ： 是表头标签 td ： 是单元格标签
align ： 设置单元格文本对齐方式 b ： 是加粗标签
表格标签
表格标签的使用
名字
住址
邮件
第1行第1列
第1行第2列
第1行第3列
第2行第1列
第2行第2列
第2行第3列
第3行第1列
第3行第2列
第3行第3列
表格标签
表格标签的使用
名字
住址
邮件
第1行第1列
第1行第2列
第1行第3列
第2行第1列
第2行第2列
第2行第3列
第3行第1列
第3行第2列
第3行第3列
表格标签-跨行跨列表格
编写如下网页：修改：table2.html
合并列：colspan="列数"
合并行：rowspan="行数"
cellspacing ： 指定单元格间的空隙大小：0表示没有空隙
bordercolor：指定表格边框的演示
border：表格边框
width：表格的宽度
表格（跨行跨列）
第1行第1列
第2行第1列
第2行第2列
第2行第3列
第3行第2列
第3行第3列
第4行第1列
第4行第2列
第4行第3列
第5行第2列
第5行第3列
表格（跨行跨列）
星期一菜谱
素菜
青草茄子
花椒扁豆
小葱豆腐
炒白菜
荤菜
油焖大虾
海参鱼翅
红烧肉
烤全羊
form（表单）标签介绍
url表示定位一个web资源的路径，method主要是两种get，post
form（表单）元素-小练习
模拟演示登录form_login.html ok.html
1.form 表示表单
2.action ： 提交到哪个页面
3.method ： 提交方式，常用get和post
4.input type=text 输入框
5.input type=password 密码框
6.input type=submit 提交按钮
7.input type=reset 重置按钮
小技巧：为了汉字对齐，输入全角的空格即可
method不写默认是get
表单登录
登陆成功
恭喜你，登录OK
input标签/元素
checked代表默认选中（即不选择默认选中）
表示图像提交
表单登录
select/option/textarea标签
：之间的文本是给客户看的，提交给URL的是value=网游的网游
textarea
rows：行
cols：列
表单综合练习
表单综合案例
表单格式化
ctrl+d：复制选中行数的所有代码
ctrl+x：删除代码