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标签都是预定义好的。例如:使用展示超链接,使用展示图片,
HTML结构
HTML 特点
HTML标签不区分大小写HTML标签属性值单双引号都可以HTML语法松散
2.1 HTML 仿写新浪微博标题排版
例子:
分析:
图片、h1标题,水平线
使用标签:
、
、
新浪政务>正文
焦点访谈:某国底气 新思想夯实大国粮仓
2023年03月02日 21:50 央视网
效果:
比较原版:
可以发现,基本的结构相同,但是字体和颜色不太一样,所以需要用负责网页表现的 CSS
3 CSS 介绍
CSS 的全称是层叠样式表(Cascading Style Sheets)。CSS 是一种用来控制网页样式和布局的标记语言
CSS的引入方式
行内样式:写在标签的style属性中(不推荐)
某国新闻网
内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中,全局有效)
外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中引入)
rel 关系(relationship)
href 超文本引用(Hypertext Reference)
对于上述3种引入方式,企业开发的使用情况如下:
内联样式会出现大量的代码冗余,不方便后期的维护,所以不常用。 内部样式,通过定义css选择器,让样式作用于当前页面的指定的标签上。 外部样式,html和css实现了完全的分离,企业开发常用方式。
3.1 CSS 添加样式
h1 {
color: #4D4F53;
}
span {
color: #968D92;
}
新浪政务>正文
焦点访谈:某国底气 新思想夯实大国粮仓
2023年03月02日 21:50 央视网
同时,在CSS文件中
h1{
color: #4D4F53;
}
效果:
改变了标题颜色
现在对 "2023年03月02日 21:50 央视网" 进行修改,只要改变时间的颜色,而不改变央视网的颜色
引入一个没有语义的标签 span
在head标签里面规定样式:
h1 {
color: #4D4F53;
}
span {
color: #968D92;
}
2023年03月02日 21:50 央视网
这样做,发现两个都改变了,因为他们都在 span 标签里,此时需要用到 CSS 选择器
3.2 CSS 选择器
CSS选择器:用来选取需要设置样式的元素(标签)
元素选择器id 选择器类选择器
.cls{
color: #968D92;
} */
#time{
color: #968D92;
}
2023年03月02日 21:50 央视网
类选择器和 id 选择器二者取其一即可形成下面的效果:
而且,三个选择器有 优先级
优先级高到低依次为:
id 选择器、类选择器、元素选择器
3.3 字体 font
字体大小 font-size
#time{
color: #968D92;
font-size: 13px;
}
4 超链接
标签:
属性:
href (Hypertext Reference):指定资源访问的 URL
target:指定在何处打开超链接
_self:默认值,在当前页面打开
_blank:在空白页打开
2023年03月02日 21:50 央视网
这样就形成了超链接,而且是新开一个空白页打开超链接
但是有下划线并且变成了紫色,现在去把超链接的字体变成默认黑色,并且去除下划线:
使用 CSS 属性 text-decoration(文本装饰)
在 style 标签里:
a{
color: black;
text-decoration: initial; /*设置默认文本装饰*/
}
变成这样,但是还是可以点击
5 正文排版
5.1 视频标签
属性:
src:视频的URLcontrols:播放控件(写 controls="controls" ,但是如果属性和值相等,就省略为属性名)width:播放器的宽度,通常宽度和高度二者写一个
5.2 音频标签
属性:同视频
5.3 段落标签和文本加粗标签
段落标签
文本加粗标签
或
文本格式标签
效果标签标签(强调)加粗bstrong倾斜iem下划线uins删除线sdel
5.4 正文
央视网消息(焦点访谈):d的十八大以来,以...同志为核心的dzy始终把解决粮食安全问题作为治国理政的头等大事,重农抓粮一系列政策举措有力有效,我国粮食产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中,为保障经济社会发展提供了坚实支撑,为应对各种风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢?
人勤春来早,春耕农事忙。立春之后,由南到北,某国春耕春管工作陆续展开,春天的田野处处生机盎然。
今年,某国启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。2015年以来,某国粮食产量连续8年稳定在1.3万亿斤以上,人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。
某国式现代化一个重要的某国特色是人口规模巨大的现代化。我们粮食生产的发展,意味着我们要立足国内,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮食安全是一个永恒的课题,任何时候都不能放松。在以...同志为核心的dzy坚强领导下,亿万某国人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这一“国之大者”,把某国人的饭碗牢牢端在自己手中,夯实某国式现代化基础。
责任编辑:王树淼 SN242
CSS样式
p{
text-indent: 40px; /*设置首行缩进 */
line-height: 35px; /*设置行高*/
}
#plast{
text-align: right;
}
属性:
text-indent:首行缩进line-height:行高text-align:对齐方式(left,right,center)
效果:
6 布局
现在布局是默认布局,比较难看,而不像:
6.1 CSS 盒子模型
盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型组成:
内容区域(content)内边距区域(padding)边框区域(border)外边距区域(margin)(不属于盒子)
CSS 布局标签:
特点:
单行显示宽度默认是父元素宽度,高度默认由内容决定可以设置宽度、高度
特点:
多行显示宽度和高度默认由内容决定不可以设置宽度、高度
6.2 div
用 div 把所有都圈起来,并且给个 id
焦点访谈:某国底气 新思想夯实大国粮仓
2023年03月02日 21:50 href="http://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank" rel="noopener noreferrer">央视网
央视网消息(焦点访谈):.的十八大以来,以...同志为核心的...始终把解决粮食安全问题作为治国理政的头等大事,重农抓粮一系列政策举措有力有效,我国粮食产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中,为保障经济社会发展提供了坚实支撑,为应对各种风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢?
人勤春来早,春耕农事忙。立春之后,由南到北,我国春耕春管工作陆续展开,春天的田野处处生机盎然。
今年,我国启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。2015年以来,我国粮食产量连续8年稳定在1.3万亿斤以上,人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。
某国式现代化一个重要的某国特色是人口规模巨大的现代化。我们粮食生产的发展,意味着我们要立足国内,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮食安全是一个永恒的课题,任何时候都不能放松。在以...同志为核心的...坚强领导下,亿万.国人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这一“国之大者”,把.国人的饭碗牢牢端在自己手中,夯实.国式现代化基础。
责任编辑:王树淼 SN242
CSS 样式:
#center{
width: 65%;
/* margin: 0% 17.5% 0% 17.5%; 设置外边距 100-65=35 35/2=17.5 */
margin: 0 auto; /* 等价 */
}
这样就居中显示了(图片违规,但是已经居中了)
7 HTML 表格、表单标签
7.1 表格标签
在网页中以表格(行、列)形式整齐展示数据
标签:
做一个表格:
序号 | 品牌Logo | 品牌名称 | 企业名称 |
---|---|---|---|
1 | 华为 | 华为技术有限公司 | |
2 | 阿里巴巴 | 阿里巴巴集团控股有限公司 |
注:HTML5 废弃了 cellspacing 属性,而且不推荐在标签中安排样式,所以:
table,th,td{
border: 1px solid black;
border-collapse: collapse; /*单元格合并,无空白 */
/* border-collapse: separate; 独立显示,有空白 */
}
7.2 表单标签
表单:在网页中主要负责数据采集功能,如 注册、登录等数据采集
标签:
注:input 中的 name,是要提交字段的名字,type是类型,常见的类型如下:
效果:
输入,然后提交,此时 URL 变成了:
如果把表单 method 改为 post,就会在消息体中传递
表单项除了 input 标签,还有 select 和 textarea
制作一个表单:
注:name 用来标识元素
value 是提交表单时候的字段名
id 则是用于把 for 和元素关联
效果:
好文推荐
本文由 用户 于 2024-05-19 发布在 金钥匙,如有疑问,请联系我们。
本文链接:https://www.51969.com/post/18833186.html
发表评论