网站群系统破解版ppt一键生成免费版

网站群系统破解版,ppt一键生成免费版,加氢站个公司好,淮北网站建设费用html 的介绍 学习目标 能够知道html的作用 1. html的定义 2. html的定义 HTML 的全称为#xff1a;HyperText Mark-up Language, 指的是超文本标记语言。 标记#xff1a;就是标签, 标签名称 /标签名称, 比如: html/html、h1HyperText Mark-up Language, 指的是超文本标记语言。 标记就是标签,标签名称 /标签名称, 比如:html/html、h1/h1等标签大多数都是成对出现的。所谓超文本有两层含义:因为网页中还可以图片、视频、音频等内容(超越文本限制)它还可以在网页中跳转到另一个网页与世界各地主机的网页链接(超链接文本)3. html的作用html是用来开发网页的它是开发网页的语言。4. 小结html是开发网页的语言html中的标签大多数都是成对出现的, 格式:标签名/标签名html 的基本结构学习目标能够写出html的基本结构1. 结构代码!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title网页标题/title/headbody网页显示内容/body/html第一行!DOCTYPE html是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。html.../html标签是开发人员在告诉浏览器整个网页是从html这里开始的到/html结束,也就是html文档的开始和结束标签。head.../head标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。body.../body标签是编写网页上显示的内容。2. 浏览网页文件网页文件的后缀是**.html或者.htm**,一个html文件就是一个网页html文件用编辑器打开显示的是文本可以用文本的方式编辑它如果用浏览器打开浏览器会按照标签描述内容将文件渲染成网页。3. 小结vscode 的基本使用学习目标能够安装和卸载 vscode 的插件能够设置 vscode 的颜色主题和字体大小1. vscode 的基本介绍全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器目前是前端(网页)开发使用最多的一款软件开发工具。2. vscode 的安装下载网址: https://code.visualstudio.com/Download选择对应的安装包进行下载:根据下载的安装包双击进行安装即可当然为了更好的使用 vscode 还可以安装对应的插件。3. vscode 的插件安装插件名说明Chinese (Simplified) Language Pack for VS Code中文(简体)汉化包open in browser右击在浏览器打开html① 汉化插件安装② open in browser插件安装注意: 如果在vscode打开的html文档中右击没有出现 open in browser 类型的选项需要把当前打开的文件关掉重新打开这个文件就好了。4. vscode 的插件卸载点击对应安装的插件然后再点击卸载按钮即可。5. vscode 的使用① 打开文件夹创建文件② 快速创建html文档的基本结构③ 右击在浏览器打开html文档6. 设置字体大小7. 设置颜色主题8. 设置默认浏览器[可选]可以根据自己的需要设置默认使用的浏览器9. 小结vscode 是由微软研发的一款免费、开源的跨平台代码编辑器通过资源管理器打开文件夹创建HTML文件编写 HTML 代码可以根据需要安装对应的插件可以设置字体大小和颜色主题初始常用的 html 标签学习目标能够知道单标签和双标签的区别1. 常用的 html 标签!-- 1、成对出现的标签--h1h1标题/h1div这是一个div标签/divp这个一个段落标签/p!-- 2、单个出现的标签 --brimgsrcimages/pic.jpgalt图片hr!-- 3、带属性的标签如src、alt 和 href等都是属性 --imgsrcimages/pic.jpgalt图片ahrefhttp://www.baidu.com百度网/a!-- 4、标签的嵌套 --divimgsrcimages/pic.jpgalt图片ahrefhttp://www.baidu.com百度网/a/div提示:标签不区分大小写但是推荐使用小写。根据标签的书写形式标签分为双标签(闭合标签)和单标签(空标签)2.1 双标签是指由开始标签和结束标签组成的一对标签这种标签允许嵌套和承载内容比如: div标签2.2 单标签是一个标签组成没有标签内容 比如: img标签2. 小结学习 html 语言就是学习标签的用法常用的标签有20多个。编写 html 标签建议使用小写根据书写形式html 标签分为双标签和单标签单标签没有标签内容双标签可以嵌套其它标签和承载文本内容资源路径学习目标能够知道相对路径和绝对路径的区别当我们使用img标签显示图片的时候需要指定图片的资源路径比如:imgsrcimages/logo.png这里的src属性就是设置图片的资源路径的资源路径可以分为相对路径和绝对路径。1. 相对路径从当前操作 html 的文档所在目录算起的路径叫做相对路径示例代码:!-- 相对路径方式1 --imgsrc./images/logo.png!-- 相对路径方式2 --imgsrcimages/logo.png同级关系直接引用文件名称Linux ./images/Windows images/上一级关系…/下一级关系文件夹名称/2. 绝对路径从根目录算起的路径叫做绝对路径Windows 的根目录是指定的盘符mac OS 和Linux 是/示例代码:!-- 绝对路径 --imgsrc/Users/apple/Desktop/demo/hello/images/logo.pngimgsrcC:\demo\images\001.jpg提示:一般都会使用相对路径绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题3. 小结相对路径和绝对路径是 html 标签使用资源文件的两种方式一般使用相对路径。相对路径是从当前操作的 html 文档所在目录算起的路径绝对 路径是从根目录算起的路径列表标签学习目标能够知道列表标签的种类1. 列表标签的种类无序列表标签(ul标签)有序列表标签(ol标签)2. 无序列表!-- ul标签定义无序列表 -- ul !-- li标签定义列表项目 -- li列表标题一/li li列表标题二/li li列表标题三/li /ul3. 有序列表!-- ol标签定义有序列表 -- ol !-- li标签定义列表项目 -- lia href#列表标题一/a/li lia href#列表标题二/a/li lia href#列表标题三/a/li /ol4. 小结列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)列表项目对顺序有要求的时候使用ol标签列表项目对顺序无要求的时候使用ul标签表格标签学习目标能够知道表格的边线合并1. 表格的结构表格是由行和列组成好比一个excel文件2. 表格标签标签表示一个表格示例代码:table tr th姓名/th th年龄/th /tr tr td张三/td td18/td /tr /table表格边线合并:border-collapse 设置表格的边线合并如border-collapse:collapse;表单标签学习目标能够知道表单中常用的表单元素标签1. 表单的介绍表单用于搜集不同类型的用户输入(用户输入的数据)然后可以把用户数据提交到web服务器 。2. 表单相关标签的使用form标签 表示表单标签定义整体的表单区域label标签 表示表单元素的文字标注标签定义文字标注input标签 表示表单元素的用户输入标签定义不同类型的用户输入数据方式type属性type“text” 定义单行文本输入框type“password” 定义密码输入框type“radio” 定义单选框type“checkbox” 定义复选框type“file” 定义上传文件type“submit” 定义提交按钮type“reset” 定义重置按钮type“button” 定义一个普通按钮textarea标签 表示表单元素的多行文本输入框标签 定义多行文本输入框select标签 表示表单元素的下拉列表标签 定义下拉列表option标签 与select标签配合定义下拉列表中的选项示例代码:form p label姓名/labelinput typetext /p p label密码/labelinput typepassword /p p label性别/label input typeradio 男 input typeradio 女 /p p label爱好/label input typecheckbox 唱歌 input typecheckbox 跑步 input typecheckbox 游泳 /p p label照片/label input typefile /p p label个人描述/label textarea/textarea /p p label籍贯/label select option北京/option option上海/option option广州/option option深圳/option /select /p p input typesubmit value提交 input typereset value重置 /p /form3. 小结表单标签是form标签常用的表单元素标签有:label、input、textarea、select等标签表单提交学习目标能够知道表单的提交方式能够知道表单中action属性的作用1. 表单属性设置form标签 表示表单标签定义整体的表单区域action属性 设置表单数据提交地址method属性 设置表单提交的方式一般有“GET”方式和“POST”方式, 不区分大小写2. 表单元素属性设置name属性 设置表单元素的名称该名称是提交数据时的参数名value属性 设置表单元素的值该值是提交数据时参数名所对应的值3. 示例代码form actionhttps://www.baidu.com methodGET p label姓名/labelinput typetext nameusername value11 / /p p label密码/labelinput typepassword namepassword / /p p label性别/label input typeradio namegender value0 / 男 input typeradio namegender value1 / 女 /p p label爱好/label input typecheckbox namelike valuesing / 唱歌 input typecheckbox namelike valuerun / 跑步 input typecheckbox namelike valueswiming / 游泳 /p p label照片/label input typefile nameperson_pic /p p label个人描述/label textarea nameabout/textarea /p p label籍贯/label select namesite option value0北京/option option value1上海/option option value2广州/option option value3深圳/option /select /p p input typesubmit name value提交 input typereset name value重置 /p /form小结表单标签的作用就是可以把用户输入数据一起提交到web服务器。表单属性设置action: 是设置表单数据提交地址method: 是表单提交方式提交方式有GET和POST表单元素属性设置name: 表单元素的名称用于作为提交表单数据时的参数名value: 表单元素的值用于作为提交表单数据时参数名所对应的值css 的介绍学习目标能够知道css的作用1. css 的定义css(Cascading Style Sheet)层叠样式表它是用来美化页面的一种语言。没有使用css的效果图使用css的效果图2. css 的作用美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。控制页面布局, 比如: 设置浮动、定位等样式。3. css 的基本语法选择器{样式规则}样式规则属性名1属性值1;属性名2属性值2;属性名3属性值3;…选择器:是用来选择标签的选出来以后给标签加样式。代码示例:div{ width:100px; height:100px; background:gold; }说明css 是由两个主要的部分构成选择器和一条或多条样式规则注意:样式规则需要放到大括号里面。4. 小结css 是层叠样式表它是用来美化网页和控制页面布局的。定义 css 的语法格式是: 选择器{样式规则}css 的引入方式学习目标能够知道 css 的引入三种方式css的三种引入方式行内式内嵌式内部样式外链式1. 行内式直接在标签的 style 属性中添加 css 样式示例代码:divstylewidth:100px;height:100px;background:redhello/div优点方便、直观。 缺点缺乏可重用性。2. 内嵌式内部样式在head标签内加入style标签在style标签中编写css代码。示例代码:headstyletypetext/cssh3{color:red;}/style/head优点在同一个页面内部便于复用和维护。 缺点在多个页面之间的可重用性不够高。3. 外链式将css代码写在一个单独的.css文件中在head标签中使用link标签直接引入该文件到页面中。示例代码:linkrelstylesheettypetext/csshrefcss/main.css优点使得css样式与html页面分离便于整个页面系统的规划和维护可重用性高。 缺点css代码由于分离到单独的css文件容易出现css代码过于集中若维护不当则极容易造成混乱。4. css引入方式选择行内式几乎不用内嵌式在学习css样式的阶段使用外链式在公司开发的阶段使用可以对 css 样式和 html 页面分别进行开发。5. 小结css 的引入有三种方式, 分别是行内式、内嵌式、外链式。外链式是在公司开发的时候会使用最能体现 divcss 的标签内容与显示样式分离的思想 也最易改版维护代码看起来也是最美观的一种。css 选择器学习目标能够说出 css 选择器的种类1. css 选择器的定义css 选择器是用来选择标签的选出来以后给标签加样式。2. css 选择器的种类标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器3. 标签选择器根据标签来选择标签以标签开头此种选择器影响范围大一般用来做一些通用设置。示例代码styletypetext/cssp{color:red;}/styledivhello/divphello/p4. 类选择器根据类名来选择标签以 . 开头, 一个类选择器可应用于多个标签上一个标签上也可以使用多个类选择器多个类选择器需要使用空格分割应用灵活可复用是css中应用最多的一种选择器。示例代码style typetext/css .blue{color:blue} .big{font-size:20px} .box{width:100px;height:100px;background:gold} /style div classblue这是一个div/div h3 classblue big box这是一个标题/h3 p classblue box这是一个段落/p5. 层级选择器(后代选择器)根据层级关系选择后代标签以选择器1 选择器2开头主要应用在标签嵌套的结构中减少命名。示例代码style typetext/css div p{ color: red; } .con{width:300px;height:80px;background:green} .con span{color:red} .con .pink{color:pink} .con .gold{color:gold} /style div phello/p /div div classcon span哈哈/span a href# classpink百度/a a href# classgold谷歌/a /div span你好/span a href# classpink新浪/a注意点: 这个层级关系不一定是父子关系也有可能是祖孙关系只要有后代关系都适用于这个层级选择器6. id选择器根据id选择标签以#开头, 元素的id名称不能重复所以id选择器只能对应于页面上一个元素不能复用id名一般给程序使用所以不推荐使用id作为选择器。示例代码style typetext/css #box{color:red} /style p idbox这是一个段落标签/p !-- 对应以上一条样式其它元素不允许应用此样式 -- p这是第二个段落标签/p !-- 无法应用以上样式每个标签只能有唯一的id名 -- p这是第三个段落标签/p !-- 无法应用以上样式每个标签只能有唯一的id名 --注意点: 虽然给其它标签设置id“box”也可以设置样式但是不推荐这样做因为id是唯一的以后js通过id只能获取一个唯一的标签对象。7. 组选择器根据组合的选择器选择不同的标签以 , 分割开, 如果有公共的样式设置可以使用组选择器。示例代码style typetext/css .box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} /style div classbox1这是第一个div/div div classbox2这是第二个div/div div classbox3这是第三个div/div8. 伪类选择器用于向选择器添加特殊的效果,以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器示例代码style typetext/css .box1{width:100px;height:100px;background:gold;} .box1:hover{width:300px;} /style div classbox1这是第一个div/div9. 小结css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种分别是:标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器css 属性学习目标能够知道常用的样式属性我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1. 布局常用样式属性width 设置元素(标签)的宽度如width:100px;height 设置元素(标签)的高度如height:200px;background 设置元素背景色或者背景图片如background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。border 设置元素四周的边框如border:1px solid black; 设置元素四周边框是1像素宽的黑色实线以上也可以拆分成四个边的写法分别设置四个边的border-top 设置顶边边框如border-top:10px solid red;border-left 设置左边边框如border-left:10px solid blue;border-right 设置右边边框如border-right:10px solid green;border-bottom 设置底边边框如border-bottom:10px solid pink;2. 文本常用样式属性color 设置文字的颜色如 color:red;font-size 设置文字的大小如font-size:12px;font-family 设置文字的字体如font-family:‘微软雅黑’;为了避免中文字不兼容一般写成font-family:‘Microsoft Yahei’;font-weight 设置文字是否加粗如font-weight:bold; 设置加粗 font-weight:normal 设置不加粗line-height 设置文字的行高如line-height:24px; 表示文字高度加上文字上下的间距是24px也就是每一行占有的高度是24pxtext-decoration 设置文字的下划线如text-decoration:none; 将文字下划线去掉text-align 设置文字水平对齐方式如text-align:center 设置文字水平居中left/center/right)text-indent 设置文字首行缩进如text-indent:24px; 设置文字首行缩进24px3. 布局常用样式属性示例代码style.box1{width:200px;height:200px;background:yellow;border:1px solid black;}.box2{/* 这里是注释内容 *//* 设置宽度 */width:100px;/* 设置高度 */height:100px;/* 设置背景色 */background:red;/* 设置四边边框 *//* border: 10px solid black; */border-top:10px solid black;border-left:10px solid black;border-right:10px solid black;border-bottom:10px solid black;/* 设置内边距 内容到边框的距离如果设置四边是上右下左 *//* padding: 10px; */padding-left:10px;padding-top:10px;/* 设置外边距设置元素边框到外界元素边框的距离 */margin:10px;/* margin-top: 10px; margin-left: 10px; */float:left;}.box3{width:48px;height:48px;background:pink;border:1px solid black;float:left;}/styledivclassbox1divclassbox2padding 设置元素包含的内容和元素边框的距离/divdivclassbox3/div/div4. 文本常用样式属性示例stylep{/* 设置字体大小 浏览器默认是 16px */font-size:20px;/* 设置字体 */font-family:Microsoft YaHei;/* 设置字体加粗 */font-weight:bold;/* 设置字体颜色 */color:red;/* 增加掉下划线 */text-decoration:underline;/* 设置行高 */line-height:100px;/* 设置背景色 */background:green;/* 设置文字居中 *//* text-align: center; */text-indent:40px;}a{/* 去掉下划线 */text-decoration:none;}/styleahref#连接标签/ap你好世界!/p5. 小结设置不同的样式属性会呈现不同网页的显示效果background:pink;border: 1px solid black;float: left;}padding 设置元素包含的内容和元素边框的距离4. 文本常用样式属性示例stylep{/* 设置字体大小 浏览器默认是 16px */font-size:20px;/* 设置字体 */font-family:Microsoft YaHei;/* 设置字体加粗 */font-weight:bold;/* 设置字体颜色 */color:red;/* 增加掉下划线 */text-decoration:underline;/* 设置行高 */line-height:100px;/* 设置背景色 */background:green;/* 设置文字居中 *//* text-align: center; */text-indent:40px;}a{/* 去掉下划线 */text-decoration:none;}/styleahref#连接标签/ap你好世界!/p5. 小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是:属性名:属性值;