1.HTML简介
HTML是用来做网页
HTML:Herp Text MarkUp Language 超文本标记语言
超文本：超：超链接 包含超链接的文本
标记语言：
标记：标签
语言：制作网页的语言
一个网页是由多个标签组成的
2.语法介绍
html是由浏览器来解析，所以不需要安装任何编译环境
Html文档的基本结构：
<!DOCTYPE html> 声明文档
<html> 是网页当中最大的标签，所有内容都要写在此标签内
<head> head头 主要用于书写网页的设置 一般写不直接显示给用的内容
包含的内容：
字符编码的设置
网页的标题
引入外部的css文件
引入外部的JavaScript 文件
Body: body体，网页的身体部分 网页中只要是显示给用户的内容，都要写在此标签
head和body 都是html的子标签
Html标签写法分类：
双标签：<标签名></标签名> / <开始标签>内容</结束标签>
单标签: <标签名 /> 一般写成<标签名>
Html标签的属性：
一般是键值对 key=”value”
属性的值必须使用双引号引起来
** 注意：**
Html不会报错 所以注意双标签不要忘了闭合
Html标签不区分大小写 规范要求都是用小写
3.html使用 标签 及有关属性
1.h1-h6 标题标签
双标签 有默认样式 字体变粗 变大 变黑 会自动换行
br 单标签 强制换行
在html中 普通文本添加换行 或者空格 在页面中只解析成一个空白符
一般一个页面中h1只使用一次 h2-h6可以重复使用
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.p 段落标签
双标签 有默认的样式 会自动换行
3.常见的实体字符 转义字符：
空格
> 大于号
< 小于号
© 版权标志，©标志
4.i 标签 b标签 em 标签 strong标签 u标签
i标签 单纯的字体斜体
em 也是斜体 只不过具有强调意义 表示强调 给搜索引擎使用
b 加粗
strong 加粗 具有强调意义
u 下划线
以上都是双标签
5.br hr
都是单标签
br 强制换行
br 单标签 强制换行
在html中 普通文本添加换行 或者空格 在页面中只解析成一个空白符
hr 水平线
6.img 图片标签
单标签
属性：
src 图片的地址
title 标题 当鼠标移入时 给出的提示
alt 当图片加载失败时的替代内容
可以使用网络图片或者本地的图片
使用的是本地的图片资源
相对路：相对于当前文件来去查找指定的资源
./ 代表当前路径
../ 代表上一级路径
windows下根目录 根目录一般是 盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示
绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源
推荐使用相对路径
7.列表标签
无序列表
ul: 声明一个无序列表
li: 列表项
type: 默认disc 圆
square 方块
circle 空心圆
例如
<ul type="circle"> 列表项前面为空心圆
ul中的直接子元素必须是li
有序列表
ol:声明一个有序列表
li: 列表项
type:
1 代表数字 默认就是数字
a 代表小写字母
A 代表大写字母
i 小写的罗马数字
I 大写的罗马数字
start: 指定以第几个开始 只能写数字
例如：
<ol type="a" start="2"> 小写字母第二个b开始
自定义列表
dl:声明一个自定义列表
dt:列表的标题
dd:列表描述项
8.a 标签超链接
超连接a 双标签
页面跳转
href: 跳转的地址
如果不给值 跳转当前页面
target:_blank 新打开一个窗口加载跳转后的页面
例子：新打开一个窗口跳转百度
<a href="http://www.baidu.com" target="_blank" title="来点我呀">点我跳转百度</a>
锚点 ：跳转到当前页面的指定位置
给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到 本地html文件的指定位置
例子：
<a href="#item5">跳转到五楼</a>
<p id="item5" style=" height:650px;background-color:yellow">五楼
a标签的href属性的值为指定页面中标签的id的值
<a href="./5超链接.html#item5">
跳转到5超链接.html的五楼位置</a>
9.表格标签
其中有关标签和属性介绍：
table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列
水平对齐方式：align **
align:默认靠左对其 left
center 居中
right 靠右对齐
如果给tr设置 设置当前行的所有
如果给td/th 设置当前一列
valign: 默认垂直居中 **
top:靠上对其
bottom:靠下对其
单元格合并： **
跨行合并
rowspan: 设置当前列 占几个行的高度
跨列合并
colspan: 设置当前列占 几个列的宽度
10.form ：声明一个表单域
**表单有关属性：**
action:提交地址 如果不写，提交到当前页面
method: 指定提交数据的方式
get: 默认是get提交
将数据明文显示在地址栏 相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏 相对安全
理论上数据大小不受限制 表单的数据是要提交给后台，提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容 所以表单控件除了按钮都要加name属性
表单控件的属性：
name: 必须添加 座位提交数据的key
value: 代表值
type: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框 默认选择加checked
同一组单选框的name属性的值必须相同
必须设置默认值 value属性
checkbox: 多选框 默认选择加checked
同一组多选框的name属性的值必须相同
必须设置默认值 value属性
select>option: 下拉选框 option 选项 默认选择加selected
select 必须添加name属性
option 必须设置value
textarea:
文本域/多行文本输入框 双标签
hidden: 隐藏域
有些时候有些数据不希望用户看到和修改所以可以使用隐藏域
提交按钮： type="submit"
<button>按钮</button>
单纯的按钮：
在form 表单域中 type="button" 只是单纯的按钮 没有提交意义
checked 设置单选框和多选框的默认选中状态
selected 设置下拉选框的默认选中状态 给option设置
disabled 禁用
type="reset" 重置按钮
type="image" 图片按钮
注意：按照标签效果分类：
块标签：
独占一行 宽度默认是父元素的100% 默认高度由内容决定
支持所有的样式
h1-h6 p ul li ol dl dt dd table tr hr
行标签：
不会独占一行 元素排在一行显示 默认宽度是0 高度由内容决定不支持宽高属性和margin的上下属性
I b u em strong a span
行内块：
不会独占一行 支持所有的样式 默认宽度0 默认高度由内容决定
Img input
没有默认样式的块标签和行标签
div 块标签 没有默认样式 一般配合css做网页的布局
Span 行内标签，没有默认样式 一般也是配合css去使用
type 类型改为file 上传头像
上传头像：<input type="file" name="img">
<tr>
<td>用户名：</td>
<td> <input type="text" name="username" placeholder="请输入用户名"> </td>
</tr>
效果显示如下：（用户名的input内有虚的请输入用户名）
注意：
在表格里面
tbody 代表表格内容部分
tfoot 代表表格尾部
thead 代表表格头部
都是双标签，而且就算在html文件中三者位置前面随意，依然有着上述固定格式
917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
