前端 ( HTML + JS + CSS )

HTML

简介

  • HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言: HyperText Markup Language
    • HTML 不是一种编程语言，而是一种标记语言
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 文档包含了HTML 标签及文本内容
    • HTML文档也叫做 web 页面

  • 浏览器读取 HTML 文件，使用标签来决定如何展示页面内容

  • 前端三剑客

    • HTML 定义了网页的内容
    • CSS 描述了网页的布局
    • JavaScript 控制了网页的行为

  • 六大原则之一：开闭原则

    • 敏捷开发思想，一开始不用很严谨，是递增的完善

  • 发送方式 get、post

    • 地址、超链接 get
    • 表单 get、post
    • ajax 时间 post

  • 块、行级 ( 也叫内联 ) 元素

    • display 属性指定

      • block 转为块级
      • none 隐藏不显示
      • inline 块变行
      • inline-block 内联元素设高宽

    • 块级：按列占，向下排列，每次都换行可以包含块和行

      • div、p、ul
      • 但又想放一行里，就用浮动 float:left

    • 行内：占满行

      • 超链接 a、label、span

    • 行内块：块的特性，只不过不占一整行了

      • img、input、textarea

  • <!DOCTYPE html>：表示是用 HTML5 来写的，不区分大小写

    • 告知浏览器使用了哪种版本

  • <head>：头部元素，包含了文档的元数据，定义非显示的（除了 <title>）

    • <meta charset="utf-8" content="......" /> 不需要成对的 ——> 自闭和标签：不能再往里面嵌加别的标签了；其中 content 属性是给搜索引擎看的
      • 中文网页需要声明编码，有些是 GBK（如：360浏览器）
      • 前端交互、爬虫、内部算法（考虑关键字、内容等）
      • 搜索优化 + 竞拍排名
    • 通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码（doctype 指定版本强制浏览器按标准渲染）不相同

  • 标题 h，段落 p，链接 a

    • p 是块级元素，不想产生新段时换行：加 <br>

基础

  • 空元素：没有内容的 HTML 元素
    • 换行 <br>，开始及关闭 / 没有关闭标签
      • 但 <br /> 更保障
    • 水平线 <hr>
    • 图像标签也是 <img>，只有属性
  • 连续的空格和换行都会显示为一个空格
  • 对文本格式化的要求：https://www.runoob.com/html/html-formatting.html
  • 链接 <a>：
    • 属性：href、target ( _blank 新窗口打开；_self 当前窗口打开 )、title、rel
    • 各种链接：
      • 文本 href
      • 图像，包含 <img >
      • 锚点 href="#xx" 对应跳转到 <a name="xx">
      • 下载链接 href="xx.pdf" 后加属性 download
    • 页面不显示的、对读者隐藏的书签，加 id
      • <a id="tips">有用的提示部分</a>
      • <a href="#tips">访问有用的提示部分</a>
  • <head> ：
    • <title> 标签
    • <base> 所有链接默认的目标地址
    • <meta> 描述 HTML 文档的描述，关键字，作者，字符集等等
      • 描述了一些基本的元数据，不显示于页面，但会被浏览器解析
      • 配合属性 name （如：=keywords）与属性 content （如：=花，草，树木）
      • 刷新页面的 http-equiv 代替 names
    • <link> 定义了文档与外部资源之间的关系
      • <link rel="stylesheet" type="text/css" href="mystyle.css">
      • 属性 rel （是 relationship 缩写），通常用来描述当前页面与 href 所指定的文档之间的关系，也可见于 <a> 标签
    • <style> 其中直接添加样式来渲染 HTML 文档
      • <style type="text/css"> ... </style>
    • 可插入 <scripts> 脚本，如：JavaScript
    • 也可以 <p> 定义文档页眉（介绍信息）

图像

  • 空标签 <img> 中 src 是指定图像的 URL 地址
  • 属性 alt 是定义一串预备的可替换的文本，为了在图像无法载入时显示这个替代性的文本而不是图像
  • 高 height，宽 width
  • <map> 标签定义图像地图
  • <area> 定义图像地图中的可点击区域

表格

  • <table>

  • tr 表示表格的一行

  • th 表示表头单元格

  • td 表示数据单元格

  • thead 表格的标题部分

  • tbody 用于定义表格的主题部分

    <table>
  <thead>
    <tr>
      <th>列标题1</th>
    </tr>
  </thead>
    
  <tbody>
    <tr>
      <td>行1，列1</td>
    </tr>
    <tr>
      <td>行2，列1</td>
    </tr>
  </tbody>
</table>

  • 属性 border 表示边框

  • 在 td 中可以用属性 colspan="2" 表示横跨两列

列表

  • 无序 <ul> 内加多个 <li>

  • 有序 <ol> 内加多个 <li>

  • 自定义列表以 <dl> 标签开始；每个自定义列表项以 <dt> 开始；每个自定义列表项的定义以 <dd> 开始

    <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<!-- 
显示：
Coffee
- black hot drink
Milk
- white cold drink
-->

  • 列表之间可以嵌套，如：

    <ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
</ul>

区块

  • HTML 可以通过 <div> 和 <span> 将元素组合起来
    • 块级元素，<div> 可用于组合其他 HTML 元素的容器
      • 独占一行，默认是以块的形式占据空间
    • 内联元素，<span> 元素可用作文本的容器
      • <span> 默认只占据内容宽度的空间
      • 显示时通常不会以新行开始，如：<h1>、<td>、<a>、<img>

布局：

表单

  • <form> 来创建
  • method 属性指定 get 还是 post
  • 默认：
    • 值用 value
    • 单选用 checked
    • 下拉用 selected
  • 内 <input /> type=
    • 文本 text
    • 密码 password
    • 单选按钮 radio （写多个同 type，name 一样的为一组）
    • 复选框 checkbox
    • 文件器 file
    • 按钮 button
    • 提交 submit
    • 恢复默认初始值 reset

框架

  • 文本框 <textarea>

  • 下拉列表 <select>

    • 下拉列表的选项 <option>

  • 单选框 <radio-buttons>

  • 复选框 <checkbox>

  • 框架 <iframe src="url"></iframe>

    • width + height
    • frameborder 属性用于定义 iframe 表示是否显示边框
      • ="0" 就是无边框

颜色

  • 三种颜色 红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 ( 256 x 256 x 256 )

image-20230907154414378

  • 上图中的 6 位十六进制的颜色值部分可以写为 3 位十六进制的颜色值
    • 如：红色的 6 位 #FF0000 ——> 3 位 #F00
  • rgba 就是 RGB 拓展了 alpha 透明度
    • 如：background:rgba(255,0,0,0.5);

字符实体

  • 如：在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签

    • 所以按字母缩写作为字符实体：
    • lt：less than
    • gt：greater than

  • HTML 字符实体

    image-20230907160027594

  • HTML 统一资源定位器（Uniform Resource Locators）

    • 即 URL，语法规则：scheme://host.domain:port/path/filename
      • scheme - 定义因特网服务的类型。最常见的类型是 http
      • host - 定义域主机（http 的默认主机是 www）
      • domain - 定义因特网域名，比如 runoob.com
      • :port - 定义主机上的端口号（http 的默认端口号是 80）
      • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
      • filename - 定义文档/资源的名称
    • URL 只能使用 ASCII 字符集

脚本

  • <script> 标签用于定义客户端脚本，如 JavaScript

  • <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时

  • JavaScript 可以之间在 HTML 输出 document.write("<p>这是一个段落。</p>");

  • JavaScript 时间响应 <button type="button" onclick="myFunction()">点我！</button>

  • JavaScript 处理 HTML 样式 document.getElementById("demo").style.color="#ff0000";

    <script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

XHTML

  • XHTML：XML 格式编写的 HTML

    image-20230907161624107

  • 小写字母 a：97

  • 大写字母 A：65

  • 数字 0：48

    • 记住 0、A、a：469、857

JavaScript ( DOM 操作 )

  • 直接写入 HTML 输出流

  • 对事件的反应

  • 改变 HTML 内容

  • 改变 HTML 图像

  • 改变 HTML 样式

  • 验证输入

  • https://www.runoob.com/js/js-intro.html

  • 浏览器 <— HTTP 协议 —> 服务器

    • B / S 架构

    • 90 年发明万维网

    • 95 年 Java、PHP、JavaScript、某桌面编程等编程语言

      • Java 詹姆斯高斯林

    • 第一家纯软件公司 Oracle，为适应多系统而出多版本

      • 之前的软件都是直接绑定到某版的硬件上，附属买卖

    • hao123 集众多网址为一页面，及其方便查找，后被百度收购

      • 李兴平

  • <script> 内编写 var a=1;，var 是类型，实际由值决定

    • 输出 a：

      • console.log(a) 控制器输出
      • document.write(a) 直接写在页面上
      • alert(a) 弹窗显示

    • 创建一个对象

      <head>
    <meta charset="utf-8">
    <title></title>
    <script>
        var obj={
            name:"zyz",
            age:30
        }
        obj.gender="男";
        alert(obj) // 弹窗: [object Object]
        alert(obj.name + "的性别为" + obj.gender) //弹窗: zyz的性别为男

        var obj1 = "balabala"
        alert(obj1) // 运行后弹窗显示

        function test(){
            alert(obj)
        }
        test() // 执行方法 - 弹窗

        function test1(func){
            func()
        }
        test1(test) // 作用相当于直接用test() - 方法功能就是调用

        test1(function(){
            alert("匿名方法")
        })
        test1() // 匿名函数调用

        var test2=test1 // 函数和变量同层级,可以直接赋
        // test2(); //同是匿名方法的调用

    </script>
</head>

    • 文本 val，块 text，属性 attr("","")，修饰 css("","")

      <script>
    function shapeshifting0(){
        var text_bs = document.getElementById("text_big");
        alert("innerHTML - 带标签：" + text_bs.innerHTML);
        alert("innerText - 只文本：" + text_bs.innerText);
    }

    function shapeshifting1(){
        var a = document.getElementById("mes");
        a.innerHTML = "八嘎雅鹿！！！"; // 闭合标签所用
    }
    function shapeshifting2(){
        var bs = document.getElementsByTagName("div") // 多个内容
        for (var i = 0; i < bs.length; i++) {
            bs[i].innerHTML = "八嘎雅鹿~~";
            bs[i].style.color = "red";
            bs[i].style.marginLeft = "50px"; // 要加双引号
        }
    }
    function shapeshifting3(){
        var c = document.getElementById("wenben01");
        alert("input取值用value：" + c.value);
        c.value = "点击了阿妈粽!~"; // 改文本框内容

        // 换图就改图片地址:
        var img = document.getElementById("img1");
        img.setAttribute('src','img/bg2.gif');
        alert(img.src); // http://127.0.0.1:8848/test01/img/bg2.gif

        var c1 = document.getElementById("text_small");
        alert("非input的话取值用textContent：" + c1.textContent);
    }
</script>
</head>
<body>
    <img src="img/bg1.gif" id="img1" />

    <input type="text" class="wenben1" id="wenben01" />

    <div id="text_big"><p id="text_small">bangbangbang</p></div>
    <button id="btn" onclick="shapeshifting0()">inner区别</button>

    <div id="mes">雅鹿~</div>
    <button id="btn" onclick="shapeshifting1()">变单</button>

    <div id="fanyi">八嘎</div>
    <div id="fanyi">八嘎</div>
    <button id="btn" onclick="shapeshifting2()">变多加左内边框</button>

    <button id="btn" onclick="shapeshifting3()">阿妈粽看取文本!</button>

</body>

jQuery

  • jQuery 是一个 JavaScript 函数库，一个轻量级的"写的少，做的多"的 JavaScript 库，jQuery 库包含以下功能：

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • Utilities
      • 提示：除此之外，jQuery 还提供了大量的插件

  • 下载引用，或者引用公共的

    • 从 jquery.com 下载 jQuery 库

      • <script src="/js/jquery.js" ></script>

    • 从 CDN （内容分发网络）中载入 jQuery, 如从 Google 中加载 jQuery

      • <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
      • 百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery

    • 可浏览器查看当前用的版本

      image-20230909135239993

  • 基础语法： $(selector).action()

  • 所有 jQuery 函数位于一个 document ready 函数中：

    • 文档就绪事件：$(document).ready(function(){

      });

  • 注意！！id 的话一定要加上#，标签的话什么都不用加，class 的就是点 .

  • jQuery 实现：

    <script>
    $(document).ready(function(){
        $("#btn").click(function(){
            alert("不加参数显示值：" + $("#mes").text());
            $("#mes").text("加参数就是修改参数(方法重载) - 非文本框用text");
            $("#mes").css("margin-bottom","50px")

            $("#wenben").val("文本框用val");	
            // alert($("#img1").attr("src")); // 显图片路径
            $("#img1").attr("src", "img/bg2.gif"); // 换图片

        });
        $("#btn_more").click(function(){
            $("div").text("baga~");
        })
    });
</script>
</head>
<body>
    <img src="img/bg1.gif" id="img1" />
    <input id="wenben" />
    <p id="mes">雅鹿~</p>
    <button id="btn">改单值、换图片、加文本下内边距</button>

    <div id="fanyi">八嘎</div>
    <div id="fanyi">八嘎</div>
    <div id="fanyi">八嘎</div>
    <button id="btn_more">多个值改变</button>
</body>

  • 拓展功能：

    • 鼠标指向、导航栏获取焦点时变色

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <title>test01练习</title>
        <style>
            #menu{
                /* 消去无序列表前面的黑点 */
                list-style: none; 
            }

            /* 组合选择器，可能会含有多个，如：#menu li .xx div ......
            menu 中的li标签统一修饰 */
            #menu li{
                /* 横向排列设置浮动 */
                float: left;
                /* 作为背景的话，就是以文字为主体，图片会不全 */
                background: url(img/bg1.gif);
                /* 可以选择查看图片本身的大小 */
                width: 103px;
                height: 33px;
                /* 加一点间隔 */
                margin-left: 2px;
                /* 文本居中 */
                text-align: center;
                line-height: 33px; /* 行高和背景图一致就是垂直居中 */
                color: #fff; /* 白f, 黑0 */
                /* font-weight: bold; */
                font-size: 14px;
            }
            #menu .selected{ /* 虽然 .select 就可以，但为了对象选中时有正确的显示，就提高此选择器权重大小，从而提高其内属性的优先级 */
                background: url(img/bg2.gif);
                color: yellow;
                font-weight: bold;
            }
        </style>

        <script>
            $(document).ready(function(){
                $("#menu li").mouseover(function(){
                    // // 光标移入
                    // // $("#menu li").css("background", "url(img/bg2.gif)"); // 表示所有的对象了
                    // 
                    // $(this).css("background", "url(img/bg2.gif)"); // 用this表示当前事件作用的对象
                    // $(this).css("color", "yellow"); //字体颜色也改变
                    // $(this).css("font-weight", "bold"); //字体加粗
                    $(this).addClass("selected"); // 给选中对象增加class,就像是动态在标签后写了class="selected"一样
                })
                $("#menu li").mouseout(function(){
                    $(this).removeClass("selected");
                })
            });
            // 简便方式 —— 单纯变色:
            // $("#img1").mouseover(function(){
            // 	$(this).attr("src","img/bg2.gif")
            // })
            // $("#img1").mouseout(function(){
            // 	$(this).attr("src","img/bg1.gif")
            // })
        </script>
    </head>
    <body>		
        <ul id="menu">
            <li>阿威十八式</li>
            <li>老汉推车</li>
            <li>x出</li>
        </ul>
    </body>
</html>

      • 页面右击检查，在其中，在指向一个对象时，浏览器就会加以解释前端代码，渲染出效果：

        image-20230909154819243

      • 权重：id 为 100；class 为 10；标签为 1。在组合选择器与其他选择器的重合部分，就是相加看权重大小，大的属性覆盖小的

CSS3

  • CSS：https://www.runoob.com/css/css-tutorial.html

  • CSS3：https://www.runoob.com/css3/css3-tutorial.html

  • HTML 4 开始使用的 CSS3

  • 使用方式：

    • 内联样式，元素中使用 style 属性，多个用分号隔开
    • 内部样式表，<head> 中使用 <style> 来包含
      • <style type="text/css">
    • 外部引用，<head> 中使用外部 CSS（最好的方式）
      • <link rel="stylesheet" type="text/css" href="mystyle.css">
      • 属性 stylesheet 定义一个外部加载的样式表

  • 颜色：

    • 背景颜色 background-color
    • 字体颜色 color

  • 选择器

    • 优先级 style > id > 类 > 标签
    • 外部样式表与内部样式表同级，按先后顺序来决定，所以一般都是外部样式表 <link> 放开头
      • 标签
      • 类 class="def" —— .def
      • id="abc" —— #abc
    • 优先级不是按照整个选择器进行覆盖的，而是重复修饰的属性进行优先级的覆盖

  • left、right、top、bottom

    • 外边距 margin，内边距 padding
      • 相对于一个标签来说其 style，外边距是不享有其修饰的，内边距是享有 style 修饰的，不过是纯修饰无法加内容
    • 上下左右，上下 + 左右，顺时针上 + 右 + 下 + 左
posted @   朱呀朱~  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
·  数据库、后端（主要控制层注解的使用场景）
·  el-row + el-col
·  前端三件套
·  今日内容 前端之HTML基础知识
·  HTML介绍
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手