前段笔记

(一)安装vscode

安装：插件

chinese 汉化
open-in-browser  ---> 启用

设置自动保存：文件 —> 自动保存

(二)认识页面结构：

Emmet：?

直接出结构：！

<!-- 注释 快捷键 ctrl + / -->
<!-- 按照h5的标准解析网页 -->
<!DOCTYPE html>
<!-- 根标签 一个网页从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>页面标题-Hello</title>
</head>
<body></body>
</html>

(三)常用标签

1.标题

<!-- h1 -- h6 -->
<!-- 会自带一些默认的样式 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落

<p>段落</p>

3.图片

src=“” 属性

scr 属性名

“” 中的是属性值

scr 指定图片路径：本地 or 网页

alt 当图片无法正常显示时显示出来

" ./ " 根目录

 <!-- 图片 --><!-- src=“” 属性  scr  属性名  “”中的是属性值scr 指定图片路径 ： 本地 or 网页alt 当图片无法正常显示时 显示出来--><!--  ./   根目录 -->   <img src="./1.webp" alt="本地图片描述"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic15.nipic.com%2F20110612%2F7573962_131346185125_2.jpg&refer=http%3A%2F%2Fpic15.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637809590&t=ade1057264d767700dc55683dbb5dbcf˜" alt="网页图片描述">

4.超链接

a标签

href 跳转地址

 <!-- 超链接 -->
<!-- href 跳转地址 -->
<a href="http://www.baidu.com">百度一下、你就知道</a>

5.块 div

 <!-- division  -->
<div>用于放其他标签
</div>

6.列表

1.无序

<!-- 无序列表 -->
<ul><!-- li 标签中的内容 --><li>三国</li><li>水浒</li><li>红楼梦</li>
</ul>

2.有序

 <!-- order 有序列表 -->
<ol><!-- li 标签中的内容 --><li>三国</li><li>水浒</li><li>红楼梦</li>
</ol>

7.文字

<span>span标签一般用于设置文字</span>

实践

(四)元素分类

1.块级元素 display ：block

    特点：独占一行 默认宽度100% 与父元素等宽高度默认是0（由内容撑开）可以设置宽度高度

<div>块级元素</div> div {width: 100px;height: 100px;background-color: red;border-radius: 5px;
}

2.行元素 display ：inline

    不独占一行 从左到右默认宽度内容撑开默认高度0（由内容撑开）设置宽度和高度无效

<span>span</span><span>span</span><span>span</span>
span {width: 100px;height: 100px;background-color: yellow;
}

3.行内块元素 inline-block;

    不独占一行 从左到右默认宽度内容撑开默认高度0（由内容撑开）可以设置宽度和高度

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
button {width: 100px;height: 100px;
}

(五)文档流

文档流：

内联元素（行元素、内块元素):

默认从左到右

默认遇到阻碍 or 宽度不够自动换行，继续按照从左到右的方式布局

块元素 :

独占一行

并按照从上到下的方式布局

–> 称为流式布局

(六)Css简介

前端：

1.Html Hyper Text Markup Language 超文本标记语言

2.css Cascading Style Sheets 层叠样式表

3.JavaScript 交互

1.内联式

<!-- 1.内联式 -->
<!-- 在style中 每个样式用；隔开 -->
<div style="color: red;font-size: 30px;">床前明月光，疑是地上霜，举头望明月，低头思故乡
</div>

2.内嵌式

<!-- 2.内嵌式 -->
<style>.box {font-family: '楷体';font-size: 30px;color: greenyellow;}
</style>
<div class="box">春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</div>

3.外引式

文件夹

网页学习笔记（全）Html+Css+Js+JQuery相关推荐

(008)前端css,js,Jquery,Servlet入门
摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门; 文章目录 1 CSS 1.1 CSS入门以及使用方式 1.2 CSS的选择器(重点) 1.3 css的样式属性 1.3. ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计...
HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~ 临近期末, 你还在为HTML网页设 ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
HTML+CSS+JS+Jquery面试题
HTML+CSS+JS+Jquery面试题 1.CSS中 link 和@import 的区别 Link属于HTML标签,@import是css提供的,只能用来加载css 页面加载时link会同时加载, ...
html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点本 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
HTML5七夕情人节表白网页(圣诞雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤圣诞雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序 ...
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...

网页学习笔记（全）Html+Css+Js+JQuery