前端学习总结-CSDN博客

本文链接：https://blog.csdn.net/zerostruggle/article/details/119793098

HTML

1.HTML标准格式

<!DOCTYPE HTML><!--这是HTML5的文档声明-->

<html><!--这是html的开始标签-->
    <head><!--这是设置网页标签,html的编码设置,以及标题和链接资源都写在这里-->
        <!--这是设置移动端观看时,网页不缩放-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--设置网页在ie上观看时,按照浏览器的最高版本的IE观看-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="utf-8"> <!--这是设置网页编码-->
        <title>我的主页</title><!--这是设置网页标题-->
    </head>
    <body><!--这是网页内容-->
        你好! 欢迎访问我的主页
    </body>
</html>

<!--
    1、这是HTML的注释
    2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
    3、HTML不区分大小写，语法松散不严格。
-->

2.HTML的基本标签

        <!--段落标记-->
        <p>《黛玉葬花》</p>

    <!--标题字：是HTML预留的格式，和word中的标题字相同-->
        <h1>标题字</h1>
        <h2>标题字</h2>
        <h3>标题字</h3>
        <h4>标题字</h4>
        <h5>标题字</h5>
        <h6>标题字</h6>

        <!--换行标记，br标签是一个独目标记-->
        hello <br>world!

        <!--横线，独目标记-->
        <hr>
        
        <!--color和width都是hr标签的属性-->
        <hr color="red" width="50%">
        <!--语法太松散了。-->
        <hr color='green' width=30%>

        <!--预留格式-->
        <pre>
        for(int i = 0; i < 10; i++){
            System.out.println("i = " + i);
        }
        </pre>
        <del>删除字</del>
        <ins>插入字</ins>
        <b>粗体字</b>
        <i>斜体字</i>
        10<sup>2</sup>
        10<sub>m</sub>
        <!--字体标签-->
        <font color="red" size="50">字体标签</font>

3.HTML的实体符号

实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号  是空格

4.HTML的表格

<table align="center" border="1px" width="60%" height="150px">
            <!--align对齐方式-->
                        <th>
                                <td>表头</td>
                       </th>
            <tr align="center">
                <td>a</td>
            </tr>
            <tr>
                <td align="center">z</td>
            </tr>
</table>

<!--注意事项：
    1、row合并的时候，删除“下面的”单元格 rowspan
    2、col合并的时候，对删除哪个没有要求。 colspan
-->

5.背景颜色和背景图片

    <!--
        bgcolor : 设置背景色
        background : 设置背景图片
        以上的设置都是对背景进行设置。
    -->
    <body bgcolor="red" background="img/bd_logo1.png">
    </body>

6.图片img

<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
               <!--
            1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
            2、img标签就是图片标签
            3、src属性是图片的路径
            4、width设置宽度,height设置高度
            5、title设置鼠标悬停时显示的信息。
            6、alt设置图片加载失败时显示的提示信息。
               -->

7.超链接

<a href="http://www.baidu.com">百度</a>
<!--图片超链接-->
<a href="https://www.hao123.com/">
    <img src="img/hao123.png" width="120px"/>
</a>
<!--
    超链接有一个target属性：
    可取值：
    _blank : 新窗口
    _self ： 当前窗口(默认就是这种方式。)
    _top ： 顶级窗口
    _parent ： 父窗口
-->

8.无序列表ul 有序列表ol

        <!--无序列表-->
        <ul type="circle">
            <li>中国</li>
            <li>美国</li>
            <li>日本</li>
        </ul>                
                <!--有序列表-->
        <ol type="I">
            <li>水果
                <ol type="a">
                    <li>苹果</li>
                    <li>西瓜</li>
                    <li>桃子</li>
                </ol>
            </li>
            <li>蔬菜
                <ol>
                    <li>西红柿</li>
                </ol>
            </li>
            <li>甜点</li>
        </ol>

9.表单form

<form action="http://localhost:8080/jd/login">
            用户名<input type="text" /><br>
            密码<input type="password" /><br>
            <!--submit reset必须放到form标签内部-->
            <input type="submit" value="登录" />
            <input type="reset" value="清空" />
</form>

<!--一些表单控件。-->

<!--file控件：文件上传专用。-->
<input type="file" />
<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<input type="hidden" name="userid" value="111" />

<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" checked/>女
<!--单选按钮的value必须手动指定-->
<br>
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="fireHair" checked/>烫头
<br>

<input type="text" maxlength="3" />        
<!--maxlength 设置文本框中可输入的字符数量。-->

10.readonly disabled 表单控件的属性

<!--
    readonly和disabled相同点：都是只读不能修改。
    但是readonly可以提交给服务器，disabled数据不会提交(即使有name属性也不会提交。)
-->

11.id属性

id的存在让我们获取元素(节点)更方便。

<!--id就是节点的身份证号码，不能重复。-->
<input type="text" id="username" />

12.div和span

<div id="div1">我是一个DIV</div>
<!-- div独自占用一行(默认情况下)-->

<span id="span1">我是一个SPAN标签</span>
<!-- span不会独自占用一行 -->

CSS

1.HTML中引入CSS样式的第一种方式：内联定义方式

<!--
    width 宽度样式
    height 高度样式
    background-color 背景色样式
    display 布局样式(none表示隐藏，block表示显示)
-->
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border-color : red;border-width : 1px;border-style : solid;"></div>

<!--样式还能这样写：border : 1px solid black;-->
<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
border : 1px solid black;"></div>

2.HTML中引入CSS样式的第二种方式：样式块

    <head>
        <title>HTML中引入CSS样式的第二种方式：样式块</title>

        <style type="text/css">
            /*
                这是CSS的注释。
            */

            /*
                id选择器
                语法格式：
                    #id{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....
                    }
            */

            /*
                标签选择器
                语法格式：
                    标签名 {
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....
                    }
                标签选择器作用的范围比id选择器广。
            */

            /*
                类选择器
                语法格式：
                    .类名{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....
                    }
            */

        </style>
    </head>

3.在HTML中使用CSS样式的第三种方式：引入外部独立的css文件

<head>
     <meta charset="utf-8">    
     <link rel="stylesheet" type="text/css" href="css/1.css" />
</head>

4.列表样式

<style type="text/css">
    ul{
    /*list-style-type: none;*/
    /*list-style-type: circle ;*/
    list-style-type: square ;
    }
</style>

5.CSS样式的绝对定位

<style type="text/css">
    #div1{
    background-color: red;
    border: 1px black solid;
    width: 300px;
    height: 300px;
    position : absolute; /*绝对定位*/
    left: 100px;
    top: 100px;
    }
</style>

JavaScript

简介

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在的。 JS中的一条语句结束之后可以使用分号“;”，也可以不用。

JS中的字符串可以使用双引号，也可以使用单引号。

1.HTML中嵌入JS代码的第一种方式

<input type="button" value="hello" onclick="window.alert('hello js')"/>

2.HTML中嵌入JS代码的第二种方式

<!--第二种方式：脚本块的方式-->
<script type="text/javascript">

    /*
        暴露在脚本块当中的程序，在页面打开的时候执行，
        并且遵守自上而下的顺序依次逐行执行。(这个代
        码的执行不需要事件)
    */
    window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
            
    // JS代码的注释，这是单行注释。
    /*
        JS代码的多行注释。和java一样。
    */
    window.alert("Hello JavaScript!");

</script>

3.HTML中嵌入JS代码的第三种方式：引入外部独立的js文件

<script type="text/javascript" src="js/1.js"></script>