Html&Css&JavaScript

程序员要奋斗

已于 2023-01-12 16:36:49 修改

阅读量555

点赞数 2

分类专栏： # JavaWeb 文章标签： html css 前端 javascript Powered by 金山文档

于 2023-01-10 17:56:03 首次发布

本文链接：https://blog.csdn.net/qq_53063293/article/details/128624304

版权

本文详细介绍了HTML、CSS和JavaScript的基础知识，包括JavaScript的引入方式、基础语法、变量、数据类型、运算符和函数。同时，文章还探讨了JavaScript中的Array、String、RegExp对象以及自定义对象。在BOM部分，讲解了window和location对象，而在DOM部分，阐述了如何获取和使用Element对象。最后，文章介绍了事件监听，包括事件绑定、常见事件及其应用案例。

摘要由CSDN通过智能技术生成

1.html

所有网页都是用html这门语言编写出来的。
是超文本标记语言（超文本：超越了文本的限制，可以定义图片等不是文字的信息。标记语言：由标签构成的语言。）
html标签都是预定义好的，不区分大小写。
注释只有

<!DOCTYPE html>
<html lang="en">
<head>
        <!-- 告诉浏览器采用utf-8字符集编码html代码，能够展示中文   -->
    <meta charset="UTF-8">
    <title>关于Html的学习</title>
</head>
<body>
    <!--1.h1~h6为标题标签，依次变小-->
    <h1>我是标签h1</h1>
    <h2>我是标签h2</h2>
    <h3>我是标签h3</h3>
    <h4>我是标签h4</h4>
    <h5>我是标签h5</h5>
    <h6>我是标签h6</h6>

    <!--2.hr定义水平线-->
    <hr/>

    <!--3.font标签
        size:定义字体大小，可以是1~7的数字。浏览器默认是3。
        color:
            1.rgb(x,x,x):x表示颜色值，0~255，html不支持，但css支持。
            2.#xxxxxx:十六进制数颜色值,前端常用。
            3.colorname:颜色单词，只能用来表示一些简单的颜色。
    -->
    <font size="7">我是字体大小7</font>
    <!--4.br:换行标签-->
    <br/>
    <font color="#ff6f40">我是颜色</font>

    <!--5.段落标签-->
    <p>我是第一个段落</p>
    <p>我是第二个段落</p>

    <!--6.居中标签-->
    <center>
        我是居中标签。
    </center>

    <!--7.b:粗体标签-->
    <p><b>我是粗体标签</b></p>
    <!--8.i:斜体标签-->
    <p><i>我是斜体标签</i></p>
    <!--9.u:下划线标签-->
    <p><u>我是斜体标签</u></p>

    <!--10.转义字符-->
    <p>我是版权符号&copy</p>

    <!--11.img:图片标签
            src:定义图片地址
                绝对路径：（很少使用）
                    盘符路径
                    外网路径:以http或https开头的路径
                相对路径：
                    相当于当前html所在的目录，使用./或者../开头的路径
                    ./ :表示当前目录，可以省略不写。
                    ../ :表示上级目录
            width:宽度
                1.具体的数字：
                    width="256"
                2.百分比：推荐
                    width="50%"
            height:高度
    -->
<img src="a.jpg" width="25%" height="500"/>
    <br/>

    <!--12.音频标签（支持MP3,WAV,OGG）
        controls:显示播放控件
    -->
<audio src="b.mp3" controls="controls"></audio>
    <br/>

    <!--13.视频标签（支持MP4,WebM,OGG）-->
<video src="c.mp4" controls="controls" width="25%" height="500"></video>
    <br/>

    <!--14. a:超链接标签
            href:指向访问资源的URL
            target:指向打开资源的方式
                1._self:（默认值）在浏览器当前窗口打开
                2._blank:新建一个窗口打开
    -->
    <a href="https://www.csdn.net/" target="_blank">
        <img src="a.jpg">
    </a>

    <!--15.列表标签：
            有序列表：<ol><li>
                start：指定起始序号
                type:设置项目符号
            无序列表：<ul><li>
                type有三种属性值
                     disc：小圆点，默认值
                    square：小方块
                    circle：小圆圈

    -->
    <ul type="" >
        <li>无序1</li>
        <li>无序2</li>
        <li>无序3</li>
    </ul>
    <ol type="1" start="10">
        <li>有序1</li>
        <li>有序2</li>
        <li>有序3</li>
    </ol>

    <!--16.table:表格标签
        table:定义表格
            border:边框宽度
            width:表格宽度
            cellspacing:规定单元格之间的空白
        tr:定义行
            align:定义表格行的对奇内容
        td:定义单元格
            rowspan:规定单元格可横跨的行数
            colspan:规定单元格可横跨的列数
    -->
<table border="1" width="160" cellspacing="0">
    <tr>
        <th>序号</th>
        <th>品牌</th>
        <th colspan="2">名称</th>
    </tr>
    <tr align="center">
        <td rowspan="2">1</td>
        <td><img src="a.jpg" width="50" height="50"/></td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr align="center">
<!--        <td>2</td>-->
        <td><img src="a.jpg" width="50" height="50"/></td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr align="center">
        <td>3</td>
        <td><img src="a.jpg" width="50" height="50"/></td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>

    <!--17.布局标签
        <div>:定义html文档的一个区域部分，经常和css一起使用，用来布局网页。
            块级标签：能自动换行的标签叫块级标签，如：h1~h6,p等
        <span>:用于组合行内元素。
            行级标签：不会独占一行，img，a等
    -->

    <!--18.表单标签:在页面中主要负责数据采集，使用<form>标签定义表单
            action="" :定义表单提交的地址。
            method="" :定义提交方式，http协议提交方式有7种，常见的是两种，分别是get（默认）/post方式。
                区别：
                    1.get方式提交的参数在地址后面，使用？隔开，多个参数使用&拼接。
                    2.get方式提交的参数相对不安全，post方式相对安全。
                    3.get方式提交的数据有大小限制，post方式提交参数没有大小限制。
        -->

    <!--19.表单项标签：定义输入的形式
            type属性:定义input表单的类型：
                text：定义普通文本输入框，输入的内容原有展示，只有一行
                password：定义密码输入码，输入的内容密文展示
                radio：单选按钮
                checkbox：复选框,可以多选
                file:文件上传项
                hidden:隐藏域，用来提交一些不期望用户看到的数据
                submit：提交按钮，点击提交到action处
                reset：重置按钮，点击表单恢复到最初数据
                button：普通按钮，点击无效果，需要和javaScript结合使用
                email:定义邮箱输入框，自带简单的邮箱格式校验
                date：定义日期输入框，点击之后可以定义日期

             name属性：定义表单提交的数据（参数）名字
                1.表单数据要想提交，必须要有name数据
                2.对于单选按钮和复选框而言，name属性值必须一样，单选按钮才有互斥效果
             value属性：表单项默认值
                1.如果表单项是普通的文本输入框，value属性值就是输入框内的默认值。
                2.对于单选按钮和复选框而言，用于区分提交给服务器的值，如果没有value属性，提交给服务器的就是on

             checked属性：单选按钮和复选框默认选中

             placeholder属性:输入框内展示的灰色提示信息

             label标签：定义文本，点击文本，光标可以定位到关联的输入框中。

             select标签：定义下拉列表
                name属性：定义提交的数据名称
                option子标签：定义下拉列表中的列表项
                    value:定义要提交的数据
                    selected：默认选中

             textarea标签：定义文本域，提交多行数据
    -->
    <form action="hellohtml.html" method="get">
        <!--        <input type="text" name="username"/><br/>-->
        <!--        <input type="password" name="password"/><br/>-->
        <!--        <input type="submit">-->
        <label for=username>账号：</label>
        <input id="username" type="text" name="username"/><br/>
        密码：<input type="password" name="password"><br/>
        性别：<input type="radio" name="sex1" checked >男
        <input type="radio" name="sex1">女<br/>
        爱好:<input type="checkbox" checked name="value" value="打篮球">打篮球
        <input type="checkbox" name="value" value="跑步"> 跑步<br/>
        文件：<input type="file">