HTML//CSS//JAVASCRIPT

最新推荐文章于 2024-07-25 11:26:35 发布

王也L

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量856

点赞数 20

文章标签： html css javascript

本文链接：https://blog.csdn.net/2301_79697719/article/details/135759067

版权

1.HTML

元素、标签双标签由两个<></>组成 h1：标题一 p：段落

单标签如

<br>：用于插入换行符。
<img>：用于插入图像。
<input>：用于创建输入框。
<hr>：用于插入水平线。

注释：

<pre> 该标签内的空格与换行都保留  </pre>
<b> 加粗文本 </b>
<i> 斜体文本 </i>
<a href="http://www.biadu.com/">点击</a>   点击之后是百度界面   a标签是超链接

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>    图像链接  点击图像跳转

title 表示文档标题，也是用户搜索的关键字

base元素标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

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

link>标签定义了文档与外部资源之间的关系,通常用于链接到样式表:

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

内部样式表：内部样式表是定义在HTML文档内部的样式表，使用<style>标签将样式定义在<head>标签内部。内部样式表只对当前的HTML文档有效，无法被其他HTML文档所应用。
```
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
</body>
</html>
```

外部样式表：外部样式表是定义在一个独立的样式表文件中，通常以.css为文件扩展名，并通过<link>标签将其链接到HTML文档中。外部样式表可以被多个HTML文档所共享和引用，使得样式可以在整个网站中保持一致。

 style.css文件
h1 {
  color: blue;
}

html文件
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>This is a heading</h1>
</body>
</html>

meta标签

1.定义字符编码：确保浏览器正确地解释文档中的字符

如<meta charset="UTF-8">来指定文档使用UTF-8编码

2.搜索引擎优化（SEO）：使用<meta>标签来提供关于网页内容的描述、关键字等信息

3.定义作者、描述、关键字等信息：有助于浏览器和搜索引擎了解文档内容。

2.CSS

由两个主要的部分构成：选择器，以及一条或多条声明:

如：

p {color:red;text-align:center;}

背景的属性简写 颜色十六进制 地址 平铺  图片放置位置
body {background:#ffffff url('img_tree.png') no-repeat right top;}

颜色有三种表示方式

十六进制-如:＃FF0000
一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: red

text-align:文本水平对齐方式

h1 {text-align:center;}  中心对齐  justify 两端对齐

链接样式四种

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

记忆：

L(link)OV(visited)E  and  H(hover)A(active)TE

盒子模型：

Margin：外边距

Border：边框

Padding：内边距

Content ：内容

分组选择器

h1 {
    color:green;
}
h2 {
    color:green;
}
p {
    color:green;
}

嵌套选择器

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

有时候文本会超出元素框使用overflow: auto;//默认内容修剪后显示滚动条

导航栏其实就是一个无序列表：li 无序列表：ol

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

提示框淡入效果

1.设置提示文本的opacity属性值为0：表示提示文本常态下是不可见的

2.设置提示文本的transition属性为opacity 1s：可以理解为transition属性指向的是opacity属性的值的改变这一动作，且在1s的时间内完成该动作，即：所有触发该元素的opacity属性的值的改变的动作都将在1s内完成

3.设置触发动作hover：hover时opacity值为1，即触发淡入效果。

JavaScript

JavaScript：对事件的反应

<button type="button" οnclick="alert('欢迎!')">点我!</button>

JavaScript：改变 HTML 内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：验证输入：正则判断

if isNaN(x) {
    alert("不是数字");
}

标签

<script>
alert("我的第一个 JavaScript");
</script

使用函数，在head中放置函数，在body中放置并调用函数

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" οnclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部调用js ，如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

myScript.js 文件
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

JavaScript 显示数据
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。

操作 HTML 元素

从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容。

百度搜索静态界面

<!DOCTYPE html>
<html>
<head>
  <title>搜索</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      text-align: center;
      padding-top: 50px;
    }
    #hezi {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    #sousuo {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    #baidu {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #3385ff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="hezi">
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" width="270" height="129">
    <p>请输入搜索内容：</p>
    <input type="text" id="sousuo" placeholder="搜索内容">
    <button id="biadu">百度一下</button>
  </div>
</body>
</html>

王也L

关注

20
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
HTML//CSS//JAVASCRIPT

：用于插入换行符。<img>：用于插入图像。<input>：用于创建输入框。<hr>：用于插入水平线。注释： <pre> 该标签内的空格与换行都保留 </pre><b> 加粗文本斜体文本点击
复制链接

扫一扫