高端网站开发报价,jquery 选择 网站,公众号后端框架,大型门户网站设计解决方案话不多说#xff0c;先来一张泳装板鸭镇楼 接上一开篇#xff0c;
首战以web的三大基石开头#xff08;html、css、js#xff09;#xff0c;js内容比较多#xff0c;下一序章讲解#xff0c;这一章节主要以html和css为主。 目录 一、初始web前端 二、HTML标签结构 三、…话不多说先来一张泳装板鸭镇楼 接上一开篇
首战以web的三大基石开头html、css、jsjs内容比较多下一序章讲解这一章节主要以html和css为主。 目录 一、初始web前端 二、HTML标签结构 三、Vscode插件下载列表 四、新闻排版演练-上阙 五、CSS样式 六、盒子模型-布局 七、新闻排版演练-下阙 八、总结 一、初始web前端
- Web标准是一些规范的集合是由W3C和其他的标准化组织共同制定的以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计使其能够被大多数人所访问。
网页主要由三部分组成结构Structure、表现Presentation和行为Behavior。这些标准大部分由W3CWorld Wide Web Consortium起草和发布也有一些是其他标准组织制订的标准比如ECMAEuropean Computer Manufacturers Association的ECMAScript标准。
- 三个组成部分
(1) HTML负责网页的结构页面的元素和内容
(2)CSS负责网页的样式元素外观、页面样式之类的
(3)JS负责网页的行为(交互)
文本javaweb开篇(html元素)有加粗效果(css)编辑文章可以点击js 二、HTML标签结构
2.1HTML标签组成
创建一个后缀为.html的文件通过vscode建议用这个软件打开后输入字符会快捷生成html结构直接上代码。
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbody/body/html 1.!DOCTYPE html#表明这是一个html文档 2.html langen: #向搜索引擎表示该页面是Html语言且语言为英文如果你是中文的话可以可以改成zhlanguage语言的意思本身没什么用就是给搜索引擎看的因为搜索引擎不会判断该站点属于中文还是英文html规范你的页面越规范越容易被收录 3.meta charsetUTF-8: #规定HTML文档的字符编码 4.meta nameviewport contentwidthdevice-width, initial-scale1.0:#兼容用的标识宽度为设备宽度初始的缩放比例为1.0 5.titleDocument/title:#标题 6.body:#内容 2.2特点
- HTML标签不区分大小写。HTml、htML都可以一个意思
- HTML标签属性值单双引号都可以。UTF-8也可以
- HTML语法比较松散。比如不写/html的尾结构也可以正常运行 三、Vscode插件下载列表
Chinese language、code spell checker、html css support、javascript code snippets、mithril emmet、path intellisense、vue 3 snippets、vuehelper、auto close tag、auto rename tag、beautify、bracket pair colorizer、open in browser、vetur、injellj idea keybindings可选idea的快捷键同步、html to css autocompletion 比较多但真的很实用 四、新闻排版演练-上阙
![某新闻页.png]
初步看界面元素有标题、图片、文本、超连接、颜色、视频等等
4.1 标题部分
!-- 文档类型为html --!DOCTYPE htmlhtml langenhead!-- 字符集为utf-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/title/headbody!-- src 图片资源路径 --!-- width 宽度(px:像素 百分比相对于父元素的百分比) --!-- height 高度 (px:像素 百分比相对于父元素的百分比)--!-- 路径指定方式1.绝对磁盘路径:本地磁盘 /vosuma/user/1111.png网络绝对路径 https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png2.相对路径推荐:./ 当前目录 可以省略../上一级目录不可省略 --img srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 新浪政务 正文h1“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1!-- 水平分割线 --hr2023年08月22日 20:45 央视网hr/body/html 1.imgsrc指定图片路径可以分为绝对路径和相对路径。绝对路径可以分为本地磁盘绝对路径和网络绝对路径本地磁盘绝对路径为电脑本地图片真实地址网络绝对路径属于网络指向图片的真实链接。相对路径则是提前图片等资源单独存储在工程文件夹内可能是当前目录也可能是上一级目录 2.h1-h6标题代表不同的表现只有这几个级别 3.hr分割线  4.2正文部分
!-- 文档类型为html --!DOCTYPE htmlhtml langenhead!-- 字符集为utf-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/title/headbody!-- src 图片资源路径 --!-- width 宽度(px:像素 百分比相对于父元素的百分比) --!-- height 高度 (px:像素 百分比相对于父元素的百分比)--img srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 新浪政务 正文h1“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1!-- 水平分割线 --hr2023年08月22日 20:45 央视网hrvideo src/Users/Desktop/newsvideo.mp4 controls height300px width100%/videospan进入主汛期以来北京多地遭遇持续强降雨。广大党员干部冲锋在前和人民群众风雨同舟共同构筑起防汛救灾、守护家园的坚固防线。7月31日上午在北京市门头沟区色树坟村村委会包村干部熊丽频繁望向窗外观察雨情这是她生前留下的最后影像。面对此次严峻汛情熊丽始终坚守一线参与群众疏散转移、物资筹集、风险点位巡查等工作。7月31日上午在与村干部一同勘察险情的途中一处铁道路基护墙突然发生了坍塌熊丽不幸被掩埋因公牺牲年仅36岁。在本轮强降雨过程中色树坟村成功转移群众110余人没有人员伤亡。/spanimg srchttps://k.sinaimg.cn/n/news/crawl/59/w550h309/20230823/4cef-e6a512e75ae14eb1de0c457b4b1cf407.png/w700d1q75cms.jpg?bycms_fixed_widthspan北京市门头沟区色树坟村村委会主任 宗秀山熊丽坚决说她说去镇里派我们在村里包村就是做这项工作的说有这种情况我能不去吗这就是她最后一句话。那几个村民也是根本不考虑手破了什么的当时的心情就是赶紧把她弄出来就事后一聊这段的时候真的说不下去了。受强降雨引发塌方影响7月30日从内蒙古开往北京的K396次列车被迫滞留在北京门头沟区落坡岭站近千名受困旅客被临时安置在附近的落坡岭社区。这个只有三百多常住人口的社区在党支部书记孟二梅的带领下尽最大努力向被困旅客提供帮助。/spanimg srchttps://k.sinaimg.cn/n/news/crawl/59/w550h309/20230823/bb6e-e82ab09f5b6ef5b077d1286c7bd99ef1.png/w700d1q75cms.jpg?bycms_fixed_width altspan责任编辑王树淼 SN242/span/body/html 1.video视频标签路径引入方式与图片相同我这里因为没有视频资源我手机录了一个视频跟网页有点不兼容随便看看 1.1video-controls 主要显示video的播放控制器如果没有操作可以不用赋值我这没赋值默认 1.2video-width-height表示宽高单位可以是px、cm、百分比 2.span组合行内元素没有任何语义此处用这个的原因css讲解  五、CSS样式
如上小结最终网页效果可以说是有点惨不忍睹这就是html主要的作用处理页面排版、元素之类的。而怎么变的好看呢需要css来处理css主要是美化页面、元素样式。 5.1css样式引入规则
- 行内样式写在标签的style属性中
h1 stylecolor: red;“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1
- 内嵌样式写在style标签中可以写在任何位置通常是在head标签中
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/titlestyleh1 {color: red;}/style/headbodyh1“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1/body
- 外联样式写在一个单独的css文件中需要通过link标签引入
news.css文件内容h1 {color: grey;}/* h1选择器,用于标记生效标签 */headmeta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/titlelink relstylesheet href./css/news.css/head
5.2css选择器
相信细节的朋友已经发现了关于style中的h1{}的写法html中需要给特定的元素设置样式的时候要先知道你要给什么元素设置而标识元素从而找到元素的行为是交给选择器处理的分为三种选择器。
- 元素选择器 标签名h1 title span
title“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/title
- 类选择器.class属性值。可以存在多个我理解是小部分范围内样式统一标签
style.title_style {color: aqua;}/styleh1 classtitle_style“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1!-- 水平分割线 --hr classtitle_style2023年08月22日 20:45 央视网hr
- id选择器#id属性值。有且当前页只能有一个
style#title_style{color: aqua;}/styleh1 idtitle_style“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1
- 同覆盖时优先级id选择器类选择器元素选择器通俗就是越小范围优先级越高 六、盒子模型-布局 页面中所有的元素标签都可以看做是一个盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子视角更方便进行页面布局。
6.1盒子模型组成
- 内容区域 content
- 内边距区域 padding
- 边框区域 border
- 外边距区域margin
6.2布局标签
div标签和span标签问了问web开发朋友在实际项目中会有大量的频繁使用的div和span标签这俩都是没有语义的布局标签 div标签
- 一行只显示一个独占一行
- 宽度默认是父元素的宽度高度默认根据内容撑开
- 可以设置宽高 span标签
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
6.3盒子代码演示 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;box-sizing: border-box;background: gray;padding: 20px 20px 20px 20px;border: 10px solid red;margin: 20px 20px 20px 20px;}/style/headbodydivA A A A A A A A A A A A A A A A A A A A A A A A A A A A A/div/body/html
1.width-height指定宽高
2.box-sizing指定宽高为盒子的宽高也就是盒子大小200*200从图可以看到margin是不算在盒子里的
3.padding内边距区域赋值顺序为 顺时针上右下左
4.border边框10px位边框宽度solid为实线填充
5.margin :外边距区域赋值顺序为顺时针 上右下左
6.background背景色 盒子的概念比较重要可以自己写写多看看这块以后写布局的时候这个概念要用的非常熟悉才行 #七、新闻排版演练-下阙
!-- 文档类型为html --!DOCTYPE htmlhtml langenheadmeta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/titlestylea {color: blue;text-decoration: none;}h1 {color: #4d4f53;}#time {color: #c2c8d1;}p {text-indent: 2cm;line-height: 40px;}.content_img {width: 100%;}#center {width: 70%;/* margin: 0 15% 0 15%; */margin: 0 auto;}#zrbj {text-align: right;}/style/headbodydiv idcenterimg srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 新浪政务 正文h1“我们有一口吃的坚决不能让他们饿着” 风雨中这样的守护温暖感人/h1!-- 水平分割线 --hrspan idtime2023年08月22日20:45/spanspana hrefhttps://www.jianshu.com/u/07e55886f971 target_blank央视网/a/spanhr!-- video src/Users/Desktop/newsvideo.mp4 height300px width100%/video --p进入主汛期以来北京多地遭遇持续强降雨。广大党员干部冲锋在前和人民群众风雨同舟共同构筑起防汛救灾、守护家园的坚固防线。7月31日上午在北京市门头沟区色树坟村村委会包村干部熊丽频繁望向窗外观察雨情这是她生前留下的最后影像。面对此次严峻汛情熊丽始终坚守一线参与群众疏散转移、物资筹集、风险点位巡查等工作。7月31日上午在与村干部一同勘察险情的途中一处铁道路基护墙突然发生了坍塌熊丽不幸被掩埋因公牺牲年仅36岁。在本轮强降雨过程中色树坟村成功转移群众110余人没有人员伤亡。/pimg classcontent_imgsrchttps://k.sinaimg.cn/n/news/crawl/59/w550h309/20230823/4cef-e6a512e75ae14eb1de0c457b4b1cf407.png/w700d1q75cms.jpg?bycms_fixed_widthbrpb北京市门头沟区色树坟村村委会主任宗秀山/b熊丽坚决说她说去镇里派我们在村里包村就是做这项工作的说有这种情况我能不去吗这就是她最后一句话。那几个村民也是根本不考虑手破了什么的当时的心情就是赶紧把她弄出来就事后一聊这段的时候真的说不下去了。受强降雨引发塌方影响7月30日从内蒙古开往北京的K396次列车被迫滞留在北京门头沟区落坡岭站近千名受困旅客被临时安置在附近的落坡岭社区。这个只有三百多常住人口的社区在党支部书记孟二梅的带领下尽最大努力向被困旅客提供帮助。/pimg classcontent_imgsrchttps://k.sinaimg.cn/n/news/crawl/59/w550h309/20230823/bb6e-e82ab09f5b6ef5b077d1286c7bd99ef1.png/w700d1q75cms.jpg?bycms_fixed_widthp idzrbj责任编辑王树淼 SN242/p/div/body/html
style行为我用内联方式方便代码展示
1.p段落
2.b或strong文本加粗strong表示突出但其实展示效果一样
3.br换行
4.css属性text-indent段落缩进、line-height行距、text-decoration下划线、text-align文本对齐方式
5. a 超链接引入 href 为地址 target中_blank为打开新的标签 _self在当前标签打开 八、总结
主要围绕html和css的一些基本概念进行讲解通过概念说明项目实练加深对html、css的理解其中比较关键的概念是盒子布局。
其中涉及的所有标签
title 标题
img 图片 src 图片路径
h1-h6 标题级别
hr 分割线
video 视频 controls 播放控制器
span 布局标签没实际含义一行可以显示多个宽高默认内容撑开不支持手动设置宽高
box-sizing 盒子大小 border-box指定宽高属性对盒子生效
padding 内边距区域 顺时针 上右下左可以简写auto
border 边框 solid 实线
margin 外边距区域
background 背景色
div 布局标签没实际含义一行只可以显示一个宽度默认父元素宽度高度默认由内容撑开 可以设置宽高要考的
p 段落
br 换行
b、strong 加粗
a 超链接引入 href 为地址 target中_blank为打开新的标签 _self在当前标签打开
text-indent段落缩进
line-height行距
text-decoration下划线
text-align文本对齐方式
