HTML/CSS+JavaScript+jQuery

浮生未歇l

已于 2022-08-28 20:18:29 修改

阅读量1k

点赞数 1

文章标签： javascript html css

于 2022-08-28 19:52:15 首次发布

本文链接：https://blog.youkuaiyun.com/smileljd/article/details/126489930

版权

这篇博客详细介绍了HTML/CSS/JavaScript/jQuery的基础知识，包括HTML标签、CSS样式使用、JavaScript的DOM操作和事件处理，以及jQuery的选择器和函数。重点讲解了CSS的三种使用样式、基本选择器和盒子模型，JavaScript的数据类型、事件和正则表达式，以及jQuery的选择器和事件处理。博主在学习过程中体会到理论与实践结合的重要性，并计划加强理解和实践能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML/CSS

html基础

HTML 是用来描述网页的一种是超文本标记语言。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的。
HTML 图像是通过 <img> 标签进行定义的。

<!--html常用标签-->

<html>描述网页</html>
<body>可见的页面内容</body>
<h1>标题</h1>
<p>段落</p>
<span>不换行的标签</span>
<br />//用于换行
<div>可换行的标签</div>
<!-- hr:产生一条横线的标签,可以设置属性值 -->
<hr width="400px" color="blue">

<!--列表 -->
<!-- ul 无序列表 ，前面有圆点-->
<ul>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
</ul>

<!-- ol有序列表 ，默认数字为序号-->
<ol>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
</ol>



<!--  html文本修饰标签-->
		font标签----用于设置文本的字体样式
        b标签----文本加粗
        i标签----文本斜体
        s标签----添加删除线
        u标签-----添加下划线
        sup标签----添加上标
        sub标签----添加下标
        strong标签----文本加粗
        big标签----元素中的内容在显示时比周围的文本大一个字号
        small标签-----元素中的内容在显示时比周围的文本小一个字号


<!-- 图片的标签 <img src="" alt=""> -->
    width:宽，height:高，title：标题，src="图片的地址"，alt：当图片没有正常加载时，则显示alt的文字说明.



<!-- 超链接   <a href=""></a>   -->

<!-- a标签：超链接标签，点击超链接标签，可以让页面跳转到新的资源路径，网页内容被更新-->
		 href属性：指定跳转的url地址（相对地址，绝对地址）
		 **url:统一资源定位器（网络上可以访问的资源路径
		 target属性：_blank:打开的内容显示在一个新的窗口，_self:打开的内容显示在当前窗口,如下：
        <a href="www.baidu.com" target="_blank">百度首页</a>
		<a href="www.baidu.com" target="_self">百度首页</a>
<!-- 设置顶部标志：定义锚点 -->
			<a name="top">顶部区域</a>
<!-- 通过锚点的名字top，跳转到锚点所在的位置 -->
			<a href="#top">回到顶部</a> 


<!-- 表格 -->
        table标签：用于实现表格
		caption：设置表格名字
		tr：（table row）：行
	    td:列（单元格）
	    border:边框
	    width：宽度
	    cellpadding="0":设置文本内容和表格边框的宽度
		cellspacing="0":设置单元格之间的宽度

css基础

css的三种使用样式

内联样式：在标签内通过style的属性进行使用，如：<p style="color:red;">内联样式</p>
内部样式：在head标签中通过<style>css语言</style>进行使用，如：<head><style>body {background-color: powderblue;}</style></head>
外部样式：通过在head标签中，使用<link href="xx.css"标签，引入css文件，进行使用：
<link href="xx.css" type="text/css" rel="stylesheet" />

css的基本选择器

标签选择器：标签名{样式}，如：标签选择器（div{}），选择标签为div的所有元素
class（类）选择器：.className{样式}，如：类选择器（.one），选择类名为one的所有元素
id选择器：#idName{样式} 如：id选择器（#box{}），选择id为box的元素
分类选择器：元素选择器.className/idName
分组选择器：多个选择器同用一个样式，如x,y{样式}，选择x、y的所有元素，如：在html中为多个标签元素设置同一个样式时，使用该选择器
派生选择器：找子标签（嵌套在内部的第一层符合条件的标签元素）:选择器>选择器{}，子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素找子孙标签（嵌套在内部的所有符合条件的标签元素）：选择器选择器{}，后代选择器（#box div），选择id为box元素内部所有的div元素相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
伪类选择器：给html中一个标签元素的鼠标滑过的状态来设置样式,如：没有被访问过xx:link{},访问过后xx:visited{样式},悬停时xx:hover{样式},鼠标摁住时xx:active{样式},伪类：xx:foucs{样式}，获取焦点的时候，设置的样式在a标签中使用按顺序来使用，xx:hover{}可以应用在其他标签上