4.10~4.16——html，css，js

Java练习生小黄

已于 2023-05-27 17:31:56 修改

阅读量95

点赞数

文章标签： html 前端 html5

于 2023-04-15 17:36:06 首次发布

本文链接：https://blog.csdn.net/weixin_48188309/article/details/130169651

版权

1.html

1.1 html是什么，html5是什么？

html是超文本标记语言，是用来设计静态网页的

html5是html最新修订的版本，由万维网联盟修订，设计目的是为了支持移动端多媒体。

1.2 常用的html标签

html标签从结构上来看可分为单标签和双标签，按用途来分可分为块标签和行标签。

常用的html标签：

块标签：div，h1-h6，ul，ol，dl，li，p，table，form

行标签：span，a，em，strong，input，img

注：input和img是行内块标签

块标签独自战领一行，可以进行宽高的设置

行标签在一行内显示，不可以进行宽高的设置

1.3 表格标签

table 表格标签的作用：用来展示数据，规则排列，后台系统使用较多

注：不再使用表格进行布局，对搜索引擎不友好

常用属性：

align：水平方向对齐

cellspacing：单元格之间的间隙

cellpadding：单元格内的间距

rowspan：行合并

colspan：列合并

1.4 表单标签

form表单标签用来收集用户信息，是浏览器和用户之间的桥梁

在html中，form标签被用来定义表单域，即创建一个表单，用来实现用户信息的收集和传递，form中的所有信息都会被传递给服务器。

input控件标签：

radio如何实现单选：可以给它们添加相同的name属性把他们关联起来，实现单选。

lable标签：

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

1. 在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）

2. 格式： <label for="关联控件的id" form="所属表单id列表">

select标签：

selec标签是下拉菜单标签，select标签和option标签一起使用

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注：在option 中定义selected =" selected "时，当前项即为默认选中项。

2. Css

2.1 认识Css

css是层叠样式表，如果说html是骨架，那么css就是衣服，起到装饰的作用。

css的优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

2.2 引入css的方式

1. 外联式：

链接式：<link rel="stylesheet" href="./index.css">

导入式：@import url('./index.css') @import规则必须在CSS文档的开头。

2. 内联式：在同一文件的head中加入style标签

3. 行内样式：在标签内部加入style属性

2.3 选择器

基本的选择器类型：

标签选择器，类选择器，id选择器

优先级：id选择器>类选择器>标签选择器，！importment可以提升优先级

伪类选择器：

当该动作触发时才会起效果的选择器

交集选择器：

交集选择器由两个选择器构成，其中第一个必须为标签选择器，第二个必须为class选择器，两个选择器之间不能有空格，如h3.special。

并集选择器：

并集选择器是各个选择器通过逗号连接完成

后代选择器：

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

子元素选择器：

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

属性选择器：

只要具备某个属性，或者属性=属性值，就会被选中执行某些操作。

语法[属性] {}

2.4 盒子模型和display

盒子模型的组成包括：外边距，边框，内边距，内容

box-sizing：可以设置盒子的组成

display可以设置元素的形态，常用的有none，inline，block，inline-block

2.5 定位

定位是靠position属性进行操作的，可以控制元素的位置

分为四种：相对定位relative，绝对定位absolute，固定定位fixed，默认static

相对定位相对于自己定位

绝对定位相对于最近的设置了定位的父级元素定位，若没有，相对于body元素

固定定位相对于窗口定位，即使窗口滚动，它也不会变

注意：相对定位不脱离文档流，绝对定位和固定定位脱离文档流

z-index属性设置z轴的优先级，默认为0

2.6 浮动

浮动会让一个元素靠左或者靠右布局，后面的兄弟元素浮动会跟在前面的后面

行内元素会变成块元素，快内元素也会失去独占一行的特征

浮动会脱离文档流，后续元素会被覆盖，文字会变成同行

当父级元素没有设置高度时，子元素全部浮动，父容器的高度会塌陷为0

消除浮动影响的2种方式：

1.父级元素加overflow属性

2.在子元素里加一个元素使用clear属性（可以使用伪元素）

2.7 弹性布局

在父级属性上面加flex属性会使所有的子元素成为容器成员，具备弹性布局特征。

父级容器默认有两个轴，水平的主轴，垂直的交叉轴

主元素常用属性：

flex-direction:决定主轴的方向

flex-wrap：换行不换行

justify-content：定义了子元素在主轴上的对齐方式

align-items：定义了项目在交叉轴上的对齐方式

align-content：定义了多行项目在交叉轴上的对齐方式，单行不起作用

子元素常用属性：

order：定义了子元素的排列方式，数值越大越靠后，默认为0

flex-grow：定义了子元素的放大比例，默认为0；

flex-shrink：定义了子元素的缩小比例，默认为1；

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex：是flex-grow，flex-shrink，flex-basis的组合属性，他的数值按照顺序写

algin-self：允许单个项目在交叉轴上有与其他项目不同的布局方式，会覆盖algin-items

3. js

3.1 什么是js

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)

3.2 js的引入方式和变量

内部脚本：将JS代码定义在html页面的<script></script>中。
建议：将<script></script>放在<body>的底部。
外部脚本：将JS代码定义在js文件中，通过<script></script>标签引入。
注意：通过<script>标签引入外部js文件时，标签不可以自闭合。

JS是弱类型语言，变量可以存放不同类型的值。

var：声明变量，全局作用域/函数作用域，允许重复声明。
let：声明变量，块级作用域，不允许重复声明。
const：声明常量，一旦声明，常量的值不能改变。

value 的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

3.3 js的对象

Array：JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
JSON：JavaScript Object Notation，JavaScript对象标记法。JSON 是通过 JavaScript 对象标记法书写的文本。

BOM：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。

DOM：Document Object Model ，文档对象模型。将标记语言的各个组成部分封装为对应的对象。

3.4 常见的事件

1、鼠标事件：

mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件，不支持冒泡

mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件，不支持冒泡

contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文”菜单键时触发。

mousedown：按下鼠标键时触发。

2、键盘事件：

keydown：按下键盘时触发，当键盘按下任何一个键的时候发生（包括系统键）

keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。

keyup：松开键盘时触发该事件。

3、表单事件：

（1）input事件当<input>、<select>、<textarea>的值发生变化时触发。

（2）change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。

（3）焦点事件 focus：元素节点获得焦点后触发，该事件不会冒泡。blur：元素节点失去焦点后触发，该事件不会冒泡。

4、其它事件：load事件、DOMContentLoaded 事件、unload卸载事件、scroll事件、resize事件

Java练习生小黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
4.10~4.16——html，css，js

交集选择器由两个选择器构成，其中第一个必须为标签选择器，第二个必须为class选择器，两个选择器之间不能有空格，如h3.special。在html中，form标签被用来定义表单域，即创建一个表单，用来实现用户信息的收集和传递，form中的所有信息都会被传递给服务器。后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。优先级：id选择器>类选择器>标签选择器，！块标签：div，h1-h6，ul，ol，dl，li，p，table，form。
复制链接

扫一扫