首页 前端知识 HTML、CSS、JavaScript学习

HTML、CSS、JavaScript学习

2024-08-12 10:08:46 前端知识 前端哥 244 96 我要收藏

期末考试结束后,我开始了安全web的基础学习,在学习HTML、CSS和JavaScript之前,我总觉得网页开发是一项复杂且深奥的技能,但随着学习的深入,我逐渐认识到,这些其实都是非常基础且必要的技能。 

(学习工具:b站 看名笑,菜鸟教程)

HTML:网页骨架的搭建者
    HTML是网页的基础,它负责网页的结构。学习HTML的过程相对简单,主要是学习各种标签,如标题、段落、链接、图片等。但是,真正掌握HTML需要理解语义化标签、HTML5新特性以及如何合理使用表格和div布局。
CSS:网页的华丽外衣
    CSS是用来描述网页外观和格式的语言。与HTML相比,CSS的学习曲线稍微陡峭一些。需要理解盒模型、布局、浮动、定位等概念。而要掌握CSS,则需要对CSS选择器、CSS3新特性以及动画有深入的了解。
JavaScript:网页的灵魂
    JavaScript负责网页的行为。在学习JavaScript的过程中,我首先被其丰富的API和事件驱动的编程模型所吸引。但随着学习的深入,我逐渐认识到,JavaScript的核心其实是函数、作用域和闭包。此外,对于异步编程和性能优化也需要有深入的理解。

 

一、HTML学习
1. HTML基础
HTML 是网页内容的骨架,它使用各种标签来描述网页内容
常见的 HTML 标签包括 <h1> 到 <h6> (标题)、<p> (段落)、<a> (链接)、<img> (图片) 等
一个基本的 HTML 结构通常包含 <!DOCTYPE html>, <html>, <head> 和 <body>


2. 文本格式化
使用 <h1> 到 <h6> 来表示标题,其中 <h1> 是最大的标题,<h6> 是最小的
使用 <p> 标签来创建段落
使用 <em> 和 <strong> 来表示强调和重要文本


3. 链接
使用 <a> 标签来创建链接。例如:<a href="https://www.example.com">访问网站</a>
可以使用 target="_blank" 属性在新窗口打开链接


4. 图片
使用 <img> 标签来插入图片。例如:<img src="image.jpg" alt="描述图片">
src 属性指定图片的来源,alt 属性提供图片的描述


5. 列表
使用 <ul> 或 <ol> 标签来创建无序或有序列表
无序列表使用 <li> 标签,有序列表使用 <ol> 和 <li>


6. 表单
使用 <form> 标签来创建表单
使用 <input> 标签来创建各种输入字段,如文本、密码、复选框等
使用 <button> 标签来创建按钮


7. CSS样式
HTML 和 CSS 可以结合使用,使网页更美观。通过内联样式、内部样式表或外部样式表将 CSS 应用到 HTML 中
CSS 选择器用于选择要应用样式的 HTML 元素,如 p { color: red; } 将使所有段落文本变为红色


8. JavaScript交互
HTML 可以与 JavaScript 结合,实现动态交互效果。JavaScript 可以直接在 HTML 中编写或放在外部 .js 文件中
DOM (Document Object Model) 是 JavaScript 与 HTML 交互的接口,可以通过它来操作页面元素

 

二、CSS学习

    学习CSS是构建网页样式和布局的关键一步

基本概念:

1. 选择器(Selectors):选择器用于选择HTML元素,并将样式应用于这些元素。例如,div、.class、#id都是选择器

2. 属性(Properties):属性是样式规则的具体设置,控制元素的外观。例如,color、font-size、margin 是属性

3. 值(Values):属性的值是具体的样式设置。例如,red、16px、10px 20px 都是值

4. 盒模型(Box Model):每个HTML元素都被视为一个矩形盒子,包括内容区、内边距、边框和外边距

常用属性:

1. 颜色和背景:
   - color:文本颜色
   - background-color:背景颜色
   - background-image:背景图片

2. 文本样式:
   - font-family:字体
   - font-size:字体大小
   - font-weight:字体粗细
   - text-align:文本对齐方式

3. 布局:
   - width:宽度
   - height:高度
   - margin:外边距
   - padding:内边距
   - border:边框

4. 定位:
   - position:元素定位方式(static, relative, absolute, fixed)
   - top, right, bottom, left:相对于定位父元素的位置

5. 显示和隐藏:
   - display:元素的显示方式(block, inline, none)
   - visibility:元素的可见性

6. 其他:
   - float:元素浮动
   - clear:清除浮动
   - border-radius:边框圆角
   - box-shadow:盒子阴影

 选择器:

1. 基本选择器:
   - 元素选择器:div、p
   - 类选择器:.class
   - ID选择器:#id

2. 组合选择器:
   - 后代选择器:div p
   - 子元素选择器:div > p
   - 相邻兄弟选择器:h2 + p

3. 伪类和伪元素:
   - :hover 鼠标悬停
   - :nth-child(n) 第n个子元素
   - ::before 和 ::after 伪元素

 CSS3 新特性:

1. Flexbox:弹性盒子布局
2. Grid: 网格布局
3. 动画和过渡:@keyframes 和 transition 属性
4. 响应式设计: 使用媒体查询


示例代码:

css
/* 基本样式设置 */
body {
  font-family: "Arial", sans-serif;
  background-color: #f4f4f4;
}

/* 元素选择器 */
h1 {
  color: #333;
}

/* 类选择器 */
.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
}

/* ID选择器 */
#header {
  border-bottom: 1px solid #ccc;
}

/* 盒模型 */
.box {
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  border: 1px solid #ddd;
}

/* 伪类和伪元素 */
a:hover {
  text-decoration: underline;
}

li::before {
  content: "• ";
  color: #333;
}
 


三、javascript

1、变量和数据类型:
变量:在JavaScript中,使用var、let或const关键字声明变量
var name = "Alice";
let age = 25;
const isStudent = true;

数据类型:JavaScript中有多种数据类型,如字符串(String)、数字(Number)、布尔值(Boolean)、对象(Object)、数组(Array)等
var str = "Hello, World!"; // 字符串
var num = 100; // 数字
var bool = true; // 布尔值
var obj = { name: "John", age: 30 }; // 对象
var arr = [1, 2, 3, 4]; // 数组


2、运算符:
加法运算符:
var sum = 5 + 3; // sum 的值为8


比较运算符:
var isEqual = (5 === 5); // isEqual 的值为true


3、条件语句:
if语句:
if (num > 10) {
  console.log("数字大于10");
}


4、循环语句:
for循环:
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 输出数组元素
}


5、函数:
函数定义:
function greet(name) {
  console.log("Hello, " + name);
}


6、数组:
访问数组元素:
console.log(arr[0]); // 输出数组的第一个元素


7、事件处理:
在HTML元素上添加事件监听器,例如点击事件:
<button οnclick="handleClick()">点击我</button>


 

以下是我用这几天所学写的静态百度界面(尝试了很多方法,那个百度的logo就是移不到中间啊啊啊啊啊啊啊啊🥳,持续努力ing😇)

cf125157c3984db9ae24f6606771b10b.png


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>百度一下,你就知道</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #fff;
      margin: 0;
      padding: 0;
    }

    #header {
      text-align: center;
      color: #fff;
    }

    #header img {
      display: block; 
      margin: 0 auto; 
    }

    #nav {
      padding: 10px;
      text-align: center;
      font-size: 14px;
    }

    #login {
      padding: 5px 10px;
      background-color: #3385ff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    #search-container {
      text-align: center;
      margin: 20px auto;
    }

    #search-box {
      padding: 10px;
      width: 500px;
      border: 1px solid #ccc;
      border-radius: 5px;
      outline: none;
      font-size: 16px;
    }

    #search-button {
      padding: 10px 20px;
      background-color: #3385ff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    #hot-search {
      margin-top: 20px;
      text-align: center;
    }

    .hot-search-item {
      text-align: left;
      display: inline-block;
      margin: 5px;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
      border-collapse: separate;
      border-spacing: 30px;
    }

    #footer {
      color: #666565;
      font-size: 12px;
      padding: 10px;
      text-align: center;
      position: fixed;
      bottom: 0;
      width: 100%;
    a:link{color:#666565; text-decoration:none;}
    a:visited{color: #666565;}
    a:hover{color: #666565;}
    a:active{color: #666565;}
    }

    a:link{color:#0b0b0b; text-decoration:none;}
    a:visited{color: #0b0b0b ;}
    a:hover{color: #3265f0;}
    a:active{color: #d54040;}

  </style>
</head>
<body>

<div id="nav">
  <span style="float: left;">
  <a href=" ">新闻</a >   
  <a href="#">hao123</a >   
  <a href="#">地图</a >   
  <a href="#">贴吧</a >    
  <a href="#">视频</a >    
  <a href="#">图片</a >    
  <a href=" ">网盘</a >    
  <a href="#">文库</a >    
  <a href="#">更多</a >  
  </span>
  <span style="float: right;">
    <a href="#">设置</a >  
    <button id="login">登录</button>
  </span>
</div>

<div id="header">
    < img src="bai百度.jpg" width="300" hight="300" alt="logo"/>
</div>  

<div id="search-container">
  <input type="text" id="search-box" value="百度一下,你就知道">
  <button id="search-button" οnclick="searchBaidu()">百度一下</button>

  <div id="hot-search">
    <table class="hot-search-item">
        <h3>百度热搜:</h3>
        <tr>
          <td >南方雨雪天气如约而至</td>
          <td >在天津不吃天津菜</td>
        </tr>
        <tr>
          <td >有时候觉得这个世界真的挺奇妙的</td>
          <td >龙年大吉啊啊啊</td>
        </tr>
        <tr>
          <td>上大学哪有不疯的!!</td>
          <td>当离别开出花~~~</td>
        </tr>
    </table>
  </div>

</div>

<div id="footer">
    <a href="#">关于百度</a > 
    <a href="#">About Baidu</a >
    <a href="#">使用百度前必读</a >    
    <a href="#">帮助中心</a >    
    <a href="#">企业推广</a >    
    <a href="#">京公网安备00000000000号</a >    
    <a href="#">京ICP证202401号</a >
    <span>互联网新闻信息服务许可证13110000000 网络文化经营许可证: 京网文〔2024〕1234-111号</span>
</div>

<script>
  function searchBaidu() {
    var searchInput = document.getElementById('search-box');
    var searchTerm = searchInput.value;
    
    console.log('搜索:', searchTerm);
  }
</script>

</body>
</html>

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15315.html
标签
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!