web的标准（对应的计算机语言）
结构对应的是HTML
表现对应的是CSS
行为对应的是javascript
网页和网站的概念
网页：个体 后缀名文件为.html
网站：整体是若干个网页的集合（html语言中有一个超链接标签）
什么是html？
超文本标记语言
超：超越
文本：泛指网页中的结构
标记：占坑 规定当前结构如何显示
语言：约束 规范
解释：如果使用了规范的html语言中的标记，超越正常的网页布局
创建站点
代码有很多的结构、表现、行为等
为了整合资源 需要创建相应的站点 把所有的资源放在相应的站点下面
生成基础机构（区分资源 结构整洁）
将输入法切换到英文状态下 shift+！ 回车
html:5
在编辑器中一些常见的快捷方式
ctrl+s 保存
html中注释符号 注释的代码写在中间
单行注释 ctrl+/
多行注释 ctrl+/
部分注释 alt+shift+a
基础结构解释
html 根元素 指的是浏览器文本
body 浏览器
建议将所有的html的结构代码全写在body中
编辑器中常用的插件
编辑器的汉化插件Chinese
在 编辑器中打开浏览器
open in browser
view in browser
liveserve 实时更新
html基础语法的解释
双标记/常规标记 <标记的名称 属性1=”属性值1“ 属性2=”属性值2“/>
单表记/空标记 <标记的名称 属性1="属性值1" 属性2="属性值2"/>
尖角符号后面的第一个英文单词就是当前标记的名称 标记又可以称为标签或者元素
双标签有开始也有结束 在结束标签的前面有个反斜杠（不可省略）
单标签只有结束 在结束名称的后面这个反斜杠可以省略
在标签名称后面的单词就是标签的属性（描述标签）标签名称和属性之间要有空格
属性和属性值之间用等号相连 属性值需要用引号引起来
当一个标签有多个属性的时候 属性是不区分前后顺序的
标题字体的使用
标签名称：h1~h6
默认样式
字体随着序号越来越小
字体加粗效果越来越弱
作用
h1固定作用 唯一性 存放页面中最重要的部分
h2到h6没有固定用法
快捷用法
快速选择相同的部分增删改查
选中标签的共有部分（一对标签中只需要一个光标）
ctrl+d (有几个按几次)
移动键盘上的上下左右键控制光标位置
快速生成法
h$*6{文本}
h表示标签名称
$表示序号 从一开始
*6出现6个
{文本内容}
注意：无法检测到的时候 删除最后一个符号 重新写即 可
段落标签的使用
没有用标签包裹的文本，默认是在一行显示的，在编辑器内换行和空格有若干个，也只会解析一次。
标签名称：p(双标签)
默认样式：段落标签独占一行，默认上下排列
上下是有间距的
p标签的宽度会跟随浏览器的宽度进行变化
编辑器的设置
fontsize 编辑器中字体的大小
wordwrap 是否换行
autosave 自动保存
加粗和倾斜标签的使用
标签名称：b strong
区别：strong比b标签要粗一些，但是浏览器区分不明显，肉眼不可见
倾斜标签的使用
标签名称:i、em
区别：em要比i更倾斜一点，但是浏览器区分不明显，肉眼不可见。
常见的单标签/空标签
hr横线
br换行 强制性的换行
转义字符：
< <
> >
空格
©版权所有
& &
拓展
sup 上标
sub 下标
列表标签的使用：无序列表、有序列表、自定义列表
- 无序列表
标签名称：父级标签 ul 列表盒子 没有样式；
子级标签： li 列表
默认样式
无序列表的默认符号是黑色的实心圆
无序列表的样式默认独占一行，会换行显示
列表默认有缩进效果
作用：新闻列表页面
- 有序列表
标签名称：
父级标签：ol
子级标签：li
默认样式：
有序列表的默认符号是数字符号
有序列表的样式默认独占一行，会换行显示
列表默认有缩进效果
作用：轮播图
拓展属性
type类型 改变默认的符号
属性值默认为1 表示阿拉伯数字
小写/大写的字母 a 、 A
i / I 罗马数字
start 开始 控制当前符号从第几个开始的 属性值一定要是一个数字
- 自定义列表
标签名称
父级标签： dl
子级标签： dt 和dd
超链接标签的使用
标签名称：a（双标签）
默认样式：
a标签有下划线
默认字体颜色是紫色的 添加了herf属性和属性值之后字体会变成蓝色
属性
herf 链接地址
title 提示文本
target 目标 控制点击跳转打开的方式
默认值：_self 覆盖原窗口
_blank 打开新的标签页
拓展
禁止跳转 ## javascript:;
在head区域内 设置base标签 把target="blank"设置
图片的使用（image preview）
标签名称：img(单标签)
属性
src 图片的地址
alt 提示文本 当图片加载失败的时候显示的一段提示文本
title 可以在所有的html结构标签上使用
了解的属性
width/height 宽度和高度（图片是结构 默认有初始的宽高）像素 px
border 边框（边框的大小+样式：实线+颜色：黑色）
路径的使用
绝对路径 含有盘符
本地可以用 但是在线的时候不建议使用绝对路径引入地址
相对路径
同级找同级 目标文件的文件名称
上级找下级 目标文件的文件夹名称/目标文件的文件名称
下级找上级 ../目标文件的名称
跳出当前文件夹 ../
html+css => div+css
div:是一个盒子 没有具体的含义 包裹其他标签作为网页的布局
span:是一个盒子 没有具体的含义 包裹文字
表格的使用：表格用来布局的，但是表格中含有计算属性 现在表格只用来展示数据
标签的名称
table 表格
tr 行
td 列（单元格）
属性
width/height 高度和宽度
border 边框
bordercolor/bgcolor 边框的颜色/背景颜色
cellspacing/cellpadding 单元格与单元格之间的距离 / 单元格与内容文本之间的距离
cell 细胞 、单元格
space 空间
padding 内边距
重点：对齐方式
水平方向 align:left/right/center
可以给所有的标签添加控制水平方向对齐
垂直方向 valign:top/bottom/middle
只能给tr/td
难点：合并单元格 span作为属性出现的时候表示选中几个
colspan
rowspan
标签嵌套规则
常用的嵌套 ul > li 、ol > li 、dl > dt + dd 、div > li 、ul > li >ol
加粗和倾斜 strong 、b 、i 、em
a > img
常见的错误：p和h标签
p标签不能嵌套h标签
h标签可以嵌套p标签
p标签之间不可以嵌套
总结：块级元素可以嵌套行内元素
表单的使用： 收集用户信息，提交保存
- 表单框
- 表单控件
表单框的标签名称：form 没有实际含义 就是一个盒子 包裹所有用户信息
属性：action：行为动作 提交方式 地址
name：表单框的名字 （了解）
method 方法 与后台交互的方式 get /post
get是携带参数的 相对而言是不安全
？ 是接参数
表单控件的标签名称：input
了解
name 表单控件的名字
size 尺寸大小 单位是字符数
maxlength 最大长度 限制用户输入的最大长度（手机号码）
重要
type 默认值是text 表示文本输入框 属性值有很多 不同的作用
value 提示文本 value 的作用会跟谁type属性值而改变
input中type表示类型
默认值是text表示文本输入框 value表示提示文本 占位置 用户填写信息的时候需要手动删除文本
password 密码框 H5中新增了属性 placeholder 提示文本 不占位置 用户不需要手动删除
radio 单选按钮 设置相同的name值
checkbox 多选按钮
disable 禁用
checked 默认选择
功能按钮（必须在form表单框下）
submit 提交
resert 重置
比较特殊的按钮标签：空按钮 绑定事件
type="button"
<button> 默认会提交一次表单
扫一扫
9902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
