文章路径: 全部 / 叶飞 / 源栈培训:ASP.NET全栈开发 / Web前端 / HTML和CSS /

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。


更多
2020年02月28日 22点52分 作者:叶飞 修改

CSS:布局:float / position / flex / 响应式 / 其他

使用浮动和定位,可以将元素放置到我们期望的位置,是目前页面布局中最为广泛使用的手段!浮动(float)浮动最早被应用于文字环绕:但后来被广泛用于布局(完全取代了表格布局)。体会“浮动”:除了左右以外,还望向“上”漂,漂到上面有元素遮挡为止,左右方向也一样。此外,浮动还会:将流元素自动变成块元素消除margin折叠效果清除(clear)浮动:是清除其上元素浮动对自己造成的影响(演示:强制拉伸背景,略) 定位(position)相对(relative)定位:相对于本来应该在的位置觉得(absolute)定位: ……

CSS 布局 浮动 定位
2020年02月23日 00点29分 作者:叶飞 修改

CSS:盒子模型:border / display / 宽高 / overflow / 内&外边距 / box-sizing

CSS 盒子模型CSS把认为所有的元素都是一个“盒子(box)”。我们可以通过添加这样一个样式,给所有元素都添加一个边框来看一看:* {border: 1px solid;}所以每个盒子,都可以设置:border(边框)设置边框的粗细(width)、样式(style)和颜色(color)border-width: 5px; /*粗细为5px*/border-style: dashed; /*样式为虚线*/border-color: red;一样可以合并简写:border: 5px dashed red; ……

CSS 盒子模型 浮动 定位
2020年02月27日 22点43分 作者:叶飞 修改

CSS:伪类和伪元素

伪类伪类是CSS中容易混淆的一个概念:它有的基于元素“自身的”状态(比如表单元素是否选中等),有的基于用户操作元素的状态(比如鼠标悬停于元素上),有的基于元素的位置(比如第n个子元素),还又基于语言其它什么乱七八糟的东西……前端就这么任性!o(* ̄︶ ̄*)o,认真来说,其实是因为历史原因:最开始只有锚伪类,后面才一点点的加上其他伪类……锚伪类用于a标签,它基于用户的鼠标操作,应用得最为广泛,如:a:hover{color:wheat;}意思是当鼠标悬置(hover)在a标签上时,将这个a标签的颜色变成wh ……

CSS 伪类 伪元素
2020年02月23日 00点30分 作者:叶飞 修改

CSS:选择器:引入方式 / 种类 / 层叠和冲突 / 组合

使用CSS的方式内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。外联式Linking(也叫外部样式):将网页链接到外部样式表。(推荐:便于重用,内容与表现分离)<link rel="stylesheet" href="/css/lucky.css" />(演示:略)体会:在计算机各个领域,大家对“解耦”的渴望!选择器标签(tag)h1{}属性a[href]{}还可以使用:[attribute=value]用于选取 ……

前端 CSS 选择器
2021年05月19日 11点47分 作者:叶飞 修改

CSS:行内样式:字体 / 颜色 / 背景 / 列表 / 表格

CSS样式的设置,效果其实就和我们在MS office中进行编辑是类似的: 只不过CSS的样式设置是代码形式的。 CSS最简单的设置方法就是在HTML标签中style属性设置,比如: <p style="color:red;"> 源栈欢迎您!</p>style属性值中CSS设置也是“键值对”形式,键和值之间用冒号(:)连接;多个键值对之间用分号(;)分隔。比如:<p style="font-size:24px;color:red;"> 源栈欢迎您!</p> ……

CSS 入门 基础
2020年02月17日 23点43分 作者:叶飞 修改

HTML:表单元素:form / 按钮 / 文本输入 / 选择 / 文件上传 / HTML5新标签

一定要放在form里面才能提交到后台radio/checkbox:如何识别同一组?使用name属性相同。实际上,所有提交到后台的数据都是“键值对”形式的字符串,name是键值对中的“键”,是后台区分传入值的唯一来源没有name的表单元素无法提交到后台value:需要设置属性:checked/enable/disableURL参数(?key1=value1&key2=value2)和表单数据(<form></form>)关于GET和POST:本质区别:http头中method ……

源栈培训 前端 HTML 表单
2020年02月17日 23点46分 作者:叶飞 修改

HTML:a标签 / title / 路径 / 锚 / 下载 / img标签 / base64

如果要说HTML中谁是最最重要的元素,那一定是超链接了。是超链接把我们一个一个的网页连接起来,从而形成了今天广阔无边的互联网世界!a标签使用a标签就可以生成一个链接元素:<a href="http://17bang.ren" title="飞哥的线上互助社区" target="_blank">一起帮</a>a标签本身并不难,难的是它使用的属性:title当鼠标悬停在a标签上时,浏览器会显示title指定的内容,给用户提示(对SEO也有帮助) title还可以应用在其他很多标签中,比 ……

HTML 链接 图片 多媒体
2020年02月17日 23点45分 作者:叶飞 修改

HTML:容器标签:table / 列表 / div和span / 其他

关于<table border="1"><thead><tr><th colspan="2">h1h2</th></tr></thead><tbody><tr><td rowspan="2" >row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, ce ……

源栈培训 前端 HTML 列表 表单
2020年02月18日 08点53分 作者:叶飞 修改

HTML:元素组成 / 文档结构 / 文字标签 / 注释 / 语义 / 转义

学习HTML,其实就是学习一系列的标签和属性,飞哥将带着大家依次学习……插入:Visual Studio:1-前端初识 文字类标签coding is everything!<!--标题--><h1>一起帮·源栈欢迎您!</h1><h2>飞哥祝你学习进步,早日年薪过万!</h2><!--还可以有h3,h4,h5,h6--><!--段落--><p>你觉得这些选择本身,真的能够决定你的人生成败么?真正决定成败的,不是 ……

源栈培训 前端 HTML
2020年08月20日 21点02分 作者:叶飞 修改

VS Code:下载和安装 / 配置插件 / F12调试

学习HTML,其实就是学习一系列的标记(markup),而标记的核心就是元素(element)HTML标记语言的核心就是元素。元素由标签、属性和文本内容组成,比如:<h1 style="color:red">一起帮·源栈欢迎您!</h1>其中:元素(element):整个这一行就是一个标签(tag):h1,又分为开始标签(<h1>)和结束 (</h1>)标签文本(text):一起帮·源栈欢迎您!,放置在开始标签和结束标签之间 属性(attribute):st ……

VS html 入门

Web前端


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript入门

Javascript的基本语法:为能使用JQuery和Bootstrap.js的使用打下基础

ES进阶

借助于ES6,讲解JavaScript中一些更复杂的语法特性,如作用域、闭包、面向对象、原型链、this变化、module等

Bootstrap和JQuery

CSS框架Bootstrap,和JavaScript的JQuery类库(含Ajax)

Vue.js

全部
关键字



帮助

反馈