Web前端开发学习day01

什么是 WebWeb全球广域网也称为万维网WWWWorld Wide Web能够通过浏览器访问的网站。一个 Web 网站的组成部分1. 前端程序界面展示2. 服务端程序后端开发业务逻辑处理3. 数据库数据存储和管理初识 Web 前端网页由哪几部分组成文字、图片、视频、音频、超链接……我们看到的网页背后的本质是什么程序员写的前端代码前端代码如何转换成用户眼中的网页通过浏览器转换成用户看到的网页。浏览器对代码进行解析渲染的部分称为浏览器内核。提示不同浏览器内核不同对于相同的前端代码解析的效果可能会存在差异。为解决这种差异性产生了 Web 标准。Web 标准Web 标准也称网页标准由一系列的标准组成大部分由 W3CWorld Wide Web Consortium万维网联盟负责制定。三个组成部分HTML负责网页的结构页面元素和内容CSS负责网页的表现页面元素的外观、位置等页面样式如颜色、大小等。JavaScript负责网页的行为交互效果。什么是 HTMLHTMLHyperText Markup Language超文本标记语言。超文本超越了文本的限制除了文字信息还可以定义图片、音频、视频等内容。标记语言由标签 标签名 构成的语言。HTML 标签都是预定义好的。例如使用 h1 展示标题。HTML 代码直接在浏览器中运行HTML 标签由浏览器解析。什么是 CSSCSSCascading Style Sheet层叠样式表用于控制页面的样式表现。MDN Web Docs前端学习网站HTML快速入门1.新建文本文件后缀名改为.html2.编写HTML的基本骨架定义标题3.在body中填写内容html基本骨架标签如下html head titleHTML快速入门/title /head body h1Hello HTML/h1 /body /htmlhead网页头部用来存放给浏览器看的信息如CSS样式body网页主题用来存放给用户看的信息如图片、文字、视频HTML标签的特点html标签不区分大小写建议小写。html标签的属性值使用单引号/双引号都可以html语法结构松散但是建议规范书写常见标签和样式标题标签h1 - h6超链接标签a href target .../ahref指定访问的urltarget指定在何处打开超链接_self:默认值在当前页面打开_blank:在空白页面打开CSS引入方式行内样式写在标签的style属性中配合Javascript使用span style color:red;hello world/span内部样式写在style标签中可以写在页面的任何位置但通常约定写在head标签中style span{ color:blue; } /style外部样式写在一个单独的.css文件中需要通过link标签在网页中引入span{ color:green; } link relstylesheet hrefcss/news.css颜色表示形式表示方式属性值说明示例关键字颜色英文单词red、green、bluered、green、blue...rgb表示法rgb(r,g,b)红绿蓝三原色取值0-255rgb(0,0,0)rgba表示法rgba(r,g,b,a)红绿蓝三原色a表示透明度取值0-1rgba(0,0,0,0.3)十六进制表示法#rrggbb#开头将数字转换成十六进制表示#000000、#ff0000CSS选择器选取需要设置样式的元素选择器写法示例示例说明元素选择器元素名称{...}h1{...}选择页面上所有的h1标签类选择器.class属性值{...}.cls{...}选择页面上所有的class属性为cls的标签id选择器#id属性值#hid{..}选择页面上id属性为hid的标签分组选择器选择器1选择器2{...}h1,h2{...}选择页面上所有的h1,h2标签属性选择器元素名称[属性]{...}input[type]{...}选择页面上有type属性的input标签元素名称[属性”值“]{...}input[type”text“]{...}选择页面上有type属性为text的input标签后代选择器元素1 元素2{...}form input{...}选择form标签内所有的input标签优先级id选择器类选择器元素选择器标签作用属性/说明video视频标签src指定视频的url(绝对路径/相对路径controls:是否显示播放控件width:宽度像素/相对于父元素百分比height高度像素/相对父元素百分比img图片标签src,width,heightp段落标签标签作用属性/说明b/strong加粗strong具有强调语义u/ins下划线ins具有强调语义i/em倾斜em具有强调语义s/del删除线del具有强调语义字符实体属性/说明nbsp空格ltgt盒子模型布局标签网页开发中会使用div和span这俩个没有语义的布局标签。特点div标签1:一行只显示一个独占一行2宽度默认是父元素的宽度高度默认由内容撑开3可以设置宽高span标签1一行可以显示多个2:宽度和高度默认有内容撑开3不可以设置宽高width、height组成内容content、内边距padding、边框border、外边距margin注意事项如果只需要设置某一个方位的边框、内边距、外边距可以在属性名后加上-位置如paddind-top、padding-left.flex布局flex是flexible Box的缩写意为”弹性布局”是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。通过给父容器添加flex的相关属性来控制子元素的位置和排列方式。flex常见的属性属性取值含义displayflex使用flex布局flex-directionrow主轴方向为x轴水平向右默认justify-content子元素在主轴上的对齐方式Colum主轴方向为y轴垂直向下flex-start从头开始排列flex-end从尾部开始排列center在主轴居中对齐space-around平分剩余空间space-between先两边贴边再平分剩余空间表单标签表单在网页中主要负责数据采集功能如注册、登录等数据采集。标签form表单项不同类型的input元素、下拉列表、文本域等。input:定义表单项通过type属性控制输入形式text/password/...)select:定义下拉列表textarea:定义文本域属性action:规定当提交表单时向何处发送表单数据URLmethod:规定用于发送表单数据的方式。GET、POSTget:表单数据拼接在url后面usernamejava,大小有限制post:表单数据在请求体中携带大小没有限制注意表单项必须有name属性才可以提交input标签中type属性的常见取值type取值描述text默认值定义单行输入的字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮date/time/datetime-local定义日期/时间/日期时间hidden定义隐藏域submit/reset/button定义提交按钮/重置按钮/可点击按钮表格标签标签描述table定义表格整体thead定义表格头部可选tbody用于定义表格的主体部分可选tr表格的行可以包裹多个tdtd表格单元格普通可以包裹内容如果时表头单元格可以替换为th