一.超文本标记语言 超文本传输协议
二.html文件结构:树形结构
三.html注释 <!--注释-->
四.简单标签:
1.标题标签h1~h6
字体加粗 级数越来越低,字体越来越小 独占一行 自动换行
2.div块标签
独占一行,自动换行
3.段落p标签
独占一行,自动换行 间距样式 段落直接有间隔
4.span标签
间隔标签 个性化样式需求 不换行
5.单标签:
hr水平分割线标签
br换行标签
五.个性化设置标签(在一行显示)
1.文字加粗
b标签
strong标签
2.下划线
u
ins
3.斜体
em标签
i标签
4.删除线
s
del
5.下标sub
H<sub>2<sub>o
6.上标sup
8<sup>2<sup>
7.上标拼音
<ruby>周杰伦<rt>zhoujielun</rt></ruby>
8.进度条
progress
<progress value="30" max="100"></progress>
meter
<meter value="80" max="100"></meter>
六列表标签
1.无序
ul>li
自动缩进,自动生成圆点
2.有序
ol>li
自动缩进,开头有数字序号
3.自定义列表
dl
dt
换行,无样式, 无缩进
dd
自动缩进
七.表格标签
1.table
属性
border边框
width宽度
height高度
cellspacing边框间隔
align 居左 居中 居右
2.tr行
属性
align位置属性
3.td 单元格
属性
align位置属性
合并
跨行合并
rowspan
跨列合并
colspan
4.th 表头
属性
align位置属性
默认加粗
tr>th
tr>td
八.媒体标签
1.a超链接
href目的地址
外部链接
target
_self
_black
锚点
通过标签的id值来确定返回的位置
2.img图片标签
属性
src:指向图片地址
width宽度
height高度
alt:图片提示文字(找不到图片时显示
title鼠标悬停显示文字
3.audio音频
属性
src:待播放的音乐文件的目标地址
controls
播放器的控制按钮
4.video视频
src
width
height
controls
播放器控制按钮
5.iframe
页面嵌套
src子页面跳转地址
width height
子页面占当前页面的宽度高度
边框
双标签
九.框架标签
iframe
页面嵌套
src子页面跳转地址
width height
子页面占当前页面的宽度高度
frameboder
边框
双标签
十.服务器交互
1.客户端向服务器发送请求 提交数据 url
2.提交方式method
get
显示提交
post
隐式提交
3.提交数据根据name属性提交 服务器收到请求向客户端响应
4.测试地址
http://httpbin.org/get
提交的参数会在浏览器地址栏中显示
提交的数据量小
安全性低
http://httpbin.org/post
隐式提交,数据不显示
提交大批量数据
安全性高
十一.快捷键
1.!回车键
自动生成html基本框架
2.> 子标签
3.* 重复生成多个
4.{} 标签显示的内容
5.$ 生成序号
6.lorem 随机生成多个单词内容
7.html5特有的语义标签 相当于div块
<header>头部标签</header>
<nav>导航栏</nav>
<main>主要内容</main>
<aside>侧边栏</aside>
<article>文章标签</article>
<footer>底部</footer>
十二.表单form
1.form属性
action 提交目的地址
method 提交方式 get、post
name form的名称
id 标签的唯一标识 不能重复
2.表单域
<1.> input:
type类型:
text 文本输入框
password 密码输入框
radio 单选框 name属性的值必须一样 才能选一个 必须给每个单选项定义value的值 checked默认选中
checkbox 复选框 name属性值必须一致 必须给每个选项定义value的 checked默认选中
color 颜色
file 文件上传
hidden 隐藏域 用于存储密码或者保密且必须的数据tocken等
placeholder
<2.> select:
下拉选项 name属性写在select标签
>option 指定option的value值 默认选中 selected
<3.> textarea:
多行输入文本域
rows 控制文本域输入的行数
cols 每行输入的字数
3.表单按钮
input type reset reset重置按钮
input type submit 提交按钮
button 普通按钮