网站建设费大概多少钱,区块链网站开发费用,有网站了小程序怎么做,课程网站开发开题报告1 前端
网站的工作流程#xff1a;
首先我们需要通过浏览器访问发布到前端服务器中的前端程序#xff0c;这时候前端程序会将前端代码返回给浏览器浏览器得到前端代码#xff0c;此时浏览器会将前端代码进行解析#xff0c;然后展示到浏览器的窗口中#xff0c;这时候我…1 前端
网站的工作流程
首先我们需要通过浏览器访问发布到前端服务器中的前端程序这时候前端程序会将前端代码返回给浏览器浏览器得到前端代码此时浏览器会将前端代码进行解析然后展示到浏览器的窗口中这时候我们就看到了网站的页面但是此时这个页面是没有数据的因为数据在我们的数据库中所以我们浏览器需要根据前端代码中指定的后台服务器的地址 向我们的后台服务器内部有java程序发起请求后台服务器再去从数据库中获取数据然后返回给浏览器浏览器拿到后台返回的数据后然后将数据展示在前端资源也就是网页上然后我们就看到了完整的内容 Web标准也称为网页标准由一系列的标准组成大部分由W3C World Wide Web Consortium万维网联盟负责制定。由三个组成部分
HTML负责网页的结构页面元素和内容CSS负责网页的表现页面元素的外观、位置等页面样式如颜色、大小等JavaScript负责网页的行为交互效果 常用前端技术
技术描述HTML用于构建网站的基础结构的css用于美化页面的作用和化妆或者整容作用一样JavaScript实现网页和用户的交互Vue主要用于将数据填充到html页面上的Element主要提供了一些非常美观的组件Nginx一款web服务器软件可以用于部署我们的前端工程 2 HTML 介绍
HTML (HyperText Markup Language) 超文本标记语言。
超文本超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等内容。标记语言由标签构成的语言
HTML标签都是预定义好的。例如使用a展示超链接使用img展示图片video展示视频HTML代码直接在浏览器中运行HTML标签由浏览器解析 HTML结构
htmlheadtitle标题/title/headbody/body
/html HTML 特点
HTML标签不区分大小写HTML标签属性值单双引号都可以HTML语法松散 2.1 HTML 仿写新浪微博标题排版
例子 分析 图片、h1标题水平线
使用标签 img、h1、hr
!-- 文档类型为 HTML --
!DOCTYPE html
html langenhead!-- 字符集为 UTF-8 --meta charsetUTF-8!-- 浏览器的兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈某国底气 新思想夯实大国粮仓/title
/headbody!-- img标签的属性src 图片的路径alt 如果由于某种原因无法显示图像则指定图像的替代文本width 宽度单位像素px 或者 % 相对父元素的百分比height 高度单位像素px 或者 % 相对父元素的百分比一般只设置一个会等比例缩放路径绝对路径1.绝对磁盘路径D:\HTML\SinaNews\img\news_logo.png2.绝对网络路径https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png相对路径./ 当前目录可省略../ 上一级目录不可省略第一种 ./img/news_logo.png 或者 img/news_logo.png--img src./img/news_logo.png altcant open this picture 新浪政务正文h1焦点访谈某国底气 新思想夯实大国粮仓/h1hr2023年03月02日 21:50 央视网hr
/body/html
效果 比较原版 可以发现基本的结构相同但是字体和颜色不太一样所以需要用负责网页表现的 CSS 3 CSS 介绍 CSS 的全称是层叠样式表Cascading Style Sheets。CSS 是一种用来控制网页样式和布局的标记语言 CSS的引入方式
行内样式写在标签的style属性中不推荐 h1 stylexxx:xxx;某国新闻网/h1
内嵌样式写在style标签中可以写在页面任何位置但通常约定写在head标签中全局有效 style h1 {...} /style
外联样式写在一个单独的.css文件中需要通过 link 标签在网页中引入 link relstylesheet hrefcss/news.css rel 关系relationship href 超文本引用Hypertext Reference 对于上述3种引入方式企业开发的使用情况如下 内联样式会出现大量的代码冗余不方便后期的维护所以不常用。 内部样式通过定义css选择器让样式作用于当前页面的指定的标签上。 外部样式html和css实现了完全的分离企业开发常用方式。 3.1 CSS 添加样式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈某国底气 新思想夯实大国粮仓/title!-- 方式二内嵌样式 --styleh1 {color: #4D4F53;}span {color: #968D92;}/style
/headbodyimg src./img/news_logo.png altcant open this picture 新浪政务正文!-- 方式一行内样式 --!-- h1 stylecolor:red;焦点访谈某国底气 新思想夯实大国粮仓/h1 --!-- 方式三外联样式 --!-- link relstylesheet hrefCSS/sinaNewsCss.css --!-- h1焦点访谈某国底气 新思想夯实大国粮仓/h1 --h1焦点访谈某国底气 新思想夯实大国粮仓/h1hr2023年03月02日 21:50 央视网hr
/body/html
同时在CSS文件中
h1{color: #4D4F53;
}
效果 改变了标题颜色 现在对 2023年03月02日 21:50 央视网 进行修改只要改变时间的颜色而不改变央视网的颜色
引入一个没有语义的标签 span 在head标签里面规定样式 styleh1 {color: #4D4F53;}span {color: #968D92;}/style hr!-- 没有语义的标签 span 没有效果文字在一行 --span2023年03月02日 21:50/span span央视网/spanhr
这样做发现两个都改变了因为他们都在 span 标签里此时需要用到 CSS 选择器 3.2 CSS 选择器
CSS选择器用来选取需要设置样式的元素标签
元素选择器id 选择器类选择器 headstyle.cls{color: #968D92;} */#time{color: #968D92;}/style
/head
bodyspan classcls idtime2023年03月02日 21:50/span span央视网/span
/body 类选择器和 id 选择器二者取其一即可形成下面的效果 而且三个选择器有 优先级
优先级高到低依次为 id 选择器、类选择器、元素选择器 3.3 字体 font
字体大小 font-size
#time{color: #968D92;font-size: 13px;}
4 超链接
标签 a href... target... 央视网/a 属性 href (Hypertext Reference)指定资源访问的 URL target指定在何处打开超链接 _self默认值在当前页面打开 _blank在空白页打开 span classcls idtime2023年03月02日 21:50/span spana hrefhttp://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blank 央视网/a /span
这样就形成了超链接而且是新开一个空白页打开超链接 但是有下划线并且变成了紫色现在去把超链接的字体变成默认黑色并且去除下划线 使用 CSS 属性 text-decoration文本装饰
在 style 标签里
a{color: black;text-decoration: initial; /*设置默认文本装饰*/}
变成这样但是还是可以点击 5 正文排版 5.1 视频标签 video src... controls width... height... 属性
src视频的URLcontrols播放控件写 controlscontrols 但是如果属性和值相等就省略为属性名width播放器的宽度通常宽度和高度二者写一个 5.2 音频标签 audio src... controls 属性同视频 5.3 段落标签和文本加粗标签
段落标签 p 文本加粗标签 b 或 strong 文本格式标签
效果标签标签(强调)加粗bstrong倾斜iem下划线uins删除线sdel 5.4 正文
!-- 正文 --video srcvideo/1.mp4 controls width900px/videoaudio srcaudio/1.mp3 controls/audiopb央视网消息/b(焦点访谈)d的十八大以来以...同志为核心的dzy始终把解决粮食安全问题作为治国理政的头等大事重农抓粮一系列政策举措有力有效我国粮食产量站稳1.3万亿斤台阶实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中为保障经济社会发展提供了坚实支撑为应对各种风险挑战赢得了主动。连续八年1.3万亿斤这个沉甸甸的数据是如何取得的呢?/pp人勤春来早春耕农事忙。立春之后由南到北某国春耕春管工作陆续展开春天的田野处处生机盎然。/pimg srcimg/1.jpgp今年某国启动了新一轮千亿斤粮食产能提升行动这是一个新的起点。2015年以来某国粮食产量连续8年稳定在1.3万亿斤以上人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤粮食产量提高了1500亿斤。/pimg srcimg/2.jpgp某国式现代化一个重要的某国特色是人口规模巨大的现代化。我们粮食生产的发展意味着我们要立足国内解决14亿多人吃饭的问题。仓廪实天下安。保障粮食安全是一个永恒的课题任何时候都不能放松。在以...同志为核心的dzy坚强领导下亿万某国人民辛勤耕耘、不懈奋斗我们就一定能够牢牢守住粮食安全这一“国之大者”把某国人的饭碗牢牢端在自己手中夯实某国式现代化基础。/pp idplast责任编辑:王树淼 SN242/p
CSS样式
p{text-indent: 40px; /*设置首行缩进 */line-height: 35px; /*设置行高*/
}
#plast{text-align: right;
} 属性
text-indent首行缩进line-height行高text-align对齐方式leftrightcenter 效果 6 布局
现在布局是默认布局比较难看而不像 6.1 CSS 盒子模型 盒子页面中所有的元素标签都可以看做是一个盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局
盒子模型组成
内容区域content内边距区域padding边框区域border外边距区域margin不属于盒子 CSS 布局标签 div 特点
单行显示宽度默认是父元素宽度高度默认由内容决定可以设置宽度、高度 span 特点
多行显示宽度和高度默认由内容决定不可以设置宽度、高度 6.2 div
用 div 把所有都圈起来并且给个 id bodydiv idcenterimg src./img/news_logo.png altcant open this picture a hrefhttp://gov.sina.com.cntarget_blank新浪政务/a正文!-- 方式一行内样式 --!-- h1 stylecolor:red;焦点访谈.国底气 新思想夯实大国粮仓/h1 --!-- 方式三外联样式 --!-- link relstylesheet hrefCSS/sinaNewsCss.css --!-- h1焦点访谈某国底气 新思想夯实大国粮仓/h1 --h1焦点访谈某国底气 新思想夯实大国粮仓/h1hr!-- 没有语义的标签 span 没有效果文字在一行 --span classcls idtime2023年03月02日 21:50/span spanahrefhttp://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blankrelnoopener noreferrer央视网/a /spanhr!-- 正文 --video srcvideo/1.mp4 controls width900px/videobraudio srcaudio/1.mp3 controls/audiopb央视网消息/b(焦点访谈).的十八大以来以...同志为核心的...始终把解决粮食安全问题作为治国理政的头等大事重农抓粮一系列政策举措有力有效我国粮食产量站稳1.3万亿斤台阶实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中为保障经济社会发展提供了坚实支撑为应对各种风险挑战赢得了主动。连续八年1.3万亿斤这个沉甸甸的数据是如何取得的呢?/pp人勤春来早春耕农事忙。立春之后由南到北我国春耕春管工作陆续展开春天的田野处处生机盎然。/pimg srcimg/1.jpgp今年我国启动了新一轮千亿斤粮食产能提升行动这是一个新的起点。2015年以来我国粮食产量连续8年稳定在1.3万亿斤以上人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤粮食产量提高了1500亿斤。/pimg srcimg/2.jpgp某国式现代化一个重要的某国特色是人口规模巨大的现代化。我们粮食生产的发展意味着我们要立足国内解决14亿多人吃饭的问题。仓廪实天下安。保障粮食安全是一个永恒的课题任何时候都不能放松。在以...同志为核心的...坚强领导下亿万.国人民辛勤耕耘、不懈奋斗我们就一定能够牢牢守住粮食安全这一“国之大者”把.国人的饭碗牢牢端在自己手中夯实.国式现代化基础。/pp idplast责任编辑:王树淼 SN242/p/div/body CSS 样式
#center{width: 65%;/* margin: 0% 17.5% 0% 17.5%; 设置外边距 100-6535 35/217.5 */margin: 0 auto; /* 等价 */
} 这样就居中显示了图片违规但是已经居中了 7 HTML 表格、表单标签
7.1 表格标签
在网页中以表格(行、列)形式整齐展示数据
标签
做一个表格 body!-- table border1px 已经弃用--tabletrth序号/thth品牌Logo/thth品牌名称/thth企业名称/th/trtrtd1/tdtdimg srcimg/huawei.jpg width80px //tdtd华为/tdtd华为技术有限公司/td/trtrtd2/tdtdimg srcimg/alibaba.jpg width80px/tdtd阿里巴巴/tdtd阿里巴巴集团控股有限公司/td/tr/table
/body
注HTML5 废弃了 cellspacing 属性而且不推荐在标签中安排样式所以
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML table/titlestyletable,th,td{border: 1px solid black;border-collapse: collapse; /*单元格合并无空白 *//* border-collapse: separate; 独立显示有空白 */}/style
/head 7.2 表单标签
表单在网页中主要负责数据采集功能如 注册、登录等数据采集
标签 form 每一行是“表单项”不同类型的 input 元素、下拉列表、文本域等
表单项标签
input 标签 intput 下拉列表标签 select 文本域标签 textarea 属性
action
表单提交的URL如果不指定默认提交到当前页面
method
发送表单数据的方式。GET、POST如果不指定默认是 get
get在ur1后面拼接表单数据比如:?usernameTomage12url 长度有限制
post在消息体(请求体)中传递的参数大小无限制 bodyform action methodget用户名input typetext nameusername/br/年nbspnbspnbsp龄input typetext nameage/br/input typesubmit value提交/form
/body 注input 中的 name是要提交字段的名字type是类型常见的类型如下 效果 输入然后提交此时 URL 变成了 如果把表单 method 改为 post就会在消息体中传递 表单项除了 input 标签还有 select 和 textarea 制作一个表单
bodyform action methodpost姓名input typetext nameusernamebrbr密码input typepassword namepasswordbrbr性别input typeradio namegender valuemale id1label for1男/labelinput typeradio namegender valuefemale id2label for2女/labelbrbr爱好input typecheckbox namehobby idjavalabel forjavaJava/labelinput typecheckbox namehobby idClabel forCC/labelinput typecheckbox namehobby idpylabel forpyPython/labelbrbr上传文件input typefile namefilebrbr生日input typedate namedatebrbr邮箱input typeemail nameemailbrbr年龄input typenumber namenumberbrbr学历select namedegreeoption-----请选择-----/optionoption value1本科/optionoption value2硕士/optionoption value3博士/option/selectbrbr备注textarea namedescription cols30 rows10/textareabrbrinput typebutton value按钮input typereset name重置input typesubmit name提交/form
注name 用来标识元素
value 是提交表单时候的字段名
id 则是用于把 for 和元素关联 效果
