HTML+CSS+JS基础

最新推荐文章于 2024-08-03 22:09:54 发布

xvwen

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量439

点赞数

分类专栏：前端开发文章标签： html css javascript

本文链接：https://blog.csdn.net/xwh3165037789/article/details/122204279

版权

前端开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML基础标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础标签</title>
</head>
<body>
    <h1></h1>
    ...
    <h6></h6>   定义标题


    <b></b>  定义粗体文本

    <u></u>  定义文本下划线

    <i></i>  定义斜体字

    <p></p>  定义段落

    <br> 定义换行

    <hr> 定义水平线


    <img src="" width="" height="">  定义图片

    <audio src="" controls="controls"></audio>   定义音频，controls定义播放按钮

    <video src="" controls="controls"></video>   定义视频

    尺寸：% 和 px
    路径： ./当前目录   ../上级目录

    <a href="" target=""></a>  定义超链接
        href：指定访问资源的url
        target：指定打开资源的方式
            _self:默认，当前页面打开
            _blank:空白页面打开

    <ol>
        <li></li>   定义有序列表
    </ol>

    <ul>
        <li></li>   定义无序列表
    </ul>

    <table border="" cellspacing=""></table>   定义表格  border 定义表格边框宽度  cell..定义单元格之间的空白
    <th></th>      定义标题
    <tr align=""></tr>   定义行   align 定义内容对其方式
    <td rowspan="" colspan=""></td>   定义列  row..定义单元格横向跨越行数  col..定义纵向跨越列数

    <table>
        <tr>
        <th>序号</th>
        <th>排名</th>
        </tr>
        <tr>
            <td>1</td>
            <td>100</td>
        </tr>

    </table>


    <div></div>   布局标签，一个div占一行
    <span></span>  行内布局标签，一个span占其包裹的内容

    <form action="" method=""></form>  定义表单  act..定义发送表单的url，met..定义发送方法有get，post等

    <input type="" name="">  定义表单项  type定义类型，name定义名称
    <label></label>  为表单项定义标注
    <select>定义下拉列表
        <option></option> 定义下拉列表的列表项
    </select>
    <textarea></textarea> 定义文本域


</body>
</html>

css基础

内联样式
<div style=""></div>   style属性设置css

内部样式
<style >
    标签修改样式
    div{
      xxx:xxx;
    }
    id修改样式
    #id{
      xxx:xxx;
    }
    class属性修改样式
    .名称{
      xxx:xxx;
    }
</style>

外部引入
<link href="demo.css" rel="stylesheet">
demo.css文件
div{
  ...
}
.id{
  ...
}
#class{
  ...
}

javascript基础

//引入
//内部脚本：js写在html中

<script>
    alert("你好!")
</script>


//外部脚本：js写在js文件中，通过script标签引入

<script src="" rel="stylesheet"></script>

注释 //  /*/

大括号标识代码块
<script>
    if (count==1){
        alert("count")
    }
</script>

//输出语句
<script>
    window.alert("")   //弹出警告栏
    document.write("");   // 写入html
    console.log("");       //写入控制台
</script>

循环和条件判断和java一样

函数：
定义
<script>
    function funcNmae(参数1,参数2){
        执行的代码
    }
    //弱类型语言不需要定义数据类型

    function add(a,b) {
        return a+b;

    }
调用
    funcNmae(a,b);
    let result=add(a,b);

    定义方法二
    var funcname1=function (参数){

    }
</script>

js对象：
Array  是变长，越界就直接赋值，可存储不同类型数值
var arr=new Array(1,2,3);  var arr1=[1,2,3];

arr[索引]=值

属性
.lenght  长度

方法
.push() 追加
.splice(start,end)


String

var str=new String("hello");
var str="hello"
属性
.lenght

方法
.charAt()  返回指定位置字符
.indexOf() 检索字符串
.trim()   去除首尾空格

自定义对象

var person={
    name:"zhangsan",
    age:"21",
    eat:function(){
        alert("eat dinner!");
    }
}


BOM  浏览器对象模型
组成
Window   浏览器窗口对象
    window.alert()
    window.confirm()   //带有提示信息和确认按钮的提示框
    window.setTimeout(function,time)  //一定时间后执行一个function，只执行一次,time是毫秒值1000为一秒
    window.setInterval(function,time) //在一定时间后执行一个function，循环执行
Navigator    浏览器对象
Screen     屏幕对象
History     历史记录对象
    window.history.方法()
    window.history.back()  //加载history列表的前一个url
    window.history.forward()  //加载history列表的下一个url
Location    地址栏对象
    window.location.方法()
    window.location.href("https://www.baidu.com"); //跳转到百度，重定位
所有的window都可以省略

DOM 文档对象模型
将标记语言的的各个组成部分封装为对象
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文档对象
Comment:注释对象

js通过DOM对html进行控制
改变html内容
改变html元素样式css
对html dom做出反应
添加html元素

文档对象的属性，获取element对象
getElementById: 根据id属性获取，返回一个Element对象
getElementsByTagName :根据标签名称返回Element数组
getElementsByName:根据name属性获取，返回Element数组
getElementsByClassName:根据class属性获取，返回Element对象数组

element对象的使用，使用.获取其属性
.style  设置css样式
.innerHTML  设置元素内容，覆盖原来的
对于checkbox标签用element的checked属性判断是否选中

事件监听：

事件绑定的方式：1.html标签的属性绑定  2.通过DOM元素绑定
<input type="button" onclick="func()">
<script>
    function func(){
        alert("点击了!");
    }
</script>

<input type="button" id="btn">
<script>
    document.getElementById("btn").onclick=function (){
        alert("点击了!");
    }
</script>

鼠标事件:
    元素的聚焦点的得失，获取焦点后的变化，失去后的变化
    元素的点击事件
    鼠标移到某元素，或离开的变化
    表单元素的提交前的判断onsubmit函数
    onload  页面加载完成后执行
    onmouseover 鼠标移到猫元素上触发
    onmouseout  鼠标移出元素后触发
    onclick  点击
    onfocus 获得焦点
    onblur 失去焦点
    onsubmit 提交表单 return false 不能提交 return true 可以提交

键盘事件
    onkeydown 某个键盘按下后触发

正则表达式
定义了字符串的组成规则
语法：
^  :表示开始
$  :表示结束
[] :代表某个范围内的单个字符,[0-9]
.  :代表任意单个字符，除了换行和结束符
\w :代表单词字符，数字，字母，下划线_
\d :代表数字字符，相当于[0-9]
量词：
+  :至少一个
*  :零个或多个
?  :零个或一个
{x} :x个
{m,} :至少m个
{m,n} :至少m个，最多n个

直接定义
var re=/^\w{6,12}$/     没有引号，以两个/包裹
使用RegExp对象定义
var re=new RegExp("^\w{6,12}$");

.test方法验证
var str="qwer123456";
var flag=re.test(str);  返回值为boolean类型