Web学习笔记

最新推荐文章于 2023-05-15 15:41:51 发布

binflcy

最新推荐文章于 2023-05-15 15:41:51 发布

阅读量962

点赞数 2

分类专栏：笔记文章标签： web java html css javascript

本文链接：https://blog.csdn.net/binflcy/article/details/116104188

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

每次学了不用就忘记了，想着学一点记录一点，新的技能树开始加点！
自学素材：https://www.bilibili.com/video/BV1Y7411K7zz
ps:虽然老师的idea有点老，但是超详细！！也很好理解

<!--标签名大小写不敏感，拥有自己的属性(基本，事件)-->
<!DOCTYPE html>									<!--约束，声明-->
<html lang="en">								<!--标签开始，中文“zh_CN”-->
<head>											<!--头部标签-->
    <meta charset="UTF-8">						<!--表示使用字符集-->
    <title>binflcy的第一个网页					</title><!--标题-->
</head>
<body >											<!--整个页面显示的主体内容-->
												<!--bgcolor背景颜色，-->
												<!--(click)="alert('警告！警告')，单击时触发警告框事件-->
 	 Hello
  	 <hr/> 									    <!--分割线-->
<button
  onclick="alent('警告！警告')">				    <!--button按钮-->
</button>
  World<br/>									<!--<br/>换行-->
</body>
</html>											<!--/结束-->
												<!--单标签结束<br/>-->
												<!--双标签结束<p></p>-->

标签语法

<!--1.标签不能够交叉嵌套（但是有时候能正常运行，是因为浏览器帮你解析了，浏览器os：我为这个秃头怪操碎了心）-->
<!--正确：<标签1><标签2> 内容 </标签2></标签1>-->
<!--错误：<标签1><标签2> 内容 </标签1></标签2>-->

<!--2.标签必须正确关闭,记得结束‘/’（但是有时候能正常运行，是因为浏览器帮你解析了，浏览器os：我为这个秃头怪操碎了心)-->
<!--正确：<标签1><标签2> 内容 </标签2></标签1>-->
<!--错误：<标签1><标签2> 内容 <标签1><标签2>-->
<!--错误：<单标签>-->

<!--3.属性必须有值，记得加“ ”-（但是有时候能正常运行，是因为浏览器帮你解析了，浏览器os：我为这个秃头怪操碎了心)-->
<!--正确：<font color="blue"> </font>-->
<!--错误：<font color=> </font>-->
<!--错误：<font color=blue> </font>-->

<!--4.注释不能嵌套-->
<!--错误：<!--4.注释不能嵌套-->-->
<!--因为找到了两个完整匹配的剩下的（-->）有影响-->

<!--5.标签转化成字符-->
<!--例子：<br/>转化成字符显示在页面上-->
<!--方法：将特殊字符使用字符实体<br/>--&lt;br&gt;（字符实体表见附录）-->
<!--例子：空格很特殊，连续的空格只会保留一个，要很多很多空格就要打很多很多&nbsp;-->

附录：字符实体表（注意区分大小写,不要忘记";"）
在这里插入图片描述

常用标签

font 标签
标题标签
超链接标签
列表标签
img标签
表格标签
iframe标签
表单标签
div标签
span标签
p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font 标签</title>
</head>
<body>
<!--1.font标签-->
<font color="aqua" face="黑体" size="7">这是一个字体标签</font>
<!--color 颜色，face 字体，size 大小（这里最大是7）-->

<!--2.标题标签-->
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3>
<!--和word相似，标题1-标题6依次变小（最小到标题6）-->
<h4 align="left">标题4</h4>
<!--align 对齐属性，“left” 左对齐（默认值），“center” 居中，“right” 右对齐-->

<!--3.超链接标签-->
<a href="https://music.163.com/#/song?id=528272281">一首好听的歌</a>
<!--<a href="跳转地址">超链接显示的文字</a>-->
<a href="https://music.163.com/#/song?id=528272281" target="_blank">一首好听的歌跳转新页面</a>
<!--target 跳转属性，“_self” 跳转至当前页面(默认值) ，"_blank" 跳转打开新页面-->

<!--4.列表标签-->
<ul> <li>这是一个无序列表</li></ul>
<!--<ul>无序列表(最左边是小圆点)</ul>-->
<ul type="none"> <li>这是一个无符号列表</li></ul>
<ol> <li>这是一个有序列表</li></ol>
<!--<ol>有序列表(最左边是序号)</ol>-->
<ol type="A"> <li>这是一个序号为大写字母列表</li></ol>
<!--tapy 属性（修改最左边的符号),IE有可能会不兼容-->

<!--5.img标签-->
<!--img 标签用来显示图片，scr属性 设置图片的路径（web中分相对路径和绝对路径) width 图片宽 height 图片高-->
<!--border 边框,alt 当图片找不到异常显示-->
<img src="../imge/1.jpg" width="200" height="200" border="1" alt="大户爱，超可爱"/>
<!--相对路径： .当前文件目录 ..文件所在上级目录-->
<!--绝对路径：http://ip:port/工程名/资源路径-->

<!--6.表格标签-->
<table border="1" width="300" hight="300" cellspacing="5">
  <tr> <td align="center"><b> 1号单元格</b></td>  <td>2号单元格</td> </tr>
  <tr> <th> 3号单元格</th>  <td>4号单元格</td> </tr>
</table>
<!--cellspacing 单元格间距(像素),<tr> 行 ,<td> 单元格,<b> 加粗,<th> 加粗居中-->
<!--跨行跨列表格-->
<br/>
<table border="1" width="300" hight="300" cellspacing="5">
  <tr>
    <th colspan="2"> 1号单元格</th><!--colspan 属性跨列-->
    <th> 2号单元格</th>
  </tr>
  <tr>
    <th rowspan="2"> 3号单元格</th><!--rowspan 属性跨行-->
    <th> 4号单元格</th>
  </tr>
  <tr>
    <th> 5号单元格</th>
    <th> 6号单元格</th>
  </tr>
</table>

<!--7.iframe标签-->
<iframe src="Hello.html"></iframe>
<!--iframe标签 可以在当前页面上开辟一个小区域，显示一个单独页面-->
<br/>
<iframe src="Hello.html" name="abc"></iframe>
<a href="423.html" target="abc">iframe标签</a>
<!--超链接和iframe标签组合，实现在小框页面完成网页跳转 ，name属性 为iframe命名-->

<!--8.表单标签-->
<!--表单，收集信息集合发给服务器（类似调差表）-->
<form action="http://localhost:8080" method="get">
  <input type="hidden" name="action" value="login"/>
  <!--action 提交服务器的地址,method 提交的方式get/post-->
  <!--get:不安全（提交后地址栏中有提交信息），有数据长度的限制（不能包含ASCII/不能超过100字符）-->
  <!--post:相对安全（提交后地址栏中没有提交信息），理论上没有数据长度的限制-->
  这是文本的输入框：<input type="text" value="默认值" name="text"/><br/>
  type="password"是输入密码：<input type="password" maxlength="6" name="password"/><br/>
  <!--maxlength 输入的最大长度-->
  这是单选框：<input type="radio" name="web" checked="checked" value="学会了"/>学会了<input type="radio" name="web"/>学废了<br/>
  <!--这里两个选项设置的name相同，所以他们是一组的只能选择其中的一个选项,checked="checked"表示默认勾选-->
  这是复选框：<input type="checkbox"/>简单<input type="checkbox" name="box"/>easy<input type="checkbox"/>看就会<br/>
  这是下拉链表框：<select name="select">
              <option>--选项1--</option>
              <option>--选项2--</option>
              <option selected="selected">selected="selected"表示默认选项--</option>
              </select><br/>
  这是多行文本：<textarea rows="10" cols="20" name="textarea">这里输入默认值</textarea><br/>
  重置（恢复默认值):<input type="reset" /><br/>
  提交按钮：<input type="submit" value="提交" /><br/>
  <!--关于提交：1.提交的对象要设置name属性
              2.单选、复选、下拉链表框 要设value属性 这样计算机收到的信息更加明确
              3.表单项要在<form标签内>-->
  文件上传：<input type="file" name="file"/><br/>
  隐藏(内模式)：<input type="hidden"/><br/>
</form>

<!--9.div 标签-->
<div>div标签默认独占一行</div>

<!--10.span 标签-->
<span>span标签的长度就是分装数据的长度</span>
<span>看，在一行</span>

<!--11.p 标签-->
<p>默认会在段落的上方或下方空出一行</p>
</body>
</html>

CSS

css：用于增强控制网页样式信息与网页内容分离的一种标记语言

语法规则

选择器（属性：值）
选择器：决定接受css样式影响的HTML元素（标签）
属性：改变的样式名字
多个声明，用分号隔开
p{ color:red;font-size:30px; }
``

CSS和HTML结合

方法1：

在标签的style属性上设置“key:value value”

<!--需求：分别定义div标签，使个div标签的样式为：边框1像素，实线，红色-->
<div style="border:1px solid #ff0000">div标签</div>

这种办法存在以下缺点：
1、标签一多代码量很大，因为你要给每个标签设置样式
2、可读性差
3、css代码没有复用性

方法2：

在head标签，用style标签来定义各种自己需要的CSS样式
格式：xxx{key:value value;}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--需求：分别定义两个div/span标签，使个div标签的样式为：边框1像素，实线，红色-->
  <style type="text/css">/*注意在css中是注释方法改变！！！*/
  div{
    border:1px solid #ff0000;
  }
  </style>
</head>
<body>
<div>div标签</div>
</body>
</html>

这种办法存在以下缺点：
1、不能给多个页面进行复用

方法3：

把css样式写成一个单独的css文件，再通过link标签引用
格式：< link rel=“stylesheet” type=“text/css” href="./styles.css" >

1.新建一个css file
在这里插入图片描述
2.在css file 中编写样式

div{
  border:1px solid #ff0000;
}

3.在需要样式的HTML中用link标签引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--link标签引入css样式代码-->
  <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div>div标签</div>
</body>
</html>

css选择器

标签名选择器：可以决定哪些标签使用这个样式
格式：标签名{属性：值；}
代码参考CSS和HTML结合中的方法2

id选择器

id选择器：通过id属性选择性地使用样式
格式：#id 属性值{属性：值；}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #id001{
      color: blue;
    }
    #id002{
      color: red;
    }
  </style>
</head>
<body>
<!--需求：定义div1的 ID 为id001 使用css样式修改字体颜色为蓝色-->
<!--需求：定义div2的 ID 为id002 使用css样式修改字体颜色为红色-->
<div id="id001">div1标签</div>
<div id="id002">div2标签</div>
</body>
</html>

class选择器

class选择器：通过class属性选择性地使用样式
格式：.class 属性值{属性：值；}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
   .class01{
      color: blue;
    }
   .class02{
      color: red;
    }
  </style>
</head>
<body>
<!--需求：修改 class 属性值为class01 的div标签 字体颜色为蓝色-->
<!--需求：修改 class 属性值为class02 的div标签 字体颜色为红色-->
<div class="class01">div1标签</div>
<div class="class02">div2标签</div>
</body>
</html>

组合选择器

组合选择器：可以让多个选择器共用一个css代码样式
格式：选择器1，选择器2，……{属性：值；}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
   .class01,#id001{
      color: blue;
    }
  </style>
</head>
<body>
<!--需求：修改 class 属性值为class01 的div标签和 id 属性为id001 的div标签 字体颜色为蓝色-->
<div class="class01">div1标签</div>
<div id="id001">div2标签</div>
</body>
</html>

css常用样式

  border:1px solid #ff0000;/*设置边框（粗细，颜色，线形）*/
  border-collapse:collapse;/*将边框合并*/
  width:300px;/*设置宽度*/
  height: 300px;/*设置高度*/
  background-color: #888888;/*设置背景颜色*/
  color: red;/*设置字体颜色*/
  font-size:30px;/*设置字体大小*/
  text-align:center;/*设置文字位置*/
  text-decoration:non;/*超链接去下划线*/
  margin-left:auto;/*设置左边距*/
  margin-right:auto;/*设置右边距*/
  list-style: none;/*设置列表修饰*/

一些常用属性值

1.border—style
在这里插入图片描述

JavaScript

JavaScript简介

完成页面的数据验证，需要浏览器解析代码，js是弱类型
特点：1、交互性 2、安全性 3、跨平台性
ps:和jave没有什么关系啦！

JavaScript和html代码结合的方式

第一种方式

只需要在head标签中，或者在body标签中，使用 script标签来书写JavaScript代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello javascript");
    </script>
</head>

第二种方式

使用script标签引入单独的JavaScript代码文件（有点像css的引入）

首先要创建一个JavaScript代码文件（文件名为1）
在这里插入图片描述
在新建文件中写入JavaScript函数

alert("这个是与HTML结合的第二种方式")

在HTML文件中引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="1.js">
    </script>
</head>

变量

JavaScript中的定义变量格式

var 变量名;
var 变量名=值;

JavaScript的变量类型

数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function

JavaScript里特殊的值

未定义（默认值）：undefined
空值：null
非数字，非数值：NAN

综合运用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        var i;//定义变量
        i=1;
        alert(typeof(i));
        // expected output: "number"
        alert(typeof 'hello');
        // expected output: "string"
        alert(typeof true);
        // expected output: "boolean"
        alert(typeof undeclaredVariable);
        // expected output: "undefined"
    </script>
</head>

关于typeof

这是typeof的详细介绍

一些在使用IntelliJ IDEA的补充

1.运行快捷键：Ctrl+shift+F10
2.替换所选代码：Ctrl+r
3.设置快捷方式：file->settings->keymap->选择要添加快捷键的选项->右键选择按键方式->添加
4.Ctrl+D向下复制当前光标所在行(或者是当前选中的内容)
5.Ctrl+Y删除当前光标所在行
6.Shift+ALT+↑/↓向上或向下移动光标所在行

binflcy

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
Web学习笔记

每次学了不用就忘记了，想着学一点记录一点，新的技能树开始加点！自学素材：https://www.bilibili.com/video/BV1Y7411K7zzps:虽然老师的idea有点老，但是超详细！！也很好理解4.24第一个网页制作（标签）初识标签标签语法常用标签简单来说，一个网页要使用到HTML(内容)、CSS（表现）、JavaScript（行为）开始第一个网页制作，用到的是idea软件，创建一个JavaScript工程初识标签<!--标签名大小写不敏感，拥有.
复制链接

扫一扫