HTML
HTML是一种标记性语言，其中包括了很多标签。HTML文本是由HTML命令组成的描述性文本，可以用来说明文字、图形、动画、表格、超链接等。
例如：
<ul >
<li >重庆</li>
<li >四川</li>
<li >广东</li>
<li >上海</li>
</ul>
<!--ul标签指的就是无序列表里面的li标签就是用来记述的，而ol标签类似于ul标签但是是有序的-->而在HTML中有很多类似的标签他们都有各自的作用，
<a href="http://www.baidu.com" target="_blank">百度首页</a>
<!--a标签表示超链接可以跳转到指定地址-->
<img src="img/img1.jpg" width="200px" height="400px"/>
<!--img标签表示引用图片-->
<h1>h1标签</h1>
<!-- h1 h2 h3等标签是用来表示标题的标签-->
<!-- 段落标签 -->
<p align="center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex ducimus animi suscipit! Nobis
earum fugiat aperiam necessitatibus fugit voluptatibus, sint dolor expedita possimus doloribus cupiditate
sapiente aliquid, dignissimos nam neque?</p>
<!-- 文本标签：span，没有默认样式效果不换行 -->
<span>nice to meet you</span>
诸如此类的还有很多标签而可以引用的标签还有注意的就是相对路径和绝对路径的区别
相对路径:根据当前文件所在的位置，查找其他资源的位置../表示退出当前文件夹./表示当前文件夹，一般可以省略
绝对路径:从协议开始的全路径。(http://127.0.0.1:8848/Day1/img/20220222103831_1.jpg)可以省略协议及其域名，直接从根目录开始的路径，也就是绝对路径
CSS
对于用标签写出来的代码想要用来修饰其宽高等样式，就需要用到CSS(样式)，其中内联样式就是直接在标签内部修饰当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个p标签</p>内联样式可以对需要单独修改的标签进行修改，但是要对很多标签同时修改就可以使用外联样式进行修改
<style>
li{
background-color: green;
list-style: none;/*去掉标签的前面的符号*/
margin: 3px;
}
.group{
color: red;
}
#first{
font-size: 30px;
}
</style>
其中可以通过选择器来选择想要修改的标签基本的有：
1.标签选择器：根据标签的名字来修改标签的样式，所以html里所有的标签都会被选中并修改
2.id选择器：根据标签的id选择标签，一个html页面中id是唯一的例如
<style>
#p{
color: red;
}
</style><p id="p1">这是一个p标签</p>3.clss选择器：根据class属性，选择标签。（一个html页面，class允许重复，可以选择除多个符号条件的标签。
<style>
.p1{
color: red
}
</style><p class="p1">这是一个p标签</p>
<p class="p1">这是一个p标签</p>CSS的伪类选择器
实现鼠标移动到标签上，产生的效果
<style>
/* 伪类:hover，鼠标移到图片上，图片边框变为白色的2px */
img:hover{
border: 2px solid white;
width: 438px;
}
</style>CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
<style>
.box{
width: 100px;
height: 200px;
background-color: #008000;
/* 边框 */
border: 3px solid gray; /*四个方向均有边框*/
/* border-left: 3px solid yellowgreen;
border-top: 3px solid seagreen;
border-right: 3px solid yellowgreen;
border-top: 3px solid lightyellow
; */
border-width: 5px;
border-style: dotted;
}
</style>CSS overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
<style>
div{
background-color: green;
width: 400px;
height: 200px;
overflow: hidden; /*溢出解决方式：隐藏溢出部分*/
overflow: scroll;/*设置出现滚动条。溢出内容通过滚动条查看*/
/* overflow: visible;/*溢出部分可见*/
overflow: auto; /*继承父元素的溢出复员方式*/
}
</style>CSS浮动定位
<style>
.inner{
background-color: #00ffff;
margin: 3px;
float: left;/*左浮动*/
}
.outer{
background-color: gray;
/* 子元素浮动之后，父元素高度为0，造成溢出现象：解决方式1.给父元素设置高度。2.使用overflow，隐藏溢出 */
/* height: 100px; 内部嵌套元素浮动后，包裹元素高度为0，可以给包裹元素设置高度*/
overflow: hidden;/*内部嵌套元素浮动后，包裹元素高度为0，可以使用overflow:hidden;让包裹元素的高度和内部元素高度匹配*/
}
p{
float: right;/*有浮动：标签浮动之后，影响了其他标签的显示。如果其他标签不想受其影响，可以在标签中通过clear，清除浮动的影响*/
}
h1{
clear: both;/*清除浮动影响：none-不清除，both-清除两边的影响，left-清除左边的影响，right-清除右边的影响*/
}
</style><!-- 定位：流定位，浮动定位，相对定位，绝对定位，固定定位
1.流定位：页面中的块级元素从上到下一个接一个显示，行内元素在一行中从到右排
2.浮动定位：让元素脱离了普通的流定位，通过css的float属性设置元素的浮动方向，浮动元素依旧在父元素内部，用它实现特殊的定位效果-->
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
<div>lkdlkd</div>
<hr>
<div style="background-color: #00ffff;">
<p>p标签</p>
<h1>H1标签</h1>
</div>实现样式如图所示
CSS的定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
相对定位(relative):相对定位元素的定位是相对其正常位置。
绝对定位(absolute):绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
JS
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
下面的例子就是简单给html里面的标签添加点击事件，使其点击按钮过后能产生自定义的事件
<body>
<!-- 1.事件定义方式
2.js嵌入到html页面，通过<script>标签来使用
3.把js相关内容写到单独的js文件中，然后再html页面上通过<script src="xx">标签引入js文件，进行使用-->
<!-- onclick:是标签的事件属性,alert('hello')是js中定义的一个弹出警告框的函数 -->
<button onclick="alert('hello!')">你好</button>
<button onclick="f1('nice to meet you')">你好</button>
<button id="btn3">按钮3</button>
<button id="btn4" >按钮4</button>
<script src="4js使用.js"></script>
</body><script>
//自定义函数
//js是弱数据类型语言
function f1(a){
alert(a)
}
//get Element By Id,根据id获取元素，id是唯一的，所以找出来的是唯一的符号要求的一个元素
let btn=document.getElementById("btn3")
btn.onclick=function(){
alert('say hi')
}
</script>点击你好过后实现的提示框
JS的for循环
一般来说创建对象
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");使用for循环创建对象
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}如果要运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
JS中的this
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
方法中的this
指的就是所在方法的对象
JS中的正则表达式
使用正则表达式来限定字符串中的字符格式
在代码中常简写为regex、regexp或RE
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
正则表达式模式
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
下例为使用正则表达式来限定某些限定词语使其更换为*输出
<p id="show" style="color: red;"></p>
<h4>评论</h4>
<textarea name="" id="content" cols="100" rows="10"></textarea>
<button onclick="commit()">提交评论</button>
<script><script>
let str="asd12asd2v2asd6asd2414"
let reg=new RegExp(/\d{1,}/g)
str=str.replace(reg,"#")
console.log(str)
function commit(){
let conten=document.getElementById("content").value
let reg1=new RegExp(/[妈党独]{1,}/g)
let show=document.getElementById("show")
conten=conten.replace(reg1,"***")
document.getElementById("show").innerHTML+="<span>"+conten+"</span><br>"
}
</script>
8440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
