01 web前端基础HTML

网站建站流程

1. 注册域名
2. 租用空间
3. 网站建设
   1. 产品设计原型图
   2. 美工设计UI
   3. 前端工程师开发页面
   4. 后台工程师开发后台
   5. 测试工程师测试网站
4. 网站推广
5. 网站维护

整体开发流程

常用标签及属性

常用标签	功能	属性	备注
head	定义文档的头部
title	定义文档标题		title写和你网页相关的关键词有利于SEO优化
meta	可提供有关页面的元信息		用来向浏览器或搜索引擎描述页 只可以放在head
img	定义图片	src 图像位置 alt 替换文本 title 鼠标经过图片时显示的内容	src属性是必须的
a	定义超链接	href 链接URL targe 目标，可取值_blank,_self等 name 锚点名称 title 定义了鼠标经过时的提示文字	href属性是必须的； 跳转页面可以分成外链和内链两种 内链需要html后缀； 锚点可以在页面内跳转，有两种定义方式
hr	定义水平线	align 水平对齐方式 width 宽度 单位可取px或者百分比 size 水平线高度 color 颜色	单标签
address	斜体显示字体
pre	保留原文本的格式
ul&li	无序列表	type可以控制显示样式	type的取值 disc 默认实心圆 circle 空心圆 square 小方块 none 不显示
ol&li	有序列表	type可以控制显示样式	type的取值 1 表示列表项目用数字标号 a 表示列表项目用小写字母标号 A 表示列表项目用大写字母标号 i 表示列表项目用小写罗马数字标号 I 表示列表项目用大写罗马数字标号
dl&dt&dd	自定义列表		默认两个层次
table	定义表格	border 表格边框宽度 bgcolor 背景颜色 cellspacing 单元格之间的间距 cellpadding 单元格内容与单元格边界之间的空白距离大小
tr	表格行	align 行内容水平对齐 valign 行内容垂直对齐
td	表格列	colspan 设置单元格跨列 rowspan 设置单元格跨行 align 设置水平对齐 valign 设置垂直对齐	align 可以取值 left、center、right valign 可以取值 top、middle、bottom
iframe	内联框架	src 设置页面路径 scrolling 是否在iframe中显示滚动条	行内块级元素
form	定义表单	action 提交的地址 method 提交方式 默认get name 表单提交时的名称
input&type="text"	文本输入框	value 文本框的提交值
input&type="radio"	定义单选按钮	value 控件初始值 checked 初始时控件是否被选中	用name属性控制为一组
input&type="checkbox"	定义复选框	value 控件初始值 checked 初始时控件是否被选中
input&type="file"	定义文件		使用file类型的input时要注意以下几点 form表单的method属性值要为post form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。 默认地，表单数据会编码为 "application/x-www-form-urlencoded"，不能用于文件上传
input&type="button"	定义按钮	name 控件名 value 控件值
input&type="submit"	定义提交按钮
input&type="reset"	定义重置按钮
input&type=“image”	定义图片按钮	src 图像地址
select&option	下拉列表	select属性 multiple 多选 size 显示行数 option属性 selected 默认选项 value 提交的值	optgroup标签可以对option分组
textarea	多行文本框	select属性 cols 文字区块宽度 rows 文字区块高度
label	对input元素标注	提高用户体验
fieldset	可以将表单内相关元素分组		通常和legend标签一起用，fieldset是块级元素。

H5新增标签及属性

标签	功能	属性	备注
input&type="email"	电子邮件类型		校验，输入的内容中必须包含"@"，"@"后面必须具有内容
input&type="search"	搜索类型
input&type="url"	URL类型		输入的内容中必须包含"http://"，后面必须有内容
input&type="color"	颜色类型		预定义的颜色拾取控件
input&type="number"	数字类型	min 当前域能接受的最小值 max 当前域能接受的最大值 step 递增/递减的步长	只能接受数字
input&type="range"	范围类型	min 范围下限 max 范围上限 step 递增/递减的步长 value 初始值	允许用户选择一个范围内的值
input&type="date"	日期类型
input&type="week"	周类型
input&type="month"	月类型
header	页面头部		语义化标签，块级元素
footer	页脚		语义化标签，块级元素
article	定义页面独立的内容区域		语义化标签，块级元素
aside	侧边栏		语义化标签，块级元素
details&summary	文档		语义化标签，块级元素；IE不支持 details 标签；summary表示文档标题
mark	记号文本		被mark标记的内容有黄色背景
meter	定义度量衡	max 最大值 min 最小值 value 当前值 low 最低阈值 high 最高阈值	图形显示
progress	进度条	max 最大值 value 当前值	图形显示进度条
figure&img&figcaption	图片及图片描述的组合		figcaption 描述图片标题；块级元素
nav	导航		语义化标签，块级元素
datalist&input	定义选项列表		datalist与input 元素配合使用该元素，来定义 input 可能的值；使input list属性值与datalist id属性值相同
video	定义视频	src 视频来源 可以是外链或者内链 controls 展示视频控件 loop 视频播放完成后是否循环 poster 视频下载时显示的图像/视频封面 width 视频宽 height 视频高 autoplay 视频就绪后马上播放	支持的视频格式 mp4、ogg、webM
audio	定义音频	src 音频来源 controls 展示视频控件 loop 视频播放完成后是否循环 autoplay 视频就绪后马上播放	支持的视频格式 mp3、ogg
source	为video、audio定义媒介资源		source标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
embed	定义嵌入内容	src 必须属性	可以定义插件或者声音、视频
canvas	通过canvas绘制图形		一般配合js实现复杂的动画效果，待学习

其他补充

块级元素和行内元素

1.块级元素独占一行，行内元素在同一行显示
2.块级元素默认宽度为100%，行内元素由内容撑开
3.块级元素可以设置宽高，行内元素不可以设置宽高
4.块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
5.块级元素默认的display为block，行内元素的display为inline
6.块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本
7.常见的块级元素有h1-h6，p，div，ul，ol，dl，dt，li 等，行内元素有span，strong，a，em，b，i，u等

锚点定义

方法一：
①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）
②：在页面中需要的位置设置锚点<a name=“miao”></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容
方法二：
①：同方法一的①
②：设置锚点的位置 <h3 id=“miao”>喵星人基地</h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#
方法二不用单独添加一个a标签来专门设置锚点 ，只在需要的位置的标签中添加一个id即可。

表单提交 get和post的区别

post和get区别：
1.数据提交方式，get把提交的数据url可以看到，post看不到
2.get一般用于提交少量数据，post用来提交大量数据
3.get最多提交1K数据，post理论上没有限制
4.get提交的数据在浏览器历史记录中，安全性不好

H5新增属性

1、placeholder
作用：默认提示
2、multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
3、autofocus
作用：自动获取焦点
4、required
作用：防止域为空提交表单时
5、minlength和 maxlength
作用：定制元素允许的最小字符数和最大字符数
6、min和max
作用：定制元素允许的最小数字和最大数字