HTML、CSS 和 JavaScript 基础知识笔记

 

一~七，HTML
八~ 十三，CSS
十四~二十二，JavaScript
二十三，总结与后续学习建议

一、web前端介绍
三件套：HTML-页面结构，CSS-页面样式和布局，Javascipt交互和功能
二、安装VScode开发环境
插件：Chinese (Simplified)+HTML css suport(css 快捷)+live server（实时显示web页面变化，不同步的话，把自动保存关闭）+Auto Rename Tag(修改标签时，对配对标签同时修改)
三、HTML简介及环境搭建
HTML标签：控制文本格式
HTML文件结构：
<!DOCTYPE html> --》告诉浏览器文件格式
<html> --》文件开始/结束
<head>--》文档头部，设置文档的元信息
...
...
<head>
<body>--》实际显示在浏览器的内容
...
...
<body>
</html>
示例demo.html:
创建->生成.html结构(快速生成，输入感叹号)->右击鼠标（live server）
四、常用文本标签

image

image

  • 标题标签：6种 h1、h2...h6
  • 段落标签：p(page)（段落）、b(bold)（加粗）、i(italic)（斜体）、u(underline)（下划线）
  • 有序列表与无序列表：ul li ;ol li
  • 表格标签：table tr(table row) td(table data) th(table header)

五、HTML属性

定义、语法：

image

适合大多数HTML元素的属性：

image

<a href="https:/.../..." target="_blank">这是一个超链接 </a>

  href：hyper reference ,超链接

  target:打开方式，4种

hr:换行

  <img src="https:/.../..." alt="" width="200" height="100">

   img:嵌入图像，实现图像的显示

六、html区块-行内元素和块元素

块元素：

image

最常用的两个标签：

div:块表签，没有任何语义，仅用于组织内容，创建结构

 

.nav #nav :快速生成同class，同id

span:行内元素，用于内联、样式化文本，给文本的一部分应用样式或标记，通常与css，JS一起使用

七、HTML表单

表单：

image

实现：

image

 

posted @ 2025-11-05 16:39  麦麦提敏  阅读(13)  评论(0)    收藏  举报