第二天的学习

最新推荐文章于 2024-07-12 20:49:16 发布

Serendipity~~~~

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量44

点赞数

文章标签： html xhtml 搜索引擎 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_74228275/article/details/128635087

版权

简单的web页面

<!DOCTYPE>
<html>
    <head>
        <title>推荐的电影</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            p{background-color:pink;}
            body{color:black;}
        </style>
    </head>
    <body>
        <p style="color:red;margin-left:20px;font-size:40;text-align:center">推荐的电影</p>

        <ul>
            <li style="font-size:30">深海</li>
            <img src="深海.webp" width="304" height="400" align="middle"/>
            <p>该片讲述了一名少女在神秘海底世界追寻探索，邂逅一段独特生命旅程的故事。</p>
            <b>剧情简介</b>
            <p>一个叫“参宿”的小孩，因父母离婚，母亲离家，母爱缺失，变得内向、孤独、抑郁。最终，跳海被一个小丑救起，陷入昏迷，进入梦境深海。</p>
            <p>参宿进入“深海大饭店”，那些海底形形色色的水生物，化成食客的样子——憨态可掬的海象，萌萌哒的海獭，参宿也从这陌生的动物身上感受到了温暖与关爱。
南河船长，其实，就是真实世界中海中救她的小丑。在梦境世界里，化身为眼里似乎只有金钱的人。但是，这都是表面。他的内心也有孤独、疲惫、思念，也渴望温暖。那回不去的故乡，想念的人。为了生活，不得不戴上面具，变得那么市侩。或许，参宿的到来，让他伪装的心一点点变真实。
            <br>
参宿在家庭生活中被家人忽视，可即使没人在乎她，她还会假装快乐，没有将这种负面情绪表现出来。可以说，她和南河实际上是同一类型的人。掩藏起自己最真实的情绪。因此，他们的强颜欢笑都不是真实的，真心的。
在南河带领所有人驾驶深海号一起帮助参宿去深海之眼找妈妈的过程中。参宿知道了事情的来龙去脉。原来，南河是为救她而死。在梦境深海里，她努力从束缚中拼命挣扎出来，她要去救南河，哪怕，皮肤被勒出血痕。到这个时候，那个自卑，懦弱的参宿变成勇敢无惧的勇者。</p>
            <p>南河永远地走了。临分别之时，参宿抱住南河哭着说对不起，这是愧疚与自责。可南河却安慰她，并且，给她最真诚的祝福语，“希望你每次笑都是真心的”。也在那刻起，参宿完成自我救赎，走出深海。从此，懂得珍惜生命，懂得爱，真实地笑对人生。</p>

        </ul>
        
        <iframe loading="lazy" src="1.webp" width="320" height="200"></iframe>
        <iframe src="1.webp" name="iframe_a" width="320" height="130"></iframe>
        <iframe src="3.gif" name="iframe_a" width="320" height="130"></iframe>
        <p><a href="2.gif" target="iframe_a" >点此</a></p>
        <a href="https://www.iqiyi.com/v_wl0rmseafk.html?fc=ae00917a21d39b18&fv=p_02_01&vfm=2008_aldbd">点此观看深海</a>
        <br>
        <p></p>
        <button onclick="myFunction()">Do you know the time ?</button>

        <script>
        function myFunction() {
            document.write(Date());
        }
        </script>
    </body>
</html>

ctfshow 萌新web9

ctfshow 萌新web10

c=system("cat config.php")

也可采用一些绕过方式：c=$a='sy';$b='stem';$d=$a.$b;$d('cat config.php');

HTML

基础知识

HTML由一系列的元素组成，元素可由标签进行包装。（开始标签加内容加结束标签为一个元素）

1.一级标题显示：

<h1>标题</h1>.

2.网页标准格式：

根标签：<html>...</html> ,网页所有内容都应写在根标签里，子标签：<head>...</head>,<body>...</body>。<head>的子标签：<title>...</title>,head标签内容不会在网页中直接显示，title里的内容会显示在标题栏，搜索引擎在检索页面时会首先检索title中的内容。

3.html注释：

,注释不会在网页中显示。

4.标签的属性：

可以在开始标签中设置属性，对属性中的文字进行处理（例如字体，大小：<font color="red" size="7"> hello</font>）一个标签可以有多个属性，属性之间需要用空格隔开（属性名=“属性值”）

5.文档声明：

html有多个版本，我们需要在网页的最上边添加一个doctype声明来告诉浏览器网页的版本，若不写声明会导致有些浏览器页面无法正常运行。

（1）html4 过渡版：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

严格版：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

框架集：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

（2）xhtml 1.0

过渡版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

（3）html 5

<!DOCTYPE html>

6.乱码问题

计算机在读取内容是会将其转换为二级制编码，编码就是将字符转换为二进制的过程，解码与其相反，编码和解码所采取的原则，我们称为字符集，常见的字符集：ASCII，ISO-8859-1，GBK，GB2312，UTF-8（全球通用），而乱码问题就是编码和解码所采用的的字符集不同。在中文系统的浏览器中默认使用GB2312进行解码，使用meta标签。

meta为自结束标签，编写自结束标签时，需要添加/,<meta charset="utf-8"/>（用在head标签里）head标签里的内容不会显示在页面中，一般用来放css样式表等。

常用标签

标题标签：

h1~h6（从大到小，不关心显示效果，只关心语义），h1表示网页中最重要的内容，搜索引擎检索完title，会立即检索h1，只能写一个h1，一般网页只使用h1 h2 h3.

段落标签：

<p></p>表示内容中的一个自然段，p标签中的内容表示一个段落，p标签的内容会独占一行，且段与段之间会有一个间距

图片

该行代码 <img src="" alt="My test image"/> 用于向页面中插入图片。我们需要告知 HTML 图片的位置。

若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：my-image.jpg。

要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。

若引用的目标文件位于 HTML 文件的上级，需要加上两个点。举个例子，如果 index.html 在 test-site 的一个子文件夹内，而 my-image.jpg 在 test-site 内，你可以使用../my-image.jpg 从 index.html 引用 my-image.jpg。

以上方法可以随意组合，比如：../subdirectory/another-subdirectory/my-image.jpg。

alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到。

列表

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

无序列表中项目的顺序并不重要。用一个 <ul> 元素包围。

有序列表中项目的顺序很重要，用一个 <ol> 元素包围。

列表的每个项目用一个列表项目元素 <li> 包围。

比如，要将下面的段落片段改成一个列表：

<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together… </p>

可以这样更改标记：

<p>At Mozilla, we're a global community of</p>
<ul>
    <li>technologists</li>
    <li>thinkers</li>
    <li>builders</li>
</ul>
<p>working together… </p>

链接

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 <a>(anchor)要将一些文本添加到链接中，只需如下几步：

选择一些文本。比如“Mozilla Manifesto”。

将文本包含在 <a>元素内，就像这样：

<a>Mozilla Manifesto</a>

为此 <a> 元素添加一个 href 属性，就像这样：

<a href="">Mozilla Manifesto</a>

把属性的值设置为所需网址：

<a href="...">Mozilla Manifesto</a>

如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。

href :hypertext reference）。

target属性可以定义网页在何处显示，例如若属性值为_blank,则在新窗口显示。

id属性可以定义一个html书签

换行：

<br/>

设置水平线：

<hr/>

HTML文本格式化

头部标签：

可以使用在head中的标签有<title>,<base>,<style>,<meta>,<link>,<script>,<noscript>。详细见。

HTML CSS

html中使用css有三种：1. 在html中使用style属性，2. 在head中使用<style>标签，3. 使用css外部样式表。

<p style="color:yellow;margin-left:20px;">一个段落</p>

还可定义背景颜色：background-color,字体大小：font-size, 字体：font-family, 文字对齐方式：text-allign.

<style type="text/css">
p{background-color:red;}
body{color:blue;}
</style>

<link rel="stylesheet" type="text/css" href="mystyle.css"/>

表格

<table>标签，每行用<tr>标签，每行的每个单元格用<td>标签。表头用<th>标签。

colspan 属性来横跨几列

HTML<span>和<div>

<span>为内联元素（不会换行）；<div>为块级元素（换行），可进行文档布局（表格）。这两个均可以对内容进行属性设置。

HTML表单

<form>
...
</form>

用form标签来实现，输入表单常常使用input元素

输入类型用type属性定义，输入文本属性值为text，输入密码属性值为password例如：

<form>
name: <input type="text" name="name">
password: <input type="password" name="pwd">
</form>

单选框和多选：type属性值为radio/checkbox

<form>
<input type="radio" name="animal" value="cat"/>cat<br/>
<input type="radio" name="animal" value="dog"/>dog<br/>
<form>

效果如图：

<form>
<input type="checkbox" name="animal" value="cat"/>cat<br/>
<input type="checkbox" name="animal" value="dog"/>dog<br/>
<form>

提交按钮

<form name="input" action="action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML框架

使用<iframe src="URL"></iframe>元素来实现。

<iframe src="URL" loading="lazy" width="20" height="20"></iframe>

loading="lazy"

若想要移除边框，使用frameborder="0"。

HTML脚本

script标签用于定义脚本，在浏览器禁用脚本时，会显示noscript中的内容

<button type="button" onclick="func()">点击</button>

用鼠标点击一下“点击”，会执行fun（）。

JAVASCRIPT

document.write("<h1>这是一个标题</h1>");

<button type="button" οnclick="alert('hello')">点击</button>；

x=document.getElementById("id"); //查找元素

x.innerHTML=" "; //改变内容

element.src.match("");

isNaN() 函数用于检查其参数是否是非数字值。如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。

window.alert()

console.log(c) 控制台输出

var定义一个变量，语句用分号分隔。大小写敏感

typeof 操作符返回变量或表达式的类型

创建数组：var cars=new Array("Sa","vo","aW");

constructor 属性返回所有 JavaScript 变量的构造函数。

tostring()将数字转换为字符串。 indexof()查找

Date(）将日期转化为字符串。

正则表达式

/正则表达式主体/修饰符(可选)，在JS中正则表达式通常用于search（），replace（）。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

test()

exec（）

例：/c/.exec("welcome");输出c

try（）和catch（），finally（），Throw（）例如