我要学习HTML_用于引用样式内部的标签是-CSDN博客

本文链接：https://blog.csdn.net/han_jr123/article/details/122609996

1、<head>标签

<title>网页标签名称</title>

2、<script>标签

用于定义客户端脚本，比如javascript。

既可以包含脚本语句，也可以通过src属性指向外部脚本文件。

当碰到script这个标签，浏览器会自动运行js解析器。

如果想在<div>标签里输入<script>，可以利用&lt &gt

假如内部的代码没有位于某个函数中，那么这些代码会在页面加载时立即执行！

绝对地址引入jquery

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

引入本地的js文件

 <script type="text/javascript" src="../js/simulator.js"></script>

3、jquery的$(document).ready(function() {})

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件

类似写法：

1、$().ready(function() {})

2、$(function() {})

3、function init() {}:$(init());

4、js定义函数

myFunction(5);
function myFunction(y) {
    return y * y;
}

//定义
    var add = function(a,b){
        return a+b;
    }
    //调用函数
    document.write(add(50,20));

匿名函数(不写方法名)

function(arg){ //arg则是匿名函数的参数
//....
}

匿名函数得调用

(function(arg){

　　//...

})(param) 　　//param就是传入的实参（传入的参数值）

所以，(function($){})(jQuery)，就是定义了一个匿名函数function($){}，函数要求传入得类型是jQuery对象。然后调用这个函数，传入参数jQuery。

等价于

function f($) {};

f(jQuery);

注意：这里jquery作为实参而不是使用$是为了避免和其他将$作为标志的函数冲突，$作为形参，只作用于函数内部，不会对外部产生影响。

$是jQuery得一种表现形式。

5、$(function() {})和(function($){})(jQuery)的区别

jQuery(function(){...});用于存放操作DOM对象的代码，执行其中代码时DOM对象已经存在。不可用于存放开发插件的代码，因为jQuery对象没有得到传递，外部通过jQuery.method也调用不了其中的方法（函数）。

(function(){...}(jQuery);用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码，请小心使用。
简单理解是(function($){...})(jQuery)用来定义一些需要预先定义好的函数

6、jQuery的扩展

1.$.func1=function(){}

2.$.extend({func1:function(){}})

$拓展的方法是静态方法，可以使用$直接调用，其拓展的方式有两种，一般使用$.extend({})。

7、函数的arguments对象

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

8、$.extend()

用于将一个或多个对象的内容合并到目标对象。

1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

9、定义全局变量

1、在js的function外定义一个变量

var name='测试';

function XX(){

alert(name);

}

2、不使用var，直接给定义变量，隐式的声明了全局变量。这种方法，即使该变量是在一个function内，当该function被执行后它变成了全局变量 ---- 但是function不执行它就不被其他function知道，所以最好定义在function外。

name='测试';

function XX(){

alert(name);

}

3、使用window.变量名定义为全局变量，但是注意：调用时候建议写上window.变量名，当然也可以不写；我们常用的document.getXXX的document对象就是window的。

window.name='测试';

function XX(){

alert(window.name);

}

10、jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

jQuery 中所有选择器都以美元符号开头：$()。

1、元素选择器基于元素名选取元素

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

2、#id选择器

3、.class选择器

4、组选择器：被分组的选择器可以分享相同的声明，用逗号将需要分组的选择器分开

5、后代选择器

6、通配符选择器 *

7、span.item ：有item类名的span标签

8、 $(".clssname[data-id='aaa']") 选取类名=clssname，并且有属性=aaa得标签

9、更多实例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素

11、jQuery事件-表单事件

1、submit()方法

当提交表单时，会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

触发被选元素的 submit 事件：

$(selector).submit()尝试一下

添加函数到 submit 事件：

$(selector).submit(function)尝试一下

12、jQuery的html/css方法

1、添加元素

before()

在被选元素前插入内容

after()

在被选元素后插入内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

13、HTML-label标签（form表单）

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male">

如果不用for属性，也可以这样：

<label>Male<input type="radio" name="sex" id="male" value="male"></label>

14、HTML事件属性

HTML 事件 | 菜鸟教程

15、HTML添加样式的三种方式

1、内联样式：直接在div标签内部使用style属性添加样式，一般应用于个别元素展示特殊样式时

2、内部样式表：在head部分使用style标签定义内部样式表，一般应用于单个文件

3、外部样式表：在head头部使用link标签进行样式外部引用，这种采用页面与样式分离的方式，适合应用于多个页面时。

优先级从高到低

16、CSS-display属性

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。（CSS2.1 新增的值）

17、内联元素inline和块级元素block

1、内联元素的显示，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性。

特点：1、和其他元素都在一行上；2、高度、行高和顶以及底边距都不可改变；3、宽度就是它的文字或图片的宽度，不可改变(可通过width:30%的样式改变在父div中的宽度)。4、内联元素只能容纳文本或者其他内联元素

a – 锚点 br – 换行 em – 强调 i– 斜体 img – 图片 input – 输入框 label – 表格标签

select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块

strong – 粗体强调 var – 定义变量 textarea– 多行文本输入框

2、块级元素block在浏览器显示时，通常会以新行来开始（和结束）。相邻的块级元素将会在不同行显示。

特点：1、总是在新行上开始；2、高度，行高以及外边距和内边距都可控制；3、宽度缺省是它的容器的100%，除非设定一个宽度。4、它可以容纳内联元素和其他块元素。

div - 常用块级容器，也是css layout的主要标签 form - 交互表单 hr - 水平分隔线

h1 - 大标题。。。 p - 段落 table - 表格 ol - 排序表单 ul - 非排序列表 li-是块状

3、inline-block内联块元素：

img、input、button？？？

有说法，div设置float=left后，类似变成了inline-block，实际还是block

检查方式：var aaa = $("#a").css("display");

但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于：display:inline-block;可以改变宽高。

宽度变成实际宽度，不再是块元素的100%

有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。

18、Font Awesome 图标

一套绝佳的图标字体库和CSS框架。

提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<i class="fa fa-car"></i>

<i class="fa fa-car" style="font-size:48px;"></i>

<i class="fa fa-car" style="font-size:60px;color:red;"></i>

</body>

</html>

Font Awesome 图标 | 菜鸟教程

19、换行同行小技巧

两种方式：内联(不能控制宽度)或者浮动（可以控制宽度相同）

1、使用float，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

2、如果两个div的width超过父的div宽度，那么会换行

3、overflow 属性规定当内容溢出元素框时发生的事情。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

20、hover的css和jquery事件两种使用方式

21、CSS text-align 属性

text-align属性指定元素文本的水平对齐方式。

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

22、jQuery-DOM操作-遍历节点-find()方法

.find(selector)
此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。
记住：使用此方法必须得传入选择器表达式参数，不然是获取不到任何元素的，也就失去了使用此方法的意义了。

$("#level_one").find("*").length

找到所有子孙元素的个数

类似：$("#level_one *").length;

提示：如需返回所有的后代元素，请使用 "*" 选择器。

23、Layer

Web 弹出层组件

参考文档：layer 弹出层组件 - jQuery 弹出层插件

layer弹层组件开发文档 - Layui

24、jQuery-DOM操作-获取内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值

需要括号（），val()不是value()

25、CSS ul list-style-type 属性

设置列表项标记的类型

ul
{
list-style-type:none; //去掉列表前缀

}

案例：CSS list-style-type 属性 | 菜鸟教程

26、CSS-使<a>的可点击区域由文字变成区域块

设置<a>的display:block，只有块元素可以改变宽度！再设置宽度width:70px或者50%

27、CSS text-decoration 属性

使用案例：去除ul的下划线。

属性规定添加到文本的修饰。下划线、上划线、删除线等、或者颜色、线的形状

text-decoration: underline wavy red;       /*红色波浪形下划线*/

none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。浏览器不会显示

solid	默认值。线条将显示为单线。
double	线条将显示为双线。
dotted	线条将显示为点状线。
dashed	线条将显示为虚线。
wavy	线条将显示为波浪线。