HTML简介
-
HTML是用来做网页
-
HTML：Herp Text MarkUp Language 超文本标记语言
-
超文本：超：超链接 包含超链接的文本
-
标记语言
- 标记：标签
- 语言：制作网页的语言
- 一个网页是由多个标签组成的
语法介绍
<!DOCTYPE html> 声明文档
<html> 是网页中最大的标签，所有内容都要写在此标签内
<head> header 头 主要用于书写网页的设置，一般写不直接显示给用户的内容（字符编码的设置，网页的标题，引入外部的css文件，引入外部的JavaScript文件）
<meta charset="UTF-8">
<title>标题</title>
</head>
<body> body 身体 网页的身体部分 网页中只要是显示给用户的内容，都写在此标签内
</body>
</html>
-
head和body都是html的子标签
-
HTML标签写法分类：
- 双标签：<标签名></标签名>
- 单标签：<标签名>
-
HTML标签的属性：
- 一般是键值对 key=“value”
- 属性的值必须使用双引号引起来
-
HTML不会报错，所以注意双标签不要忘记写闭合
-
HTML标签不区分大小写，规范要求都是小写
HTML常用标签
空格
> 大于号
< 小于号
© 版权标志
-
i标签，em标签，b标签，strong标签，u标签
- i标签 单纯的字体斜体
- em 也是斜体 只不过具有强调意义
- b 加粗
- strong 加粗 具有强调意义
- u 下划线
- 以上都是双标签
-
br标签，hr标签
- 都是单标签
- br 强制换行
- hr 水平线
-
img 图片标签
-
单标签
-
属性：
- src 图片的地址
- title 鼠标移入的提示信息
- alt 图片加载失败时的替代内容
-
可以使用网络图片或者本地的图片
-
使用的是本地的图片资源
-
相对路径：相对于当前文件来去查找指定的资源
- ./ 代表当前路径
- …/ 代表上一级路径
- windows下根目录 根目录一般是 盘符:
- 注意加载图片时盘符前面加/
- Linux下的根目录用/ 来表示
-
绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源
-
-
推荐使用相对路径
-
列表标签
无序列表
-
ul: 声明一个无序列表
- li: 列表项
- type(了解):
- 默认disc 圆
- square 方块
- circle 空心圆
-
ul中的直接子元素必须是li
有序列表
- ol:声明一个有序列表
- li: 列表项
- type:
- 1 代表数字 默认就是数字
- a 代表小写字母
- A 代表大写字母
- i 小写的罗马数字
- I 大写的罗马数字
- start: 指定以第几个开始 只能写数字
自定义列表
- dl:声明一个自定义列表
- dt:列表的标题
- dd:列表描述项
a 标签超链接
- 超连接a：双标签，页面跳转
- href：跳转的地址，如果不给值 跳转当前页面
- target：_blank 新打开一个窗口加载跳转后的页面
跳转到当前页面的指定位置 锚点
- 给指定标签添加id属性
- a标签的href属性的值为#指定元素id属性的值
- 跳转到 本地html文件的指定位置
- a标签的href属性的值为指定页面中标签的id的值
表格标签
-
table: 声明一个表格
- border: 边框
- cellspacing: 设置表格和表格之间的间距 **
- cellpadding: 设置表格中内容距离当前表格边框之间的间距
- tr: 声明一个行
- td/th: 声明一个列
-
水平对齐方式：align
- align:默认靠左对其 left
- center 居中
- right 靠右对齐
-
如果给tr设置 设置当前行的所有
-
如果给td/th 设置当前一列
-
valign: 默认垂直居中
- top:靠上对其
- bottom:靠下对其
-
单元格合并：
- 跨行合并
- rowspan: 设置当前列 占几个行的高度
- 跨列合并
- colspan: 设置当前列占 几个列的宽度
- 跨行合并
表单
form ：声明一个表单域
属性：
- action:提交地址 如果不写，提交到当前页面
- method: 指定提交数据的方式
- get: 默认是get提交
- 将数据明文显示在地址栏 相对不太安全
- 数据大小受浏览器限制
- post:
- 不会将数据明文显示在地址栏 相对安全
- 理论上数据大小不受限制 表单的数据是要提交给后台，提交数据的格式一般是键值对
- get: 默认是get提交
- Uname=用户在用户名框输入的内容 所以表单控件除了按钮都要加name属性
- 表单控件的属性：
-
name: 必须添加 作为提交数据的key
-
value: 代表值
-
input 控件的type属性: 指定你的控件类型
- text 普通文本输入框
- password 密码输入框
- radio 单选框
- 同一组单选框的name属性的值必须相同
- 必须设置默认值 value属性
- checkbox: 多选框
- 同一组多选框的name属性的值必须相同
- 必须设置默认值 value属性
- hidden: 隐藏域
- 有些时候有些数据不希望用户看到和修改所以可以使用隐藏域
-
select>option: 下拉选框 option 选项
- select 必须添加name属性
- option 必须设置value
-
textarea:文本域/多行文本输入框 双标签
-
提交按钮：
- type=“submit”
<button>按钮</button>
-
单纯的按钮：
- 在form 表单域中 type=“button” 只是单纯的按钮 没有提交意义
-
checked 设置单选框和多选框的默认选中状态
-
selected 设置下拉选框的默认选中状态 给option设置
-
disabled 禁用
-
了解：
- type=“reset” 重置按钮
- type=“image” 图片按钮
-
按照标签效果分类：
- 块标签：
- 会自动换行(独占一行)，h1-h6、p、ul、li、ol、dl、dt、dd、table、tr
- 行标签：
- 不会自动换行，标签和标签并排在一行显示,没有宽高属性，I、b、u、em、strong
- 行内块：
- 不会自动换行，标签和标签并排在一行显示，可以设置宽高，Img、input
没有默认样式的快标签和行标签
- div 块标签，没有默认样式，一般配合css做网页的布局
- span 行内标签，没有默认样式，一般也是配合css去使用
1371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
