什么是web前端：简单说web前端就是网页，由多种技术参与制作，用于给用户展示的网页，就是所谓网站的前端
多种技术：
- HTML
- CSS
- JavaScript
- jQuery
- BT（bootstrap）
更高端技术：
AngurlarJS，VUE，React，webpack，nodeJS
一、HTML
- 什么是HTML：超文本标签语言
可描述文字 表格 声音 视频 动画 链接 - HTML分两部分：
- 头部head标签：提供浏览器所需要的信息
- 主体部分body标签：提供网页的主要内容
- HTML优点：
- 简单灵活
- 可扩展性高
- 平台无关性
二、环境配置和浏览器说明
- 环境配置：
- 运行环境：有一台有浏览器的PC即可
- 开发环境：。。。
- 浏览器：什么是浏览器：用来渲染和呈现网页的软件
三、HTML语法结构
- 标签大多成队出现，有开始标签和结束标签，自结束标签除外
- 标签可以有属性有属性必有值
- 开始和结束标签之间内容称为区域
- 标签不区分大小写
四、网页分类
静态页面：在不修改源代码的前提下，无论你何时去访问网页都会获得相同结果。后缀名为html
动态交互式页面：用户通过提交数据给网站，网站根据用户提交的数据进行反馈。后缀名为jsp，aspx，asp，php
五、HTML网页
- 常用标签：
加粗标签：b/strong带有语气成分
斜体标签：i/em
下划线标签：u
删除线标签：del
换行标签：br
段落标签：p
格式化输出标签：pre
众多行内标签之一：span用于修饰所包裹的内容
众多块标签之一：div内容即使不满一行也会占满一行
行内标签修饰所包裹的内容，不能直接支持宽高属性
块标签即使不满一行也会占满一行，支持宽高属性
自结束标签：不需要结束标签的标签，如有html文件头声明，斜杠可以省略
下标标签：sub
上标标签：sup
分割线标签：hr
标题标签：h1-h6，h1标题最大，依次减小 - 语义化标签
优点：增强代码可读性，提高维护效率较低维护成本，可为搜索引擎起到引导作用 - 多媒体标签
图片标签：img
音频标签：audio
视频标签：video
autoplay–自动播放
controls–显示操作界面
audio和video在主流浏览器的上不支持自动播放，若进行自动播放需添加静音muted
布尔型属性：默认true并且无法修改，除非移除属性 - 表格标签
通过table标签创建
- 包含子元素：thead，tbody，tfoot，td（列），tr（行）
- thead，tbody，tfooot：三标签可进行分批次显示表格
- 无论这三标签如何放置总是以head，body，foot输出
table支持属性： - width/height：用于告知表格宽高，支持具体像素输入，也支持百分比
- align：控制表格再页面中的位置
表格合并： - rowspan：所填数字为要合并的单元格个数，从上至下合并
- colpan：所填数字为要合并的单元格个数，从左至右合并
- 超链接标签
超链接标签时H5的重要组成部分之一，通过超链接实现跳转其他网页的目的，a标签
- 文字超链接
<a href = ""要跳转的页面URL target = “跳转方式”>
target：如果不写此属性，target默认是self，将通过自身选项卡加载页面，若是_blank将新建选项卡进行跳转 - 锚链接
制作网页时，网页巨长，可在顶部位置创建一个a标签并绑定其id（#id）点击标签即可达到跳转 - 图片超链接
在a标签中填入img标签，即可达到点击图片即跳转 - 热区超链接
将一图片分割为多个区域，区域可为矩形圆形多边形，通过点击不同区域进行不同跳转
- 表单标签
给用户进行数据提交的标签，属于一种交互标签，form标签
具有三重要属性：
- action：需要填入一个指向服务器的url，转为处理表单的接口函数
- method：http的请求方式，主要使用get和post
三重要子标签： - input：最常用输入标签，有多重输入类型
- select：下拉框，multiple属性存在时，它是一个列表
- textarea：多行文本框
- 有序列表
ol标签 - 无序列表
ul标签
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
