网站建设龙采科技,dm建站系统,wordpress更换百度编辑器,wordpress在线题库目录 1 前言2 HTML2.1 元素(Element)2.1.1 块级元素和内联(行级)元素2.1.2 空元素 2.2 html页面的文档结构2.3 常见标签使用2.3.1 注释2.3.2 标题2.3.3 段落2.3.4 列表2.3.5 超链接2.3.6 图片2.3.7 内联(行级)标签2.3.8 换行 2.4 属性2.4.1 布尔属性 2.5 实体引用2.6 空格2.7 D… 目录 1 前言2 HTML2.1 元素(Element)2.1.1 块级元素和内联(行级)元素2.1.2 空元素 2.2 html页面的文档结构2.3 常见标签使用2.3.1 注释2.3.2 标题2.3.3 段落2.3.4 列表2.3.5 超链接2.3.6 图片2.3.7 内联(行级)标签2.3.8 换行 2.4 属性2.4.1 布尔属性 2.5 实体引用2.6 空格2.7 DOM树2.8 浏览器开发者工具 3 css4 写一个简单的登录页面 1 前言 html 静态基础页面的组成建立了房子的框架。 css 美化页面效果也就是房子的装修。 JavaScript(js) 脚本动态的API。 2 HTML HTML 不是一门编程语言而是一种用来告知浏览器如何组织页面的标记语言它叫超文本标记语言。HTML 可复杂、可简单一切取决于开发者。它由一系列的元素elements组成这些元素可以用来包围不同部分的内容使其以某种方式呈现或者工作。 一对标签 tags可以为一段文字或者一张图片添加超链接将文 字设置为斜体改变字号等等。 创建一个html文件 创建html页面第一步先把windows中的文件拓展名显示出来。新建一个文件并把文件名改成.html。 html特点 可以通过任何编辑器来写代码IDEA。无需编译直接通过浏览器就可以运行Google。 2.1 元素(Element) 示例p我爱我的祖国/p 开始标签 包含元素的名称本例为 p被左、右角括号所包围。表示元素从这里开始或者开始起作用。闭合标签 与开始标签相似只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。内容 元素的内容本例中就是所输入的文本本身。元素 开始标签、结束标签与内容相结合便是一个完整的元素。 HTML 中事先规定了一些元素每种元素都有其语义(semantic)之后我们会了解其中一些场景的元素。这里的 p 是段落(paragraph)的语义。 2.1.1 块级元素和内联(行级)元素 块级元素在页面中默认以块的形式展现。更多的是表示一类段落的语义。例如 p第一段/p p第二段/p p第三段/p p第四段/p内联元素不会导致文本换行更多的表示一个词、一句话等语义。例如 strong第一句话/strong strong第二句话/strong strong第三句话/strong strong第四句话/strong2.1.2 空元素 不是所有元素都拥有开始标签内容结束标签。一些元素只有一个标签通常用来在此元素所在位置插入/嵌入一些东西。例如元素 img 是用来在元素 img 所在位置插入一张指定的图片。例如 img src图片地址源空元素Empty elements 有时也被叫作 空元素 (Void elements)。 2.2 html页面的文档结构 一个最标准最基础的html页面的组成(也就是文档结构)如下所示 htmlheadtitle我的第一个网页/title/headbodyp我是正文/p/body /html或 !DOCTYPE html html langzh-hansheadmeta charsetutf-8title我的第一个网页/title/headbodyh1这是我做的第一个网页/h1p希望能在这次的学习中收获很多的知识。/pimg srcimage/bite.jpg alt比特/body /html!DOCTYPE html : 声明文档类型. 很久以前使用的现在大家都统一使用这个表示 HTML5 就可以。html langzh-hans/html : html 元素这个元素包裹了整个完整的页面是一个根元素。html 是一个 HTML 文档的唯一根元素(Root Element)。虽然不遵守这个约定大多数浏览器也可以识别但我们还是希望大家遵循。langzh-hans 属性表示这个页面是一个简体中文的内容。head/head : head元素 . 这个元素是一个容器它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述CSS样式字符集声明等等。meta charsetutf-8 : 设置文档使用utf-8字符集编码。title/title : 设置页面标题出现在浏览器标签上当你标记/收藏页面时它可用来描述页面。body/body : 包含了你访问页面时所有显示在页面上的内容文本图片音频游戏等等。 2.3 常见标签使用 2.3.1 注释 为了将一段HTML中的内容置为注释你需要将其用特殊的记号 !-- 和 -- 包括起来 比如 p我在注释外/p !-- p我在注释内/p --快捷键 按住ctrl?自动加注释。 2.3.2 标题 h1标题1/h1 到h6标题6/h6标题由大到小且加黑。例如 h1学习 Java/h1 h2学习 Java 基础/h2 h2学习 数据结构/h2 h3学习线性表/h3 h3学习树/h3 h2学习 Java Web/h22.3.3 段落 div/div或p/p 其中div/div是无语义元素通常是用来组织内容方便之后通过 css 或者 js 对其进行布局或操作p/p自动换行且段落和段落之间有间距。例如 !-- 某个版块 -- divh2.../h2p.../p /div!-- 另一个版块 -- divh2.../h2p.../p /div2.3.4 列表 无序列表(Unordered Lists) ul 有序列表(Ordered Lists): ol 列表项目(List Items): li 例如 无序列表 h1早餐提供/h1 ulli豆浆/lili油条/lili豆腐脑/lili米汤/li /ul有序列表 h1学校怎么走/h1 olli沿着条路走到头/lili右转/lili直行穿过第一个十字路口/lili在第三个十字路口处左转/lili继续走 300 米学校就在你的右手边/li /ol嵌套列表 olli先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀调成“腌料”鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀腌渍半小时。/lili用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀调成“综合调味料”。/lili鸡丁腌好以后色拉油下锅烧热先将鸡丁倒入锅内用大火快炸半分钟炸到变色之后捞出来沥干油汁备用。/lili在锅里留下约两大匙油烧热后将切好的干辣椒下锅用小火炒香后再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅用大火快炒片刻后再倒入“综合调味料”继续快炒。ulli如果你采用正宗川菜做法最后只需加入花生米炒拌几下就可以起锅了。/lili如果你在北方可加入黄瓜丁、胡萝卜丁和花生米翻炒后起锅。/li/ul/li /ol2.3.5 超链接 跳转后原页面不见了 a hrefhttps://www.hao123.com/百度/a跳转后原页面还在 a target_blank hrefhttps://www.hao123.com/百度/a2.3.6 图片 img src图片地址源img idcodeid namefeihan title我的头像 src图片地址源这个id是通用属性相当于身份证js在查询元素的时候就是使用这个id来进行查询的name提交给后端的。所以id给前端js使用的后端数据传输使用name。 2.3.7 内联(行级)标签 内联无语义元素 span 嵌套元素strong可以把元素放到其它元素之中——这被称作嵌套。 例如 这里使用 strong 标签来强调 祖国 这一内容。 p我爱我的strong祖国/strong/pp第一段/pp第二段/pp第三段/pp第四段/pspan第一段/spanspan第二段/spanspan第三段/spanspan第四段/span2.3.8 换行 br/2.4 属性 元素可以拥有属性 属性包含元素的额外信息这些信息不会出现在实际的内容中。在上述例子中我们指定了 id 这个属性它的值是 pid还指定了 class 这个属性它的值是 c1 和 c2。 一个属性必须包含如下内容 一个空格在属性和元素名称之间。(如果已经有一个或多个属性就与前一个属性之间有一个空格。)属性名称后面跟着一个等于号。一个属性值由一对引号引起来也就是说假如属性需要设置值必须要使用单引号或双引号来包裹在html和js里面单引号和双引号是没有区别的。 当你浏览那些粗糙的web网站你将会看见各种各样奇怪的标记风格其中就有不给属性值添加引号。在某些情况下它是被允许的但是其他情况下会破坏你的标记。例如我们可以写一个只拥有一个href属性的链接如下 a hrefhttps://www.mozilla.org/收藏页面/a然而当我们再添加一个title属性时就会出错如下 a hrefhttps://www.mozilla.org/ titleThe Mozilla homepage收藏页面/a此时浏览器会误解你的标记它会把title属性理解为三个属性——title的属性值为The“另外还有两个布尔属性“ Mozilla ”和“ homepage ”。看下面的例子它明显不是我们所期望的并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上看会显示什么title属性值!所以我们建议始终添加引号——这样可以避免很多问题并且使代码更易读。 2.4.1 布尔属性 一些属性本身可以没有值这类属性被称为布尔属性。我们更多关心的是这个元素是否有这个属性。例如 用户名input typetext placeholder”请输入用户名“ 用户名input typetext placeholder”请输入用户名“ disabled 用户名input typetext valueadmin placeholder”请输入用户名“ disabledtrue 用户名input typetext valueadmin placeholder”请输入用户名“ disabledfalse 用户名input typetext valueadmin placeholder”请输入用户名“ disabled随便写什么上述五种写法其实效果是完全一样的。都是使得一个输入(input)禁止输入(disabled)。 2.5 实体引用 在HTML中字符 , , , ’ 和 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号或者小于号, 而不想让它们被浏览器视为代码并被解释? 我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用每个字符引用以符号开始, 以分号(;)结束. 常见实体引入如下 原义字符等价字符引用lt; lt 是小于(little) 的意思gt; gt 是大于(great) 的意思quot; quot 是引号(quotation mark) 的意思’apos; apos 是单引号(apostrophe)的意思amp; amp 是 and 符(ampersand)的意思 示例 pHTML 中用 p 来定义段落元素。/ppHTML 中用 lt;pgt; 来定义段落元素/p2.6 空格 在下面的例子中你可能已经注意到了在代码中包含了很多的空格——这是没有必要的下面的两个代码片段是等价的 用 户 名input typetext placeholder”请输入用户名“ 用 户 名input typetext placeholder”请输入用户名“无论你在HTML元素的内容中使用多少空格(包括空白字符包括换行)当渲染这些代码的时候HTML解释器会将连续出现的空白字符减少为一个单独的空格符。 如果想让这些空格显示则需要nbsp;例如 用nbsp;户nbsp;名input typetext placeholder”请输入用户名“用nbsp;nbsp;nbsp;户nbsp;nbsp;nbsp;名input typetext placeholder”请输入用户名“2.7 DOM树 DOMDocument Object Model——文档对象模型是载入到浏览器中的文档模型以节点树的形式来表现文档每个节点代表文档的构成部分例如:页面元素、字符串或注释等等。 2.8 浏览器开发者工具 Google开发者工具(两种打开方式) 点击浏览器右上角“”——更多工具——开发者工具。使用快捷键Ctrl Shift I 快速显示/隐藏开发者工具。 上图中 元素 查看页面元素前端常用的功能)。控制台 用来调试JS代码。源代码/来源 找到当前网站的所有资源文件js/image/css都可以找到并且可以使用它来设置js断点进行调试。网络 查看所有交换的接口详情。 3 css 下面是css三种常见的操作 定义全局的样式方法要使用的话class “样式名div” style.div{/* 背景色 */background-color:green;}/style定义全局样式 stylediv{/* 背景色 */background-color:green;} /stylemargin常用属性内边距 div stylemargin:0 auto;/div //上边距位0 auto且左右居中其它 margin-top; margin-bottom; margin-left; margin-right。 4 写一个简单的登录页面 用html和css结合写一个如下图所示的登录页面 思路 我们可以首先把上图划分为如下图所示的四大块。 htmlheadmeta charsetutf-8title登录页面/title/headbodydiv/divdiv/divdiv/divdiv/div/body /html然后书写第一块的内容,可以选择用h1到h6标题来设置或者也可以使用行级标签span来进行对登录二字的设置,这里我们以span来进行示例。 htmlheadmeta charsetutf-8title登录页面/title/headbody!-- divspan登录/span --!-- 如果我们直接按上面的写法写的话你会发现它出现在了页面的左上角 --!-- 所以接下来我们要对其进行样式设计则最终应该写成下面的样子 --div stylemargin-top:100px; margin-left:500px;span stylefont-size:80px;登录/span/divdiv/divdiv/divdiv/div/body /html接下来就应该书写第二块的内容了有一个文本框文本框要使用input来设置,在设置的时候注意要设置它的typetext并且我们想要有一个提示为“请输入用户名”的话需要设置它的placeholder请输入用户名。 htmlheadmeta charsetutf-8title登录页面/title/headbodydiv stylemargin-top:100px; margin-left:500px;span stylefont-size:80px;登录/span/divdivdiv stylemargin-top:20px; margin-left:450px;用户名input tytetext placeholder请输入用户名!-- 此时你会发现已经有了但问题还没有居中所以我们又要像前面一样进行样式设计了 --!-- 我们考虑再加一个div,让在这个div里设置一下样式 --/div/divdiv/divdiv/div/body /html然后应该书写第三块的内容了也有一个文本框文本框要使用input来设置,在设置的时候注意要设置它的type“password”,这样直接会让我们输入的密码显示为***并且我们想要有一个提示为“请输入密码”的话需要设置它的placeholder“请输入密码”。 htmlheadmeta charsetutf-8title登录页面/title!-- 全局的样式方法--style.innerDiv{margin-top:20px; margin-left:450px;}/style/headbodydiv stylemargin-top:100px; margin-left:500px;span stylefont-size:80px;登录/span/divdiv!-- div stylemargin-top:20px; margin-left:450px --div classinnerDiv用户名input tytetext placeholder请输入用户名/div/divdivdiv classinnerDivnbsp;密nbsp;nbsp;码input tytepassword placeholder请输入密码!-- 此时你会发现已经有了但问题还是没有居中所以我们又要像前面一样进行样式设计了 --!-- 这时我们发现此时设置的样式和前面第二块设置的一模一样所以我们就可以定义一个全局的样式方法来进行样式设计了--/div/divdiv/div/body /html然后应该书写最后一块的内容了有两个按钮我们依旧使用input来设置,在设置的时候注意要设置它的type“button”,以及value登录和value“清空”。 htmlheadmeta charsetutf-8title登录页面/title!-- 全局的样式方法--style.innerDiv{margin-top:20px; margin-left:450px;}/style/headbodydiv stylemargin-top:100px; margin-left:500px;span stylefont-size:80px;登录/span/divdivdiv classinnerDiv用户名input tytetext placeholder请输入用户名/div/divdivdiv classinnerDiv密码input tytepassword placeholder请输入密码/div/divdivdiv stylemargin-left:480px; classinnerDivinput tytebutton value登 录input tytebutton value清 空!-- 此时你会发现已经有了但问题还是没有居中且挤一块了所以我们又要像前面一样进行样式设计了 --!-- 我们可以引用前面设置的全局样式方法来进行居中操作 --!-- 但会发现还没有解决挤一块的问题因此我们又进行了进一步的样式设计 --!-- 但你会发现stylemargin-left:480px;和全局样式方法中的属性重复了都有margin-left。记住此时匹配的是新定义的margin-left全局样式方法中的margin-left将在这里失效 --/div/div/body /html