中国互联网协会网站,做网站后面维护要收钱吗,东莞拓步网站建设,wordpress 附件路径1. 网页
1.1 什么是网页
网站是指在因特网上根据一定的规则#xff0c;使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”#xff0c;通常是HTML格式的文件#xff0c;它要通过浏览器来阅读
网页是构成网站的基本元素。它通常由图片#xff0c;…1. 网页
1.1 什么是网页
网站是指在因特网上根据一定的规则使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”通常是HTML格式的文件它要通过浏览器来阅读
网页是构成网站的基本元素。它通常由图片链接文字声音视频等元素组成。通常我们看到的网页常见以.htm或.html后缀结尾的文件因此将其俗称为HTML文件
1.2 什么是HTML
HTML指的是超文本标记语言(Hyper Text Markup Language)它是用来描述网页的一种语言。HTML不是一种编程语言而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。
所谓超文本有2层含义
它可以加入图片声音动画多媒体等内容超越了文本限制。它还可以从一个文件跳转到另一个文件与世界各地主机的文件连接超链接文本。
1.3 网页的形成
网页是由网页元素组成的这些元素是利用html标签描述出来然后通过浏览器解析来显示给用户的。
前端人员开发代码—浏览器显示代码解析渲染—生成最后的Web页面
2. 常用浏览器
浏览器是网页显示运行的平台。常用的浏览器有edgeFirefoxchromesafariopera等。
浏览器内核 浏览器内核渲染引擎负责读取网页内容整理讯息计算网页的显示方式并显示页面。
浏览器内核备注IETridentIE、猎豹安全、360极速浏览器、百度浏览器FirefoxGecko火狐浏览器内核SafariWebkit苹果浏览器内核Chrome/OperaBlinkChrome / Opera浏览器内核。Blink 其实是 WebKit 的分支。目前国内浏览器一般采用Webkit和Blink内核
3. Web标准
Web标准是由W3C组织和其它标准化组织制定的一系列标准的集合。W3C万维网联盟是国际最著名的标准化组织。
3.1 为什么需要Web标准
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外还有以下优点
让 Web 的发展前景更广阔。内容能被更广泛的设备访问。更容易被搜寻引擎搜索。降低网站流量费用。使网站更易于维护。提高页面浏览速度。
3.2 Web标准的构成
主要包括结构Structure表现Presentation和行为Behavior三个方面。
标准说明结构结构用于对网页元素进行整理和分类现阶段主要学的是HTML。表现表现用于设置网页元素的版式、颜色、大小等外观样式主要指的是CSS。行为行为是指网页模型的定义及交互的编写现阶段主要学的是 JavaScript。Web标准提出的最佳体验方案结构样式行为向分离。
简单理解结构写到HTML文件中表现写到CSS文件中行为写到JavaScript文件中。
1. HTML语法规范
1.1 基本语法概述
HTML标签是由尖括号包围的关键词例如htmlHTML标签通常是成对出现的例如html和/html ,我们称为双标签。标签对中的第一个标签是开始标签第二个标签是结束标签。有些特殊的标签必须是单个标签极少情况例如br / 我们称之为单标签
1.2 标签关系
双标签关系可以分为两类包含关系和并列关系。 包含关系
head妈妈title /title女儿
/head并列关系
head /head
body /body类似姐妹2. HTML基本结构标签
2.1 第一个HTML网页
每个网页都会有一个基本的结构标签也称为骨架标签页面内容也是在这些基本标签上书写。HTML页面也称为HTMl文档。
标签名定义说明html/htmlHTML标签页面中最大的标签我们称为根标签。head/head文档的头部注意在head标签中我们必须设置的标签是title。title/title文档的标题让页面拥有一个属于自己的网页标题。body/body文档的主体元素包含文档的所有内容页面内容基本都是放到body里面的。
HTML文档的后缀名必须是.html或.htm浏览器的作用是读取HTML文档并以网页的形式显示出它们。
win 左右箭头快速调整
3. 网页开发工具
3.1 文档类型声明标签
!DOCTYPE 文档类型声明作用就是告诉浏览器使用哪种HTML版本来显示网页!DOCYTPE html
当前页面采取的是HTML5版本来显示网页注意 声明位于文档中的最前面的位置处于标签之前 不是一个HTML标签它就是文档类型声明标签
3.2 lang语言种类
用来定义当前文档显示的语言
en为英语zh-CN为中文
3.3 字符集
字符集Character set是多个字符的集合。以便计算机能够识别和存储各种文字。 在head 标签内可以通过 meta标签的 charset属性来规定HTML文档应该使用哪种字符编码。
meta charsetUTF-8charset常用的值有GB2312BIG5GBK和UTF-8其中UTF-8也被称为万国码基本包含了全世界所有国家需要用到的字符。
4. HTML 常用标签
4.1 标签语义
学习标签有技巧重点记忆每个标签的语义。即标签的含义该标签用来干啥 根据标签的语义在合适的地方给一个最为合理的标签可以让页面结构更清晰。
4.2 标题标签h1-h6
为了使网页更具有语义化会在页面中用到标题标签。HTML提供了6个等级的标签即h1-h6 单词head的缩写意为头部标题 标签语义作为标题使用并且依据重要性递减。 特点
加了标签的文字会变得加粗字号也会依次变大。一个标题独占一行。
4.3 段落和换行标签
在网页中要把文字有条理的显示出来就需要将文字分段显示。在HTML标签中p标签用于定义段落它可以将整个网页分为若干区域。 标签语义可以把HTML文档分割为若干段落。 特点
文本在一个段落中会根据浏览器窗口的大小自动换行。段落和段落之间保有空隙。
在HTML中一个段落中的文字会从左到右依次排列直到浏览器窗口的右端然后才自动换行。如果希望某段文本强制换行显示就需要使用换行标签br / 单词break的缩写意为打断换行。 标签语义强制换行。 特点
是个单标签标签只是简单地开始新的一行跟段落不一样段落之间会插入一些垂直的间距。
4.4 文本格式化标签
在网页中有时需要为文字设置粗体斜体或下划线等效果这时就需要用到HTML中的文本格式化标签使文字以特殊的方式显示。 标签语义突出重要性比普通文字重要。
语义标签说明加粗strong/strong 或 b/b更推荐使用 strong 标签加粗语义更强烈。倾斜em/em 或 i/i更推荐使用 em 标签倾斜语义更强烈。删除线del/del 或 s/s更推荐使用 del 标签删除线语义更强烈。下划线ins/ins 或 u/u更推荐使用 ins 标签下划线语义更强烈。
4.5 div和span标签
div和span是没有语义的它们就是一个盒子用来装内容的。 div是division的缩写表示分割分区span意为跨度跨距。 特点
div标签用来布局但是现在一行只能放一个div。大盒子span标签用来布局一行上可以多个span小盒子
4.6 图像标签和路径重点
1.图像标签
在HTML标签中img 标签用于定义HTML页面中的图像。
img src 图像URL /src是img标签的必须属性它用于指定图像文件的路径和文件名。 所谓属性就是属于这个图像标签的特性。 图像标签的其它属性
属性属性值说明src图片路径必须属性alt文本替换文本。图像不能显示的文字title文本提示文本。鼠标放到图像上显示的文字width像素设置图像的宽度height像素设置图像的高度border像素设置图像的边框粗细图像标签属性注意点① 图像可以拥有多个属性必须写在标签名的后面。② 属性之间不分先后顺序标签名与属性属性与属性之间均以空格分开③ 属性采取键值对的格式即key“value”的格式属性“属性值”。 2. 路径
页面中的图片会非常多通常我们会新建一个文件夹来存放这些图像文件例如 images这时再查找图像就需要采用“路径”的方式来指定图像文件的位置。路径可以分为
相对路径绝对路径 2.1 路径之相对路径
相对路径以引用文件所在位置为参考基础而建立出的目录路径。简单来说图片相对于HTML页面的位置。
相对路径分类符号说明同一级路径图像文件位于HTML文件同一级 如 img srcbing.gif /下一级路径/图像文件位于HTML文件下一级 如 img srcimages/google.gif /上一级路径../图像文件位于HTML文件上一级 如 img src../bing.gif /
相对路径是从代码所在的文件出发去寻找目标文件的。我们所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。 2.2 路径之绝对路径
绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。
例如
F:\html\emoij.png完整的网络地址 https://www.bilibili.com/?pageHome 3. 目录文件夹和根目录
实际工作中我们的文件不能随便乱放否则用起来很难快速找到它们。因此我们需要一个文件夹来管理它们。
目录文件夹就是普通文件夹里面存放了我们做页面所需要的相关素材比如HTML文件、图片等。根目录打开目录文件夹的第一层就是根目录。 4. VSCode 打开目录文件夹
在 VSCode 中可以通过以下步骤打开目录文件夹
点击 文件 菜单。选择 打开文件夹。选择您的目录文件夹。
这种方式在后期非常方便管理文件。 4.7 超链接标签
在HTML标签中a标签用于定义超链接作用是从一个页面链接到另一个页面。
链接的语法格式
a href跳转目标 target目标窗口的弹出方式 文本或图像 /a单词anchor的缩写意为锚。
属性作用href用于指定链接目标的url地址必须属性当为标签应用href属性时它就具有了超链接的功能。target用于指定链接页面的打开方式其中_self为默认值_blank为在新窗口中打开方式。
链接的分类
外部链接例如b站.
a hrefhttp://www.bing.com target_self必应 /a ! --默认在当前页面打开 --!
a hrefhtttp://www.bing.com target_blank 必应 /a# 在新标签页打开内部链接网站内部页面之间的相互链接。直接链接内部页面名称即可
a href xxx /a空链接如果暂时没有确定链接目标时
a href#xxx/a下载链接如果href里面地址是一个文件或者压缩包会下载这个文件。
a hrefimg.zip下载文件/a网页元素链接在网页中的各种网页元素如文本图像表格音频视频等都可以添加超链接
a hrefhttp://www.bing.comimg srcemoij.png //a锚点链接当点击链接可以快速定位到页面中的某个位置。 在链接文本的href属性中设置属性值为#名字的形式如 a href#two第二集/a找到目标位置标签里面添加一个id属性 刚才的名字如 h3 idtwo第二集介绍/h3
a href#two第二集/a
h3 idtwo第二集介绍/h34.8 表格标签
表格是实际开发中非常常用的标签
表格的主要作用表格的基本语法
1.1 表格的主要作用
表格主要用于显示展示数据因为它可以让数据显示的非常的规整可读性非常好。特别是后台展示数据的时候能够熟练运用表格就显得很重要。一个清爽简约的表格就能把繁杂的数据表现得很有条理。
1.2 表格的基本语法
tabletrtd单元格内的文字/td.../tr.../tabletable /table是用于定义表格的标签tr /tr标签用于定义表格中的行必须嵌套在①的标签中td /td用于定义表格中的单元格必须嵌套在②的标签中字母td指表格数据table data即数据单元格的内容。 表格无列概念
1.3 表头单元格标签
一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示。 th标签表示HTML表格的表头部分table head的缩写 table tr th 姓名 /th ... /tr ... /table
1.4 表格属性
表格标签这部分属性实际开发不常用后面通过CSS来设置
属性名属性值描述alignleft, center, right规定表格相对周围元素的对齐方式border1 或 “”规定表格单元是否拥有边框默认为表示没有边框cellpadding像素值规定单元格边沿与其内容之间的空白默认1像素cellspacing像素值规定单元格之间的空白默认2像素width像素值或百分比规定表格的宽度
1.5 表格结构标签
使用场景因为表格可能很长为了更好的表示表格的语义可以将表格分割成表格头部和表格主体两大部分。 在表格标签中分别哟看那个thead标签 表格的头部区域tbody标签 表格的主体区域。这样可以更好的分清表结构。
thead/thead:用于定义表格的头部。thead内部必须拥有tr标签。一般是位于第一行tbody/tbody:用于定义表格的主体主要用于放数据本体。以上标签都是放在table/table中
1.6 合并单元格
特殊情况下可以把多个单元格合并为一个单元格。
合并单元格格式目标单元格合并单元格的步骤
合并单元格格式
跨行合并rowspan“合并单元格的个数”跨列合并colspan“合并单元格的个数”
目标单元格写合并代码
跨行最上侧单元格为目标单元格写合并代码跨列最左侧单元格为目标单元格写合并代码
合并单元格三步曲
先确定跨行还是跨列找到目标单元格写上合并方式合并的单元格数量
td colspan2 /td删除多余单元格
1.7 表格总结
表格的相关标签表格的相关属性合并单元格
4.9 列表标签
表格是用来显示数据的那么列表就是用来布局的。 列表的最大特点就是整齐整洁有序它作为布局会更加自由和方便。 根据使用情景不同列表可以分为三大类无序列表有序列表和自定义列表。
1.1 无序列表重点
ulunordered list标签表示HTML页面中项目的无序列表一般会以项目符号呈现列表项而列表项使用li标签定义。
ulli 列表项1/lili 列表项2/li...
/ul 无序列表的各个列表之间没有顺序级别之分是并列的。ul /ul 中只能嵌套li /li直接在ul /ul 标签中输入其它标签或者文字的做法是不被允许的。li与/li之间相当于一个容器可以容纳所有元素。无序列表会带有自己的样式属性但在实际使用时我们会使用CSS来设置。
1.2 有序列表理解
有序列表即为有排列顺序的列表其各个列表项会按照一定的顺序排列定义。 在HTML标签中olordered list标签用于定义有序列表列表排序以数字来显示并且使用li标签来定义列表项。
olli 列表项1/lili 列表项2/li...
/ol ol /ol 中只能嵌套li /li直接在ol /ol 标签中输入其它标签或者文字的做法是不被允许的。li与/li之间相当于一个容器可以容纳所有元素。有序列表会带有自己的样式属性但在实际使用时我们会使用CSS来设置。
1.3 自定义列表重点
自定义列表的使用场景 自定义列表常用于对术语或名词进行解释和描述定义列表的列表项前没有任何项目符号。 在HTML标签中dl标签用于定义描述列表/定义列表definition list该标签会与dt定义项目/名字definition title和dd描述每一个项目/名字一起使用definition description 其基本语法如下
dldt名词1/dtdd名词1解释1/dddd名词1解释2/dd
/dldl /dl里面只能包含dt和dd。dt和dd个数没有限制经常是一个dt对应多个dd。姐妹关系
1.4 列表总结
标签名定义说明ul/ul无序标签里面只能包含li 没有顺序使用较多。li里面可以包含任何标签ol/ol有序标签里面只能包含li 有顺序使用相对较少li里面可以包含任何标签dl/dl自定义列表里面只能包含dt和dddt和dd里面可以放任何标签
4.10 表单标签
现实中的表单去办银行卡填写的单子。
1.1 为什么需要表单
使用表单目的是为了收集用户信息 在网页中需要更用户进行交互收集用户资料此时就需要表单。
1.2 表单的组成
在HTML中一个完整的表单通常由表单域表单控件也称为表单元素和提示信息3个部分构成。
1.3 表单域
表单域是一个包含表单元素的区域。 在HTML标签中form标签用于定义表单域以实现用户信息的收集和传递。
form会把它范围内的表单元素信息提交给服务器
form actionurl地址 method提交方式 name表单域名称
各种表单元素控件
/form常用属性
属性属性值作用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址methodget/post用于设置表单数据的提交方式其取值为get或postname名称用于指定表单的名称以区分同一个页面中的多个表单域
要点
写表单元素之前应该有个表单域把它们进行包含表单域是form标签
1.4 表单控件表单元素
在表单域中可以定义各种表单元素这些表单元素就行允许用户在表单中输入或者选择的内容控件。
1.4.1 input表单元素
在英文单词中input是输入的意思而在表单元素中input标签用于收集用户信息。 在input标签中包含一个type属性根据不同的type属性值输入字段拥有很多种形式可以是文本字段复选框掩码后的文本控件单选按钮按钮等。 input type属性值 /
input /标签为单标签type属性设置不同的属性值用来指定不同的控件类型
除type属性外input标签还要其它很多属性其常用属性如下
属性属性值描述name由用户自定义定义input元素的名称value由用户自定义规定input元素的值checkedchecked规定此input元素首次加载时应当被选中maxlength正整数规定输入字段中的字符的最大长度
name和value是每个表单元素都有的属性值主要给后台人员使用name表单元素的名字要求单选按钮和复选框要有相同的name值checked属性主要针对于单选按钮和复选框主要作用——打开页面就要可以默认选中某个表单元素。maxlength是用户可以在表单元素输入的最大字符数一般较少使用
属性值描述button定义可点击按钮多数情况下用于通过JavaScript启动脚本checkbox定义复选框file定义输入字段和“浏览”按钮供文件上传hidden定义隐藏的输入字段image定义图像形式的提交按钮password定义密码字段该字段中的字符被掩码radio定义单选按钮reset定义重置按钮。重置按钮会清除表单中的所有数据submit定义提交按钮提交按钮会把表单数据发送到服务器text定义单行的输入字段用户可以在其中输入文本。默认宽度为20个字符
1.4.2 label标签
label标签为input元素定义标签标签 label标签用于绑定一个表单元素当点击label标签内的文本时浏览器就会自动将焦点光标转到或者选择对应的表单元素上用来增加用户体验。
label for sex female /label
input type radio name sex id sex /1.4.3 内容控件
在表单域中可以定义各种表单元素这些表单元素就是允许用户在表单中输入或者选择的内容控件。
select表单元素
使用场景在页面中如果有多个选项让用户选择并且想要节约页面空间时可以使用select标签控件定义下拉列表。 语法
selectoption选项1/optionoption..../option...
/selectselect中至少包含一对option在option中定义selected selected时当前项即为默认选中项
textarea表单元素
使用场景当用户输入内容较多的情况下不能使用文本框表单了此时可以使用textarea标签。 在表单元素中textarea标签是用于定义多行文本输入的控件。 使用多行文本输入控件可以输入更多的文字该控件常见于留言板评论。 语法
textarea rows3 cols20文本内容
/textarea通过textarea标签可以轻松地创建多行文本输入框cols“每行中的字符数”rows“显示的行数”在实际开发中不会使用都是使用CSS来改变大小。
综合案例-注册页面
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh4人生得意需尽欢莫使金樽空对月/h4table width600!-- 第一行 --trtd性别/tdtdinput typeradio namewomen idnv label fornvimg srcimages//label girlinput typeradio namewomen idcslabel forcsimg srcimages//labelwoman/td/tr!-- 第二行 --trtd生日/tdtdselectoption--请选择年份--/optionoption2025/optionoption2024/optionoption2023/optionoption2022/option/selectselectoption--请选择月份--/optionoption1/optionoption2/optionoption3/optionoption4/option/selectselectoption--请选择日--/optionoption5/optionoption6/optionoption7/optionoption8/option/select/td/tr!-- 第三行 --trtd所在地区/tdtdinput typetext valueIceland/td/tr!-- 第四行 --trtd婚姻状况/tdtdinput typeradio nameemotioninlove input typeradio nameemotion checkedcheckednopeinput typeradio nameemotionbroken/td/tr!-- 第五行 --trtd学历/tdtdinput typetext value博士/td/tr!-- 第六行 --trtd喜欢的类型/tdtdinput typecheckbox namelove cuteinput typecheckbox namelove charminput typecheckbox namelove childshinput typecheckbox namelove checkedchecked all/td/tr!-- 第七行 --trtd自我介绍/tdtdtextarea个人简介/textarea/td/tr!-- 第八行 --trtd/tdtdinput typesubmit value免费注册/td/tr!-- 第九行 --trtd/tdtdinput typecheckbox checkedchecked我同意社区注册条款和会员加入标准/td/trtrtd/tdtda href#我是会员立即登录/a/td/trtrtd/tdtdh5我承诺/h5ulliIm18/liliIm serious/liliIm sincerely/li/ul/td/tr/table
