HTML CSS JavaScript基础知识

最新推荐文章于 2024-03-05 19:50:41 发布

随风756

最新推荐文章于 2024-03-05 19:50:41 发布

阅读量827

点赞数 22

分类专栏： JavaWeb学习文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_65031432/article/details/134580615

版权

JavaWeb学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML：负责网页的结构（页面元素和内容）。

CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

JavaScript：负责网页的行为（交互效果）。

一、HTML

1.HTML结构标签

<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>

2.特点：

HTML标签不区分大小写 HTML标签属性值单双引号都可以 HTML语法松散

3.常见标签及使用

`<style>`标签：它的主要作用是为文档中的元素提供样式。我们通过使用这个标签在HMTL文档中嵌入样式，而不是通过它来引用外部样式表

图片标签：<img src="…" width="…" height="…">

src：指定图像的url（绝对路径 / 相对路径）

width：图像的宽度（像素 / 相对于父元素的百分比）

height：图像的高度（像素 / 相对于父元素的百分比）

标题标签：<h1> - <h6>

水平线标签：<hr>

布局标签：<span>

布局标签：<div>

超链接标签：<a>

视频标签：<video>

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

音频标签：<audio>

src：规定音频的url

controls：显示播放控件

段落标签：<p>

文本加粗标签: <b> / <strong>,文本写在中间

表格标签：<table>

<table>：定义表格

<tr>：定义表格中的行，一个 <tr> 表示一行

<th>：表示表头单元格，具有加粗居中效果

<td>：表示普通单元格

表单标签： <form>

表单项标签：<input />

<input> 的type属性：text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit

注意：在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

二、CSS

CSS引入方式

1.行内样式：写在标签的style属性中（不推荐）

2.内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

3.外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

颜色表示

CSS选择器：用来选取需要设置样式的元素(标签)

优先级：id选择器 > 类选择器 > 元素选择器

1.元素选择器

2.id选择器

3.类选择器

CSS盒子模型

盒子模型的CSS属性

三、JavaScript

JavaScript引入方式

1.内部脚本：将JS代码定义在HTML页面中

说明：

2.外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

说明：

JS基础语法

注释和代码块

输出语句

变量

数据类型

运算符

JS函数

注意：JS中，函数调用可以传递任意个数的参数。

JS对象

1.Array

2.String

3.JSON

JavaScript自定义对象：

4.BOM

5.DOM

DOM案例

JS事件监听

事件监听及DOM操作完成案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()" >

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()" >
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick ="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡;  ---onclick
    function on() {
        //获取img元素对象
       var img =  document.getElementById('light');

        //设置src属性
        img.src = "img/on.gif";
    }
    function off() {
        var img = document.getElementById('light');
        img.src = "img/off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; ---onfocus,onblur
    function lower() {
        //获取输入框元素对象
        var input = document.getElementById('name');

        //将值转为小写
        input.value = input.value.toLowerCase();
    }
    function upper() {
        var input = document.getElementById('name');

        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll() {
        //获取所有复选框的对象
       var hobbys = document.getElementsByName('hobby');
       //设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }
        
    }
    function reverse() {
        var hobbys = document.getElementsByName('hobby');
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }


</script>
</html>