15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > Web页面制作基础,辅助你更好的学习

Web页面制作基础,辅助你更好的学习

时间:2023-07-20 21:00:02 | 来源:网站运营

时间:2023-07-20 21:00:02 来源:网站运营

Web页面制作基础,辅助你更好的学习:
说明:仅作为学习辅助
那么Web页面制作基础,能让你掌握什么呢?

第一节掌握Web基础知识。

第二节掌握HTML基础知识。

第三节掌握CSS基础知识。

web开发背景

  1. 计算机语言的概念
  2. 解释和编译
  3. Sublime的介绍
  4. 开发者工具介绍
  5. 命名规范
命名规范
学习前端接触的web基础语言,HTML,CSS,JavaScript

Web基础知识

每次15分钟朗读:

  1. Internet,中文为因特网,国际互联网。
  2. 它是由所有使用公用语言互相通信的计算机连接而组成的全球网络。
  3. WWWWorld Wide Web的缩写,中文名万维网。
  4. WWWInternet的最核心部分。
  5. 它是Internet上那些支持WWW服务和HTTP协议的服务器集合。
  6. WWW在使用上分为Web客户端和Web服务端。
  7. 用户可以使用Web客户端访问Web服务器上的页面。
  8. Website,中文名为网站,是指在Internet上根据一定的规则,使用HTML等工具制作的用于展示特定内容相关网页的集合。
  9. URL,是Uniform Resource Locator的缩写,中文名为统一资源定位符,俗称网址,它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。

URL的一般格式:

协议://主机地址(ip地址)+目录路径+参数常见的协议有:

a. ftpFile Transfer Protocol,文件传输协议,可以通过FTP访问服务器上的文件。通常使用时在主机地址前面加上“用户名:密码@”。

示例:

url: ftp://admin:12345@113.129.xxx/html.pdf b. file:主要访问本地计算机中的文件。
c. telent:允许用户通过一个协商过程与一个远程设备进行通信。
d. httpHyper Text Transfer Protocol,超文本传输协议,是用于从万维网服务器传输超文本到本地浏览器的传输协议。

  1. Web StandardWeb标准)是Web应用开发需要遵守的标准。
  2. 网页主要由三部分组成:结构标准,表现标准,行为标准。
网站访问过程
url统一资源定位符
互联网上标准资源的地址,可以从互联网上得到的资源的位置和访问方法。
组成部分:协议,服务器地址,资源路径。

  1. Web Browser,中文名为网页浏览器,是一个显示网页服务器或者档案系统内的HTML文件,并让用户与这些文件互动的软件。
  2. Web Server,中文名为网页服务器,WEB服务器,主要是提供网上信息浏览服务。
Web服务器可以解析HTTP协议,当Web服务器接收到一个HTTP请求时,会返回一个HTTP响应,客户端就可以从服务器上获取网页html,包括cssjs,视频,音频等。

  1. web开发主要分前端和后端两部分。
  2. 前端是指直接与用户接触的网页,网页上通常有html,js,css等。
  3. 后端是指程序,数据库和服务器层面的
web系统开发过程

项目提出,需求分析,(设计,ui设计,系统设计),(开发,前端开发,后台开发),系统测试,开发与维护。

HTML基础知识

  1. HTML的历史:HTML,XHTML
  2. HTML的全局属性:全局标准属性,全局事件属性
  3. HTML的元素:
4.标记语言,是一种将文本以及与文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。

5.HTML,为超文本标记语言。

6.XHTML是可扩展超文本标记语言,是一种更纯洁,更严格,更规范的html代码。

7.html文件由文件头和文件体两部分组成。

8.标签的分类:双标签,单标签。

双标签:由“开始标签”和“结束标签”两部分构成,必须成对使用,且必须合理嵌套。
单标签:在开始标签中进行关闭(以开始标签的结束而结束)。

HTML的全局标准属性

HTML中,规定了8个全局标准属性。

  1. class用于定义元素的类名。
  2. id用于指定元素的唯一id
  3. style用于指定元素的行内样式。
  4. title用于指定元素的额外信息。
  5. accesskey用于指定激活某个元素的快捷键。
支持accesskey属性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>
  1. tabindex用于指定元素在tab键下的次序。
支持tabindex属性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>
  1. dir用于指定元素中内容的文本方向。
dir的属性值只有ltrrtl两种,分别是left to rightright to left
  1. lang用于指定元素内容的语言。

HTML的全局事件属性

Window窗口事件

  1. onload,在页面加载结束后触发。
  2. onunload,在用户从页面离开时触发,如单击跳转,页面重载,关闭浏览器窗口等。
Form表单事件

  1. onblur,当元素失去焦点时触发。
  2. onchange,在元素的元素值被改变时触发。
  3. onfocus,在元素获得焦点时触发。
  4. onreset,当表单中的重载按钮被点击时触发。
  5. onselect,在元素中文本被选中后触发。
  6. onsubmit,在提交表单时触发。
Keyboard键盘事件


  1. onkeydown,在用户按下按键时触发。
  2. onkeypress,在用户按下按键后,按着按键时触发。
该属性不会对所有按键生效,不生效按键如:altctrlshiftesc
3.onkeyup,当用户释放按键时触发。

Mouse鼠标事件

  1. onclick,当在元素上单击鼠标时触发。
  2. ondblclick,当在元素上双击鼠标时触发。
  3. onmousedown,当在元素上按下鼠标按钮时触发。
  4. onmousemove,事件会在鼠标指针移动时发生。
  5. onmouseout,当鼠标指针移出元素时触发。
  6. onmouseover,事件会在鼠标指针移动到指定的元素上时发生。
  7. onmouseup,当在元素上释放鼠标按钮时触发。

Media媒体事件

  1. onabort,当退出媒体播放器时触发。
  2. onwaiting,当媒体已停止播放但打算继续播放时触发。

HTML元素

一个HTML文档包含的标签

  1. <!DOCTYPE>,声明文档类型。
  2. <html>,HTML元素真正的根元素。
  3. <head>,定义html文档的文档头。
head中包含的元素title,定义HTML文档的标题base,为页面上的所有链接规定默认地址或者默认目标link,用于定义文档与外部资源之间的关系meta,提供关于HTML的元数据style,用于为HTML文档定义样式信息script,用于定义客户端脚本
  1. body,定义html文档的文档体。
  2. content-Type,用于设定网页的字符集,便于浏览器解析与渲染页面。
代码:

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">
  1. cache-control,用于告诉浏览器如何缓存某个响应及缓存多长时间。
参数:

no-cache,发送请求,与服务器确认该资源是否被更改,如果没有,则使用缓存no-store,允许缓存,每次都要去服务器上下载完整的响应public,缓存所有响应private,只为单个用户缓存max-age,表示当前请求开始,相应响应在多久内能被缓存和重用,不去服务器重新请求,max-age=60表示响应可以再缓存和重用60秒<meta http-equiv=cache-control" content="no-cache">


  1. expires,用于设定网页的到期时间,过期后重新到服务器上重新传输。
  2. refresh,网页将在设定的时间内,自动刷新并转向设定的网址
  3. Set-Cookie,用于设置网页过期。
  4. 无语义元素:<span>,<div><span>是内联标签,用在一行文本中,<div>是块级标签。
DIV+CSS

div用于存放需要显示的数据,css用于指定如何显示数据样式,做到结构与样式相互分离。

查看div+css样式HTML:点击下方链接跳转,可查看源码:

div-css.html

格式化元素

  1. 普通文本
2.计算机输出

3.术语

图片元素

<img src="图片的url" alt = "图像的替代文本">

超链接元素

  1. <a>标签的target属性,默认值为_self
说明
_self在超链接所在框架或窗口中打开目标页面
_blank在新浏览器窗口中打开目标页面
_parent将目标页面载入含有该链接框架的父框架集或父窗口中
_top在当前的整个浏览器窗口中打开目标页面,因此会删除所有框架
  1. 文本链接是<a></a>标签之间的元素内容为文本内容。
  2. 锚点链接是用#+对应的锚点,锚点通常用唯一属性值id设定。

图像热区链接

图像热区链接,是什么呢?当你在看一些购物网页的时候,一张图片上,可以在不同的地方链接到不同的目标位置,点击不同的地方可以跳转到不同的网页,这也是做商城项目一般要用到的技术。

这个时候不是<a>标签元素了,而是<area>元素。

<area>元素的属性有两个shapecords属性。

shape 属性说明cords 属性说明
circle圆形x,y,r(x,y)为圆心坐标,r为半径
rect矩形x1,y1; x2,y2(x1,y1)为左上角坐标,(x2,y2)为右下角坐标
poly多边形x1,y1;x2,y2;x3,y3;...分别是各个点的点坐标
<area>的坐标系,原点为图片的左上角,x轴正方向向右,y轴正方向向下

我画个图哈,反映<area>的坐标系:

图像热区链接的使用,<map>标签定义一个image-map,可以含一个以上的热区<area>,每个热区都有独立的链接。

要为<map>标签赋予name属性。

<img>标签的usemap属性与<map>标签的name属性相关联。

为了证明我学会了,我写一个html页面。

map -> name="image_link"img -> usemap="#image_link"点击跳转:imgmap.html

e-mail链接

e-mail链接主要是看到有很多官方网页需要做的一个打开一封新的电子邮件。

点击下方链接即可看到效果:

联系我们

代码:

<a href="mailto:xxxxxx@qq.com">联系我们</a>

javascript链接

点击JavaScript链接:

点击弹窗

代码:

<a href="javascript:alert('哈哈,你点击了!');">点击弹窗</a>

空链接

  1. 空链接是指未指派目标地址的超链接。
空链接的代码:

javascript: void(0)<a href=""></a><a href="#"></a><a href="javascript:void(0)"></a>列表元素
整合列表html网页,点击跳转:ul-ol.html


  1. 无序列表,<ul>定义无序列表,<li>定义列表项。
<ul>type属性值:disc点,square方块,circle圆,none无.

  1. 有序列表,<ol>定义有序列表,<li>定义列表项。
<ol>type属性值:数字,大写字母,大写罗马数字,小写字母,小写罗马数字。
start属性定义序号的开始位置。

  1. 定义列表<dl>,定义列表内部可以有多个列表项标题,每个列表项标题用<dt>标签定义,列表项标题内部又可以有多个列表项描述,用<dd>标签定义。
表格

整合表格html网页,点击跳转:table.html

  1. <table>定义表格
  2. <caption>定义表格标题
  3. <tr>定义若干行
  4. <td>定义若干单元格
  5. <th>定义表头
  6. 表格分头部,主体,底部:<thead>,<tbody>,<tfoot>三个标签。
属性说明
border设置表格的边框宽度
width设置表格的宽
height表格的高
cellpadding设置内边距
cellspacing设置外边距



  1. <td>的两个属性:colspan用于定义单元格跨行,rowspan用于定义单元格跨列
  2. <tbody>,<thead>,<tfoot>标签通常用于对表格内容进行分组。
  3. 表单由<form>标签定义,action属性定义了表单提交的地址,method属性定义表单提交的方式。
代码:

<input type="text"><input type="password"><input type="radio"><input type="checkbox"><input type="submit"><input type="reset"><input type="button"><input type="image"><input type="file"><input type="hidden">


<select><option>size属性用来设置选择栏的高度,multiple属性用来决定是多选列表,还是单选selected="selected"
表单控件,用于输入更多的文本
<textarea>元素

<textarea>标签具有name,cols,rows3个属性。

  1. name用于提交参数
  2. value用于输入文本内容
  3. colsrows分别用于文本框的列数和行数,宽度和高度。
效果:

自我评价:

代码:

<form action="web" method="post"> 自我评价:<br/> <textarea rows="10" cols="50" name="introduce"> </textarea> <br/> <input type="submit" id="" name=""></form>frameset

  1. <frameset>定义一个框架集,用于组织多个窗口,每个框架存有独立的html文档
  2. <frameset>不能与<body>共同使用,除非有<noframe>元素
  3. <frame>用于定义<frameset>中一个特定的窗口。空元素<frame/>
frame属性
属性说明
src需要显示的html文档
frameborder定义框架的外边框,属性值为0或者1
scrolling定义是否显示滚动条,有3个值:yes,no,auto
noresize="noresize"定义该框架无法调整大小,默认是可以调整的
marginheight和marginwidth属性定义上下左右的边距
  1. <noframe>,用于为那些不支持框架集的浏览器显示文本
  2. <iframe>,与<frame>元素相同,iframeframe的属性,还加了heightwidth
代码:

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>frameset</title> </head> <frameset cols="25%,50%,25%"> <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame> <frame src="https://juejin.im/user/1451011081249175" ></frame> <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame> </frameset> <noframes> <body>您的浏览器无法处理框架,请更换浏览器打开</body> </noframes></html>

预留字符

HTML 中的预留字符必须被替换为字符实体。

CSS基础知识

  1. css,英文Cascading Style Sheets,中文名:级联样式表。层叠样式表。
  2. css是一种表现语言,是对网页语言的补充。
  3. css用于网页的风格设计,包括字体,颜色,位置等。
  4. css使用的4中方式:引入外部样式文件,导入外部样式文件,使用内部样式定义,使用内联样式定义。
引入外部样式文件:

<link type="text/css" rel="stylesheet" href="css样式文件的url"/>导入外部样式文件:

<style type="text/css"> @import "css样式文件的url";</style>使用内部样式定义:

<style type="text/css"> div { background-color: #ffffff; width: 300px; height: 300px; }</style>使用内联样式定义:

<div style="background-color: #ffffff; width: 100px; height: 100px;"></div>复制代码

css的两个特性:层叠,继承

层叠:层叠样式生效的优先级:

内联样式->内部样式->外部样式->浏览器默认效果。

继承,就是css属性可以从父元素向下传递到子元素。

css的选择器

  1. 元素选择器,是最简单的选择器。
  2. 通配符选择器,用"*"表示,表示对任意元素都有效。
  3. 属性选择器
格式:

E[attribute]{property1:value1; property2:value2;...}派生选择器

  1. 派生选择器根据元素在其位置的上下文关系定义样式
  2. 派生选择器分3种:后代选择器,子元素选择器,相邻兄弟选择器
  3. 后代选择器是某元素后代的所有元素。
  4. 子元素选择器是相对于父元素的第一级子元素符合条件。
  5. 相邻兄弟选择器,针对的元素是同级元素,拥有相同的父元素,且两个元素是相邻的。
  6. id选择器,以特定id值的HTML元素指定样式。
  7. 类选择器,以指定class的HTML元素指定样式。
  8. 伪类选择器
伪类选择器:伪类选择器和伪元素选择器
伪类以冒号(:)开头,元素选择符和冒号之间不能有空格,伪类名中间也不能有空格。

css中常用的伪类如下表所示:

伪元素选择器

css中常用的伪元素如下表所示:

css背景

css背景属性如下:

background

  1. background-color用于设置背景颜色,初始值为transparent透明色。
  2. 颜色取值3种如:颜色名,十六进制颜色,rgb函数。
  3. background-image用于设置元素的背景图片,默认值为none
  4. background-repeat控制图像的平铺。
background-repeat默认值为repeat,即图像沿着x轴和y轴平铺,还可以指定沿着x轴平铺rpeat-x,沿着y轴平铺repeat-y,或者不平铺no-repeat,继承父元素该属性设置inherit
background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为:scroll,表示可以随着页面其余部分的滚动而滚动。设置fixed,表示当页面其余部分滚动时,背景图片不会滚动,设置inherit,继承父元素。

background-position用于设置背景图像圆点的位置。

background可以将background-colorbackground-positionbackground-attachmentbackground-repeatbackground-image全部设置。

css字体属性

css常用字体属性表




  1. font-family用于设置元素的字体,该元素属性值一般可以设置多个字体。
  2. font-size用于设置字体的尺寸。
  3. font-style用于设置字体是否是斜体,默认值为normal,当设置为italic,显示为一个斜体的样式,当设置为oblique,显示为一个倾斜的样式。
  4. font-variant用于设置字体使用小写字体,默认为normal,一旦设置为small-caps,将所有小写字母变为大写。
  5. font-weight用于设置字体的粗细,normal值等于400,bold的值等于700。
  6. font,可以设置font-family,font-size,font-style,font-variant,font-weight
css文本属性表:

css尺寸属性表:

css列表属性表:

list-style-type

css表格属性表:

盒模型

  1. css盒模型,包含元素内容content,内边距padding,边框border,外部距margin
css内边距属性,元素的内边距在边框和内容之间。

css内边距的属性:

设置顺序为上右下左依次进行。

padding: 10px 10px 10px 10px;css外边距的属性:

css边框的属性:

边框的样式

  1. none,无边框效果
  2. hidden,与none相同
  3. dotted,点线边框效果
  4. dashed,虚线边框效果
  5. double,双线边框效果
  6. solid,实线边框效果
  7. groove,3D凹槽边框效果
  8. ridge,3D凸槽边框效果
css轮廓是绘制在元素周围的一条线,位于边框边缘的外围,起到突出元素的作用。

布局属性

  1. 布局属性是文档中元素排列显示的规则
  2. 布局方式3种:普通文档流,浮动,定位
css浮动涉及到的属性

css定位的属性

z-index用于设置目标对象的定位层序,数值越大,所在层级越高。该属性只在position:absolute时有效。

❤️感谢大家

1.如果本文对你有帮助,就支持下吧。




作者:魔王哪吒
链接:https://juejin.im/post/6844904104712470535
来源:掘金

关键词:学习,辅助,基础

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭