网站建设方案的含义,重庆为什么导航用不了,学习做网站大概多久时间,wordpress 金融主题一、Web 开发
1. 什么是 Web #xff1f; Web#xff1a;全球广域网#xff0c;也称为万维网(www#xff0c;World Wide Web)#xff0c;能够通过浏览器访问的 网站。 2. Web 网站的开发模式 3. Web 标准 Web 标准也称为网页标准#xff0c;由一系列的标准组成#xff…一、Web 开发
1. 什么是 Web Web全球广域网也称为万维网(wwwWorld Wide Web)能够通过浏览器访问的 网站。 2. Web 网站的开发模式 3. Web 标准 Web 标准也称为网页标准由一系列的标准组成大部分由 W3C World Wide Web Consortium万维网联盟负责制定。 三个组成部分 1HTML负责 网页的结构页面元素和内容。 2CSS负责 网页的表现页面元素的外观、位置等页面样式如颜色、大小等。 3JavaScript负责 网页的行为交互效果。 二、HTML CSS
什么是 HTML ? HTMLHyperText Markup Language超文本标记语言。 1超文本超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等内容。 2标记语言由标签构成的语言 1️⃣HTML 标签都是 预定义 好的。例如使用 a 展示超链接使用 img 展示图片 video 展示视频。 2️⃣HTML 代码真接在浏览器中运行HTML 标签由浏览器解析。 什么是 CSS ? CSSCascading Style Sheet层叠样式表用于控制页面的样式表现。 1. HTML 快速入门 1新建文本文件后缀名改为.html 2编写 HTML 结构标签 3在 body 中填写内容 htmlheadtitleHTML 快速入门/title/headbodyh1Hello HTML/h1img src1.jpg//body
/html其中 html 是根标签 head 和 body 是子标签 head 中的子标签 title 是用来定义网页的标题的里面定义的内容会显示在浏览器网页的标题位置。 而 body 中编写的内容会呈现在浏览器的内容区域。 HTML中 的标签特点 1HTML 标签不区分大小写。 2HTML 标签的属性值采用单引号、双引号都可以。 3HTML 语法相对比较松散 (建议大家编写 HTML 标签的时候尽量严谨一些)。 2. 开发工具 1我们通过快速入门案例发现由记事本文件开发 html 是非常不方便的所以接下来我们需要学习一款前端专业的开发工具 VS Code。 2Visual Studio Code简称 VS Code 是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持同时也其他编程语言例如C、Java、Python、PHP、Go等。 3VS Code 提供了非常强大的插件库大大提高了开发效率。 3. 基础标签 样式
3.1 新浪新闻-标题实现
3.1.1 标题排版
3.1.1.1 标签
1图片标签 img
A. 图片标签: img
B. 常见属性:src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)备注: 一般width 和 height 我们只会指定一个另外一个会自动的等比例缩
放。C. 路径书写方式:绝对路径:1. 绝对磁盘路径:
C:\Users\Administrator\Desktop\HTML\img\news_logo.pngimg
srcC:\Users\Administrator\Desktop\HTML\img\news_logo.png2. 绝对网络路径:
https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.
png
img
srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png相对路径:./ : 当前目录 , ./ 可以省略的../: 上一级目录2标题标签 h 系列
A. 标题标签: h1 - h6h1111111111111/h1h2111111111111/h2h3111111111111/h3h4111111111111/h4h5111111111111/h5h6111111111111/h6B. 效果 : h1为一级标题字体也是最大的 h6为六级标题字体是最小的。3水平分页线标签
hr3.1.1.2 实现
!-- 文档类型为HTML --
!DOCTYPE html
html langen
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈 新思想夯实大国粮仓/title
/head
body!-- img标签: src: 图片资源路径width: 宽度(px, 像素 ; % , 相对于父元素的百分比)height: 高度(px, 像素 ; % , 相对于父元素的百分比)img srcimg/news_logo.png width80% 路径书写方式:绝对路径:1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.pngimg srcC:\Users\Administrator\Desktop\HTML\img\news_logo.png2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.pngimg srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png相对路径:./ : 当前目录 , ./ 可以省略的../: 上一级目录--img srcimg/news_logo.png 新浪 正文h1焦点访谈 新思想夯实大国粮仓/h1hr2023年03月02日 21:50 央视网hr/body
/html3.1.2 标题样式
3.1.2.1 CSS 引入方式 3.1.2.2 颜色表示
在前端程序开发中颜色的表示方式常见的有如下三种
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈新思想夯实大国粮仓/title!-- 方式二: 内嵌样式 --styleh1 {/* color: red; *//* color: rgb(0, 0, 255); */color: #4D4F53;}/style!-- 方式三: 外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg srcimg/news_logo.png 新浪政务 正文!-- 方式一: 行内样式 --!-- h1 stylecolor: red;焦点访谈 新思想夯实大国粮仓/h1 --h1焦点访谈新思想夯实大国粮仓/h1hr2023年03月02日 21:50 央视网hr/body
/html3.1.2.4 CSS 选择器 选择器通用语法如下 选择器名 {css样式名css样式值;css样式名css样式值;
}1元素标签选择器 选择器的名字必须是标签的名字 作用选择器中的样式会作用于所有同名的标签上 元素名称 {css样式名:css样式值
}div{color: red;
}2id选择器: 选择器的名字前面需要加上# 作用选择器中的样式会作用于指定 id 的标签上而且有且只有一个标签由于 id 是唯一的 #id属性值 {css样式名:css样式值
}#did {color: blue;
}3类选择器 选择器的名字前面需要加上 . 作用选择器中的样式会作用于所有 class 的属性值和该名字一样的标签上可以是多个 .class属性值 {css样式名:css样式值
}.cls{color: green;
}3.1.2.5 span 标签 span 是一个在开发网页时大量会用到的没有语义的布局标签。 特点一行可以显示多个组合行内元素宽度和高度默认由内容撑开。 3.1.2.6 css 属性 1 color设置文本的颜色 2font-size字体大小注意记得加 px !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈 新思想夯实大国粮仓/titlestyleh1 {color: #4D4F53;}/* 元素选择器 *//* span {color: red;} *//* 类选择器 *//* .cls {color: green;} *//* ID选择器 */#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}/style
/head
bodyimg srcimg/news_logo.png 新浪政务 正文h1焦点访谈新思想夯实大国粮仓/h1hrspan classcls idtime2023年03月02日 21:50/span span classcls央视网/spanhr/body
/html3.1.3 超链接 1标签: a href“…” target“…”央视网 2属性: 1️⃣href: 指定资源访问的url 2️⃣target: 指定在何处打开资源链接 ①_self: 默认值在当前页面打开 ②_blank: 在空白页面打开 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈 新思想夯实大国粮仓/titlestyleh1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}/style
/head
bodyimg srcimg/news_logo.png a hrefhttp://gov.sina.com.cn/ target_self新浪政务/a 正文h1焦点访谈 新思想夯实大国粮仓/h1hrspan idtime2023年03月02日 21:50/span span a hrefhttps://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blank央视网/a/spanhr/body
/html3.2 新浪新闻-正文实现
3.2.1 正文排版
3.2.1.1 标签
1视频、音频标签 视频标签: video 属性: src: 规定视频的url controls: 显示播放控件 width: 播放器的宽度 height: 播放器的高度 音频标签: audio 属性: src: 规定音频的url controls: 显示播放控件 2 段落标签 换行标签: br 注意: 在 HTML 页面中我们在编辑器中通过回车实现的换行仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML 中换行需要通过 br 标签。 段落标签: p 如: p 这是一个段落 /p 3 文本格式标签 前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果是没有强调语义的。 而后面的 strong、em、ins、del 在实现加粗、倾斜、下划线、删除线的效果的同时还带有强调语义。 3.2.1.2 注意 在上述的正文排版实现中还用到了几个 CSS 属性 1text-indent: 设置段落的首行缩进 2line-height: 设置行高 3text-align: 设置对齐方式, 可取值为 left / center / right 注意事项: 1在 HTML 页面中无论输入了多少个空格最多只会显示一个。 可以使用空格占位符nbsp来生成空格如果需要多个空格就使用多次占位符。 2那在 HTML 中除了空格占位符以外还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)如下 3.2.2 页面布局
3.2.2.1 盒子模型 1盒子页面中所有的元素标签都可以看做是一个 盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局。 2盒子模型组成内容区域content、内边距区域padding、边框区域border、外边距区域margin 3.2.2.2 布局标签 布局标签实际开发网页中会大量频繁的使用 div 和 span 这两个没有语义的布局标签。 div 标签 一行只显示一个独占一行 宽度默认是父元素的宽度高度默认由内容撑开 可以设置宽高width、height span标签 一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高width、height 3.2.2.3 布局实现 在实现新闻页面的布局时我们需要做两部操作 1第一步需要将 body 中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来方便通过 css 设置内容占用的宽度比如65%。 2第二步通过 css 为该 div 设置外边距左右的外边距分别为17.5%上下外边距靠边展示即可为0%。 4. 表格标签 标签 1 table : 用于定义整个表格, 可以包裹多个 tr 常用属性如下 border规定表格边框的宽度 width规定表格的宽度 cellspacing: 规定单元之间的空间 2 tr : 表格的行可以包裹多个 td 3 td : 表格单元格(普通)可以包裹内容如果是表头单元格可以替换为 th 整合表格使用 table 标签包裹其中的每一行数据都是一个 tr每一行中的每一个单元格都是一个 td而如果是表头单元格可以使用 th (具有加粗居中展示的效果)。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表格/titlestyletd {text-align: center; /* 单元格内容居中展示 */}/style
/head
bodytable border1px cellspacing0 width600pxtrth序号/thth品牌Logo/thth品牌名称/thth企业名称/th/trtrtd1/tdtd img srcimg/huawei.jpg width100px /tdtd华为/tdtd华为技术有限公司/td/trtrtd2/tdtd img srcimg/alibaba.jpg width100px /tdtd阿里/tdtd阿里巴巴集团控股有限公司/td/tr/table/body
/html5. 表单标签
5.1 表单
5.1.1 介绍 我们经常在访问网站时出现的登录页面、注册页面、个人信息提交页面其实都是一个一个的表单 。 表单场景表单就是在网页中负责数据采集功能的如注册、登录的表单。 表单标签 form 表单属性 1action规定表单提交时向何处发送表单数据表单提交的 URL。 2method规定用于发送表单数据的方式常见为 GET、POST。 1️⃣GET表单数据是拼接在 url 后面的 如 xxxxxxxxxxx?usernameTomage12url 中能携带的表单数据大小是有限制的。 2️⃣POST 表单数据是在请求体消息体中携带的大小没有限制。 表单项标签不同类型的 input 元素、下拉列表、文本域等。 1️⃣input定义表单项通过 type 属性控制输入形式 2️⃣select定义下拉列表 3️⃣textarea定义文本域 5.1.2 演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单/title
/head
body!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?usernameTomage12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-- form action methodpost用户名: input typetext nameusername年龄: input typetext nameageinput typesubmit value提交/form/body
/html5.1.3 注意事项 表单中的所有表单项要想能够正常的采集数据在提交的时候能提交到服务端表单项必须指定 name 属性。 否则无法提交该表单项。 用户名: input typetext nameusername5.2 表单项
5.2.1 介绍 5.2.2 演示
创建一个新的表单项的html文件具体内容如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单项标签/title
/head
body!-- value: 表单项提交的值 --
form action methodpost姓名: input typetext namename brbr密码: input typepassword namepassword brbr 性别: input typeradio namegender value1 男labelinput typeradio namegender value2 女 /label brbr爱好: labelinput typecheckbox namehobby valuejava java /labellabelinput typecheckbox namehobby valuegame game /labellabelinput typecheckbox namehobby valuesing sing /label brbr图像: input typefile nameimage brbr生日: input typedate namebirthday brbr时间: input typetime nametime brbr日期时间: input typedatetime-local namedatetime brbr邮箱: input typeemail nameemail brbr年龄: input typenumber nameage brbr学历: select namedegreeoption value----------- 请选择 -----------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/select brbr描述: textarea namedescription cols30 rows10/textarea brbrinput typehidden nameid value1!-- 表单常见按钮 --input typebutton value按钮input typereset value重置 input typesubmit value提交 br
/form/body
/html
