web前端

什么是web前端：多种技术参与制作，为展示用户的网页，网站的前端
多种技术包括：HTML，CSS（编程技术），javaScript（编程语言），jquery，BT(bootstrap)

第一章

HTML：hyper text markup language超文本标签语言，目前运用最广泛技术之一，网页呈现的主要基石，
是一个描述性文本。可以描述文字，表格，声音等
HTML分为两部分：head（头部）：提供浏览器所需的信息
body（主体）：提供网页的主要内容
HTML发展史：诞生于90年，Tim Berners Lee
HTML的优点：简单灵活，可扩展性高，平台无关性

第二章 环境配置和浏览器说明

2.1环境配置

• 运行环境：有一台浏览器的pc即可
• 开发环境：
  2.2浏览器
  浏览器：用来渲染和呈现网页的软件
  历史:第一款商用浏览器：伊利诺斯州立大学的超级计算机应用中心发布的Mosiac，直接促进了互联网的发展
  2.3HTML的语法结构
  （1）标签大多数成对出现，有开始标签，有结束标签，自结束标签
  （2）标签可以有属性，有属性必有值
  （3）开始和结束标签之间的部分称为区域
  （4）标签不区分大小写
  2.4网页的分类
  静态页面：在不修改源代码的前提下，无论时间去访问这个网页都会得到相同的结果。
  动态标签：用户通过提交数据给网站，网站根据用户提供的数据进行反馈，通常问加盟后缀为jsp，aspx，asp，php

第三章 HTML程序

常用标签：加粗：b/strong；strong带有语气成分 bold
斜体标签：i/em
下划线：u—underline
删除线：del
换行：br：
段落标签：p
格式化输出：pre
行内标签之一，修饰所包裹内容：span；不能直接支持高宽属性
块标签：div:内容即使不满一行，也会占满一行，支持宽高属性
自结束标签：不需要结束标签，如果有html文件头声明斜杠可以省略
下标签：sub
上标签：sup
分割线：hr
标题标签：hn（h1-hn），h1最大
语义化标签
优点：增强代码可读性，提高程序员的维护效率，降低文虎成本
可以为搜索引擎起到引导作用
图片标签：img：gif:支持动画和背景透明，256色以内
<img src= alt=“” title=“”>alt：当图片无法正常显示时，显示文本内容；title：当鼠标悬停时现实的文本内容，当alt省略时，alt=title
音频标签和视频标签：（audio，video）
语法：<audio src=“资源路径” autoplay（自动播放） muted （静音）controls（显示操作页面）（布尔值，写出来默认为true，无法修改，除非移除属性键名即是键值）>；video一样
audio和video在主流浏览器上不支持自动播放，video添加muted静音可以自动播放。

表格标签
table包含子元素有thead，tbody，tfoot，

• 前三个标签可以分批次显示表格，不至于完全加载才能显示
• 无论这三个标签的书写顺序怎样，都会按照头，躯干，尾部的顺序进行输出

tr（row，表示创建一行），td
border：边界；cellspancing：边距；cellpadding;边界与表格的距离
width/height：用于设置宽高
align：对齐方式
表格的合并：
rowspan：由上至下合并所填数字的单元格
colspan：由左至右合并所填数字的单元格

超链接标签
超链接标签是H5的重要组成部分之一，它通过超链接实现跳转其他页面的目的
文字超链接：
点击这里进行跳转；如果不写target，默认为self，通过自身选项卡进行加载页面，如果是blank则新建一个选项卡进行跳转
锚链接：
制作网页时，如果网页较长，可在顶部创建一个a标签和底部标签的id绑定（#id），点击a标签即可跳转
图片链接
在a标签中加入img标签即可达成点击图片跳转的目的

表单标签
用于给用户进行数据提交的标签，一种交互标签
form：通过form标签创建一个表单，三个重要属性：
action：填入一个指向服务器的url，这个url指向转为处理表单的接口函数
method：http的请求方式，这里主要使用get和post
input：最常用的输入标签，有多种类型
select：下拉框，multiple存在时为
textarea：多行文本框
列表标签
ol：有序列表
ul：无序列表
dl：dt;标题，dd子项，列表内容

第四章层叠样式表CSS

语法结构：

`element、class、id{
	样式属性：值
}`

• 行内模式（标签模式）：写在标签内部 内嵌样式（页面样式）：写在style标签中
  外部链接样式：通过link标签将已经写好的css文档引入到当前页面中 import导入式：通过css提供的import功能进行导入的

link和import的区别：
1：归属性区别：import的呼吁css提供，link是html自带的标签；
2：加载顺序区别：link会在加载页面时进行加载，而import会在页面加载完毕后再进行加载；
3：兼容性区别：link是html自带的，不存在兼容性问题，而import是css2.1版本才提供的，对应IE5.0以上的浏览器才可以使用；
4：使用DOM的区别：
CSS的选择器
基本选择器:
标签选择器：通过标签名书写css样式，作用于全局；语法结构

标签{
css内容
}

id选择器：作用于被绑定的id的标签；语法结构

#id{
css内容
}

类选择器：通过.类名的形式创建css样式，作用在通过属性class引用它的表签内；
通配符选择器：一般是为了清除浏览器样式下使用
包含选择器：

• 子代选择器：它之修饰某标签的下一级标签

（标签/.类名/#id ...）（空格）标签

• 后代选择器：修饰某标签的所有子标签
• 分组选择器：通过“逗号”可以同时创建多种选择器
• 属性选择器：根据元素的属性或者属性值来进行选取要修饰的元素

[属性=值]
[属性*=值]
[属^=值]：如果属性的值是以“值”开头的则选择该标签
[属性$=值]：如果属性的值是以“值”结尾的则选择该标签
[属性~=值]：如果属性的值包含“值”并且是一个完整单词则选择该标签

伪类选择器：
可以修饰同一个标签的不同状态的样式

: link 常规的链接样式
:visited 点击过后的样式 
:hover 鼠标悬停的样式
:active：点击中的样式

伪元素选择器：
通过其可以设置元素的指定样式
主要用来修改元素内的文本样式比如，首字母或者首行样式，或是在元素内容前后插入其他样式

::before当前内容的前面部分
::after当前内容的后面部分
::first-letter当前内容的首字母部分
::first-line当前内容的首行部分
::selection当前部分的选中部分

最后

以上就是俊秀黑米为你收集整理的web前端的全部内容，希望文章能够帮你解决web前端所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。