web前端：初识HTML、JavaScript、CSS

最新推荐文章于 2024-06-16 15:31:20 发布

mr.ocean

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量276

点赞数

分类专栏：基础文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/qq_45020131/article/details/104676500

版权

基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇blog应该算是复习资料吧，虽然笔记整理的有点乱。

接下来是一段HTML代码, 我的笔记都是根据这部分代码来写的

<!DOCTYPE html>
<html lang="zh">
<head>
    <link rel="stylesheet" href="./demo.css">
    <style> <!-- style样式>
        .message{
            color:#0f0;
        }
    </style>
    <meta charset="UTF-8">
    <title>Python crawler</title>
</head>
<script> <!-- 执行js代码>
    function hello(){
        alert("即将跳转到百度窗口");
        window.location.href="http://www.baidu.com";  <!--将当前窗口位置跳转到百度>
    }

</script>

<body onload="hello()">  <!--执行js函数-->
<h1 id="msg" style="color:red;">Python 爬虫教程</h1>
<h2 class="msg-1">2级标题</h2>
<p>段落描述  <strong>强调内容</strong></p>  <!-- 标签嵌套 !-->
<b class="message">加粗文字</b>
<i>倾斜文字</i>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<p>target='_blank'是在新窗口打开这个链接</p>

<img src="https://cms-bucket.ws.126.net/2020/0224/c876b611j00q673rx007dc000go006yc.jpg?imageView&thumbnail=600y250" alt="it人才"><!-- src可以是本地的图片，也可以是网络上的图片地址!-->


<table border="1">
    <tr>               <!--tr*4<td*3 然后按下table键就变成每个4行3列的表格-->
        <td>1&lt;3</td>
        <td>a&nbsp;&nbsp;&nbsp;&nbsp;b</td>
        <td>3&gt;2</td>
    </tr>
    <tr>
        <td>&copy;</td>
        <td>&amp;</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td class="body">8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

<!-- 无序标签 ul-->
<ul>
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>
<!-- 表单提交 -->
<form action="">
    <input type="text">
    <select name="" id=""> <!-- 选项-->
        <option value="">qqq</option>
        <option value="">mmm</option>
        <option value="">nnn</option>
        <option value="">bbb</option>
    </select>
    <input type="submit" value="提交">
</form>

</body>
</html>

网页运行效果

在这里插入图片描述

HTML

创建是一个4行3列的表格快捷键： <table>tr*4<td*3然后按下tab键

i标签：倾斜字体。
ul：无序标签
b标签：加粗字体
strong标签：强调字体
img：是自闭标签，在src中放入图片地址，可以是本地地址，也可以是网络地址
form：表单
li：定义列表项目。
select：下拉列表
option：一般嵌套在select标签中，作为下拉列表的选项
input：输入信息标签 # 按钮
link标签用法：

符号

大于符号： &gt;
小于符号: &lt;
版权符号 ©: &copy;
空格： &nbsp;
&(and符号): &amp;

CSS

使用css样式
可以在head标签下定义一个style样式标签，在标签中写入样式，就类似与python的全局变量，其他要引用时，
只需要在标签中使用class='样式名'就可以了

一般来说，网页会有一个专门的css文件，用来控制多个网页的样式，这个时候，其他的HTMML文本只需要使用
link标签就可以引用这个css文件，使用里面的样式， 相当于python中的import
link标签用法：<link rel="stylesheet" href="./demo.css">  # href中填入文件地址

JavaScript

javaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
JS不需要安装运行环境，简单来说，它的运行环境就是浏览器。
js还可以做一些交互式的使用，比如跳转网页,做超链接等等

<script> <!-- 执行js代码>
    function hello(){
        alert("即将跳转到百度窗口");
        window.location.href="http://www.baidu.com";  <!--将当前窗口位置跳转到百度>
    }
</script>
写完js代码之后，可以再body标签中使用 onload='函数名'即可调用 <body onload='hello()'></body>， 加入这段语句之后，网页就会跳转到百度窗口

在这里插入图片描述
点击确定之后则会跳转到百度首页，完成交互式操作

思维导图

这里做了一个简单的思维导图，以便后续能够复习
在这里插入图片描述

mr.ocean

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端：初识HTML、JavaScript、CSS

这篇blog应该算是复习资料吧，虽然笔记整理的有点乱。接下来是一段HTML代码, 我的笔记都是根据这部分代码来写的<!DOCTYPE html><html lang="zh"><head> <link rel="stylesheet" href="./demo.css"> <style> <!-- style...
复制链接

扫一扫

专栏目录