HTML学习通笔记
文章平均质量分 84
剪影的
认真做事
展开
-
第一章,Web前端设计基础
了解是我们学习很多课程非常重要的方法。Web应用项目本身是一种软件系统,它也是具有自身结构的,即系统体系结构。有一门课程《软件体系结构》会专门研究这个问题。系统体系结构是一个综合各种观点的模型,用来完整描述整个系统,通过系统体系结构就能够了解一个软件系统的基本架构。常见的系统体系结构有C/S结构和B/S结构。首先,了解一下C/S的工作流程,Server端存储了各种资源,我们在Client端通过网络发送资源请求,接收并显示Server端响应的内容。原创 2023-06-16 10:03:34 · 1544 阅读 · 0 评论 -
第二章,HTML基础
在HTML中,某些字符是预留的。例如:<br/>(换行标签)、<hr/>(绘制横线的标签)、<img src="" alt=""/>(显示图片标签)、<input type="" />(输入标签,根据不同的type属性值,会得到不同的输入元素。其中,<meta>标签的name属性记录的"名称/值"中的"名称",如name="keywrods",用户可以自定义描述网页信息的名称。一个HTML文件最基本的文档结构,是由文档里的<html>、<head>、<title>、<body>等标签按照特定的顺序构成的。原创 2023-06-16 10:01:44 · 140 阅读 · 0 评论 -
3.1 CSS概述
和与原创 2023-06-16 09:56:02 · 71 阅读 · 0 评论 -
3.3 CSS选择器
需要说明的是,如果<link>引入的外部样式出现在<style>声明的样式之后,那么外部样式相当于在<style>之后定义,其优先级就会高于内部样式。CSS可以对HTML元素样式进行分别设置,例如,将<p>元素设成红色、<h1>元素设成绿色,通过CSS选择器能够选对元素进筛选,进而设置不同的样式。(1)元素选择器,通常就是HTML的元素,在W3C标准中,元素选择器又称为类型选择器(type selector)。(3)创作者的规则高于浏览者:即网页编写者设置的CSS样式的优先权,高于浏览器所设置的默认样式;原创 2023-06-16 10:30:45 · 402 阅读 · 0 评论 -
3.5 CSS常用属性
当指定了多个字体后,浏览器会按照从前往后的序查找并设置字体,如下图所示,如果用户电脑未安装“微软雅黑”字体,则会查找并使用arial字体,依次类推,直到找到可用字体。(3)设置标志位置,使用list-style-position属性进行设置,该属性可取值inside、outside(默认),区别在于标记与列表项文本内容左边的间距不一样。(3)绝对定位(absolute),生成绝对定位的元素,相对于静态定位以外的第一个父元素进行定位,会脱离文档流(指设置绝对定位后其原来空间不再属于当前元素)。原创 2023-06-16 09:54:58 · 140 阅读 · 0 评论 -
3.6 盒模型
在CSS3中,如果box-sizing取值为border-box时,整个盒子实际大小就是所设置的宽和高,那么内容的宽度=width - (padding-left + padding-right) - (border-left + border-right),内容的高度=height - (padding-top + padding-bottom) - (border-top + boder-bottom)。(3)边框,就是指元素边框,它通过border属性进行设置,可分别设置4个方向的边框。原创 2023-06-16 09:57:32 · 62 阅读 · 0 评论 -
4.1 JavaScript初识
JavaScript实现了一种实时的、动态的、可交互的表达能力,能够对网页的行为进行编程。通常JavaScript代码以函数形式写在这对标签间,以方便开发者在该网页中需要的地方调用。(3)外链式:项目级引入方式,即通过<script language="javascript" src="xxx.js">方式载入外部JavaScript文件。(1)实现网页特效。在浏览器运行网页,切换到控制台,可观察到"HelloWord"的输出字样。在浏览器运行网页,切换到控制台,也能看到"HelloWord"的输出字样。原创 2023-06-12 11:15:41 · 89 阅读 · 0 评论 -
4.2 JavaScript基本语法
在JavaScript中定义了50多个关键字或保留字,它们是JavaScript内部使用的,不能作为变量的名称。" '+'是真的耶。◆ JavaScript的变量名最好能够说明其代表的意思,譬如:定义两个字符串变量可用str1和str2,求和变量可用sum等。在程序设计语言中其值可以变化、要先声明再引用的有名称的量,称之为变量。其工作原理是:如果条件表达式的值为真,则整个表达式的值就是结果1,否则整个表达式的值就是结果2。例如,2+2(=4),2*2(=4),2+10/2(=7),4<5(=true)。原创 2023-06-12 11:17:31 · 142 阅读 · 0 评论 -
4.3 JavaScript语句及函数
6)continue语句,和break语句类似,所不同的是,执行continue语句时,就结束本轮循环,转而执行下一轮循环。再更新条件,重新判断,执行语句,直到条件不成立,跳出循环体。document.write("调用f(x),则f(5)="+y);var str = "姓名: " + name + "<br>";它表示如果if(条件)中的条件成立,则执行语句块1,否则执行语句块2。str += "年龄:" + age + "<br>";5)break语句,结束当前循环,执行循环语句后面的语句。原创 2023-06-12 11:18:01 · 93 阅读 · 1 评论 -
4.4 JavaScript常用对象
为了实现网页特效,能够动态地控制网页的各种元素,需了解浏览器窗口及文档相关对象,包括window (窗口)、document(文档)、history(历史)、frame(框架)、location(地址)、form(表单)等对象。document.write("<h3>"+"今天是"+year+"年"+month+"月"+day+"日"+week+"</h3>")<input type="button" value="下一页" onClick="history.forward()">原创 2023-06-16 09:53:16 · 124 阅读 · 0 评论 -
5.1响应式Web设计基础
HTML5不仅仅是HTML规范的最新版本,它也代表了一系列Web设计技术的总称,其中最重要的三项技术就是HTML5核心规范、CSS3(Cascading Style Sheet,层叠样式表的最新版本)和JavaScript(一种脚本语言,用于增强网页的动态功能),这三项技术在后面的学习中都会涉及到。在一个网页中,默认情况下块级元素独占一行,是自上而下排列,行内元素自左向右排列,但是在实际的网页布局中往往需要改变这种单调的排列方式,使网页内容变得丰富多彩,CSS的浮动和定位完美的解决了这个问题。原创 2023-06-12 11:05:52 · 948 阅读 · 0 评论 -
5.2 文本类网页设计
前锋教育致力于为企业培养人才的培训理念,以“学员自学入门教程,通过基础考核后进行强化培训”为招生原则,以“针对企业需求,重视基础理论建设,强化高端应用技能”为教学目标,以“高薪保证强大的资深教育团队”为教学后盾,解决所有培训学员的后顾之忧,并解决用人企业难以招聘到合格人才的困扰。<details>标签用于描述文档或文档某个部分的细节,目前只有Chrome浏览器支持<details>标签,可以与<summary>标签配合使用,<summary>标签用于定义这个描述文档的标题。原创 2023-06-12 11:07:42 · 350 阅读 · 0 评论 -
5.3 图文类网页设计
其中,length或%用于设置对象的圆角形状,不可为负值。如果省略 bottom-left,则与top-right 相同,如果省略 bottom-right,则与top-left 相同,如果省略top-right,则与top-left 相同。前面学习了CSS3的transition和transform属性,虽然二者结合可以实现一些简单的动画效果,但是也有一些难以克服的缺点,例如我们想让动画在多个状态中转换就无法实现了,CSS3中最后一个动画相关的属性是animations,有了它就可以解决这样的问题。原创 2023-06-12 11:06:32 · 236 阅读 · 0 评论 -
5.4 HTML5表单应用
除了<input>标签外,HTML还有其他常用表单标签例如<textarea>、<label>、<select>标签等,HTML5之后还增加了<datalist>、<keygen>、<output>表单标签,接下来一一对它们进行介绍。列表通过<datalist>标签内的<option>标签创建,可以使用<input>标签的list属性引用<datalist>标签的id属性,具体用法如下。年龄:<input type=number min="18" max="100"><br/><br/>原创 2023-06-12 11:09:04 · 305 阅读 · 0 评论 -
5.5 HTML5画布
canvas意为画布,现实生活中的画布是用来作画的,HTML5中的canvas与之类似,我们可以称它为“网页中的画布”,有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,或者说一个Element元素的坐标,现在已经是一个W3C标准。要想操作HTML元素及其属性,首先应该获得这个元素对象,document对象的常用获取HTML元素对象的方法如下表所示。//===============基本绘制API====================原创 2023-06-12 11:09:57 · 199 阅读 · 0 评论 -
5.6 音频与视频
其实<audio>标签和<video>有很大的相似性,Audio对象和Video对象的DOM操作功能都是由HTMLMediaElement对象统一定义的核心功能,Audio对象指的是HTMLAudioElement对象,它完全继承了HTMLMediaElement对象提供的功能,而Video对象指的是HTMLVideoElement对象,在该对象中提供了额外的功能,主要表现在一些额外的属性上,如下表所示。它能够大幅度降低音频数据量。<source src="视频文件地址" type="video/格式">原创 2023-06-12 11:09:48 · 122 阅读 · 0 评论 -
5.7 响应式web设计
由于媒体查询只能针对某几个特定阶段的视口,在捕捉到下一个视口前,页面的布局是不会变化的,这样会影响页面的显示,同时也无法兼容日益增多的各种设备。比如,设备屏幕是414像素的宽度,在浏览器中,414像素的屏幕宽度能够展示1200像素宽度的内容。flex属性是flex-grow(扩展比率),flex-shrink(收缩比率)和flex-basis(宽度,像素值)的缩写,能够设置子元素的伸缩性。flex-flow是属性flex-direction 和flex-wrap 的简写,用于排列弹性子元素。原创 2023-06-12 11:12:04 · 801 阅读 · 0 评论