用户输入作为script标签内容 用户输入作为HTML注释内容 用户输入作为HTML标签的属性名 用户输入作为HTML标签的属性值 用户输入作为HTML标签的名字 直接插入到CSS里 最重要的是，千万不要引入任何不可信的第三方...提供的恶意链接 嵌入到恶意链接中的恶意脚本在Alice的浏览器中执行。...> 这里有一个用户提交的页面，用户可以在此提交数据，数据提交之后给后台处理 所以，我们可以在输入框中提交数据：alert('hack') ，看看会有什么反应 页面直接弹出了...> 这里有一个用户提交的页面，数据提交给后端之后，后端存储在数据库中。然后当其他用户访问另一个页面的时候，后端调出该数据，显示给另一个用户，XSS代码就被执行了。...提交了之后，我们看看数据库 可以看到，我们的XSS语句已经插入到数据库中了 然后当其他用户访问 show2.php 页面时，我们插入的XSS代码就执行了。
html标签是整个html文件的根标签同时也是最顶层的标签。head标签中写页面的属性。body标签写的是页面显示的内容。title标签写的是页面的标题。关于标签标签名需要放到中。...支持跨设备的响应式体验，配合CSS和JavaScript，通过操作DOM树调整页面结构，适配不同设备或屏幕尺寸。...--我喜欢你-->开始注释按住ctrl+/注意，即使你注释了，在浏览器的开发者模式也是可以看见的哦。所以可不能在注释里骂人。3.2 标题标签 h1~h6html的标题一个有6个，也就是6个等级。...属性的顺序无所谓，但不能写在标签上面3.7 超链接标签 a必须具备的属性有href,表示点击后跳转的网页。...外部链接：href引用其他网站的地址。内部链接：网站内部页面之间的链接，写相对路径即可。空链接：使用#在href中占位。
，CSS user agents包含了浏览器默认的CSS样式表，它们规定了浏览器在渲染HTML页面时所使用的样式，CSS规范规定了在某些情况下user agents必须忽略非法样式表的一部分，这也意味着...代表商品名称，这样的URL更加简洁明了，同时也更加易于搜索引擎的识别和收录 下面进行一个简单配置示例： Step 1：首先检查Apache是否已经安装了rewrite模块 之后加载rewrite模块：...> 3.html alert("RPO attack"); 从上面可以看到在index.php中引入了当前页面中的3.js，3.html中写入了一个没有标签的JS语句，之后我们可以通过访问下面的...import语句是无效的语法，当然RPO也并不限于IE，我们可以在其他浏览器上使用该技术，但Chrome、Firefox、Opera或Safari上的CSS不支持JavaScript，另一个限制是文档类型不能包含在目标文档中...，因为这会导致CSS的解析器停止在非IE浏览器上解析HTML文件 head> <link href="../..
Doctype html> 双标签 head>head> Html标签关系分类 包含(嵌套关系) head>在自身页面打开(关闭自身页面，打开链接页面) Target=”blank” 打开新页面 (自身页面不关闭，打开一个新的链接页面) 锚链接 先定义一个锚点：超链接跳转到页面的任何位置。.../xxx.rar"> 超链接优化写法 // 让所有的超链接都在新窗口打开 PS：写的位置在 head 里面。...样式表还是图标type="text/css" type="text/css"：规定链接文件的MIME类型，就是说链接文件时css还是jshref="1.css"：链接的文件路径 设置 icon 图标...-- 日期控件 --> ---- 标签语义化 好的语义化的网站标准就是去掉样式表文件(css文件)之后，结构依然很清晰
HTML 或超文本标记语言 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而，值得注意的是，HTML 不被视为一种编程语言，因为它不能创建动态功能。...开发人员使用HTML 代码来设计浏览器如何显示网页元素，例如文本、超链接和媒体文件。 互联网导航。由于 HTML 被大量用于嵌入超链接，因此用户可以轻松地在相关页面和网站之间导航和插入链接。...它总是在文档中开始一个新行。例如，标题元素将位于与段落元素不同的行中。 每个 HTML 页面都使用这三个标签： 标签是定义整个 HTML 文档的根元素。...head> 标签保存页面标题和字符集等元信息。 标签包含了页面上出现的所有内容。 head> PHP 等后端语言。 单独的 HTML 页面 用户必须为 HTML 创建单独的网页，即使元素相同。
Doctype html> 双标签 head>head> Html标签关系分类 包含（嵌套关系） head>..." （默认值） 在自身页面打开（关闭自身页面，打开链接页面） Target=”blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面） 锚链接 先定义一个锚点：超链接跳转到页面的任何位置。.../xxx.rar"> 超链接优化写法 // 让所有的超链接都在新窗口打开 PS：写的位置在 head 里面。 ---- 特殊字符 ?...样式表还是图标 type="text/css" type="text/css"：规定链接文件的MIME类型，就是说链接文件时css还是js href="1.css"：链接的文件路径 设置 icon...文件)之后，结构依然很清晰。
编写 HTML 代码 在 hello.php 中，将文档标题修改为 Hello，然后在 和 之间新增一个 h1 标签，内容设置为 你好，PHP！...，这里需要注意的是在 HTML 文档中嵌入 PHP 代码需要将 PHP 代码放到 php 和 ?> 之间，并且末尾的 ?> 不能省略，在包含纯 PHP 代码的文件中，最后的 ?...应用 CSS 样式表 为了让 HTML 页面渲染效果更好看一些，我们还可以为包裹 PHP 代码的 HTML 标签应用 CSS 样式。...查看页面渲染结果（应用CSS） 表明应用 CSS 样式表成功。...应用 JavaScript 动态代码 既然是作用在 HTML 标签上，支持 CSS，当然也支持 JavaScript，我们在 hello.php 中，为 h1 标签新增一个 id 属性，然后在 </body
2、前端开发其他技术 前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。...→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）； 6、学习HTML就是学习各种标签，...(2)head标签 head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。...> 链接外部CSS文件或脚本文件 定义脚本语言 定义页面所有链接的基础定位（用得很少） head>的内部标签也非常重要，在前期大家只需要感性认知就可以...(3)body标签 body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。 后续课程讲解的标签都是在标签内部的各种标签。
> 但是 WordPress 不能确定是否在在页面加载了 JS，Css 文件，如果另一个插件使用相同的 JS，Css 文件，就无法检查 JS，Css 文件是否已经被包含在页面中。...用来在WP登录页面加载脚本和CSS 以下是这些钩子的示例： 页面的 标签前面（当然是末尾了）。...比如我单独创建了一个链接页面，在这个页面中我使用了 jQuery 方法来获取链接网站的 favicon。...如果我们在页面的中间使用 php wp_print_scripts('jquery'); ?
2、“”后接着是“head>”页头，其在head>head>中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域，而里面“”后接着是“head>”页头，其在head>head>中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域，而里面“标签 link link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标（favicon.ico）， 标签最常见的用途是链接外部样式表，外部资源。...image/x-icon 标签 script script标签通常放置在一个网页的头部标签head标签内的用于链接外部JS文件外部资源标签， 标签最常见的用途是链接外部js，外部资源。...在html中使用最多的布局标签为div，加上对网页设置css样式，所以通常我们就说div+css制作即使有div标签+css样式实现网页布局重构。
一个静态页面绝大部分由以下4种元素组成： 文字 图片 超链接 音频、视频 所以，想要开发一个页面，就得认真学习用来展示这些内容的标签。...此外，即使在页面中使用了 JavaScript ，它也不是动态页面，除非用到了后端技术。...（2）实际开发 学习CSS之后，对于删除线效果，一般用CSS来实现，几乎不会用 s 标签来实现。 6.下划线标签 可使用 u 标签来实现文本的下划线效果。 （1）示例 CSS之后，对于下划线效果，一般用CSS来实现，几乎不会用 u 标签来实现。...当然，div 标签最重要的用途是划分区域，然后结合 CSS 针对该区域进行样式控制，这一点之后的 CSS 就会知道。
锚链接： 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。...上图中解释： 第一个a标签，顶部这个锚的名字叫做top。 然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。...上面李四表示，点击之后，跳转到ceshi.html页面的top锚点中去。 说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。...img是自封闭标签，也称为单标签。 能插入的图片类型： 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。...问题：我的网页在C盘，图片却在D盘，能不能插入呢？ 答案： 用相对路径不能，用绝对路径也不能。 总结一下： 我们现在无论是在a标签、img标签，如果要用路径。
> 链接外部CSS文件或脚本文件 定义脚本语言 定义页面所有链接的基础定位（用得很少） head>的内部标签也非常重要，在前期大家只需要感性认知就可以。...一般标签可以在开始符号和结束符号之间插入其他标签或文字。 自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。...在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。...虽然W3C 没有明确规定一个页面不能有多个hl标签，但是我们还是推荐“一个页面一个hl标签”的 做法。如果一个页面出现多个hl,对搜索引擎可能不好，也可能会被判以作弊。...语义不好的页面和语义好的页面 从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非 常高的。
定义脚本语言 定义页面所有链接的基础定位（用得很少） head>的内部标签也非常重要，在前期大家只需要感性认知就可以。...一般标签可以在开始符号和结束符号之间插入其他标签或文字。 自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。...在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。...虽然W3C 没有明确规定一个页面不能有多个hl标签，但是我们还是推荐“一个页面一个hl标签”的 做法。如果一个页面出现多个hl,对搜索引擎可能不好，也可能会被判以作弊。...语义不好的页面和语义好的页面 从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非 常高的。
Prism 介绍 Prism 是一个轻量级并且简单易用的 JavaScript 类库，minified 和 gzipped 压缩后只有 1.5kb 大小，即使添加语言定义代码，最大也不会超过 2kb，...除此之外，它也提供了额外的插件功能，让你可以新增其它功能，比如自动转换链接等，你也可以自己撰写插件。 目前 Prism 唯一的缺点就是不支持 IE8，看作者的博客介绍，也不想支持 IE8。...首先在页面的 head 中引入 Prism 的 CSS 样式文件 css" rel="stylesheet" /> 2....然后在 标签之前引入 Prism 类库： 3....添加要高亮显示的代码，要放在 pre 标签中，设置 code 标签的样式类型为代码的类别，如下： css">p { color: red }</code
> 包括资讯信息：即整个页面的属性、指导浏览器解析的标签、引入外部文件的标签(CSS和js)。 ...(3) 大部分标签有属性 格式：属性="属性值"（多个属性之间用空格隔开） (4) 空标签：功能比较单一 。...即使 在所有浏览器中都是有效的，但使用 其实是更长远的保障。.../x-icon" href="img/logo.ico" /> script：JavaScript脚本程序； style：css代码； base：对超链接的全局设置...sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
Thymeleaf的优点是它是基于HTML的，即使视图没有渲染成功，也是一个标准的HTML页面。因此它的可读性很不错，也可以作为设计原型来使用。...如果是开发过程中，可以关闭Thymeleaf页面缓存，这样可以让对页面的改动及时反映到视图中。...如果需要向页面传值的话，可以在控制器方法参数中添加Model对象，然后向其添加需要传递的对象。之后可以使用${var_name}在Thymeleaf中访问了。 不进行任何操作 生成链接 Thymeleaf也可以生成URL，类似JSTL中的标签。这需要使用另外一种类型的表达式@{...}，表示其中的是URL。...利用这些注释，我们可以让某些代码在原型设计的时候出现，某些代码在Thymeleaf引擎处理之后出现，等等。
CSS 非常灵活，既可以嵌入在 HTML 文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css 为后缀名。...， 标签一般位于 title 标签之后，也可以把它放在 HTML 文档的任何地方。...3.3 外链式 外链式也叫链入式，是将所有的样式放在一个多个以 .css 为扩展名的外部样式表文件中，通过 标签将外部样式表文件链接到 HTML 文档中，其基本语法格式如下： head...: 50px; color: blue; } 运行结果： 外链式最大的好处是同一个 CSS 样式表可以被不同的 HTML 页面链接使用，同时一个 HTML 页面也可以通过多个 ...属性:属性值; } 案例： 代码： 运行结果： 标签选择器最大的优点是能快速为页面中的同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} head> 语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方...type=”text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。 ---- 行内式（内联样式） 内联样式，又有人称行内样式、行间样式、内嵌样式。...该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下： href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。...rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。...---- CSS基础选择器 ---- 标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
