HTML CSS JS-CSDN博客

本文链接：https://blog.csdn.net/weixin_45997718/article/details/125527918

本文介绍了HTML的基本标签，如标题、段落、表格和表单，以及CSS的使用方式，包括行内样式、内部样式和外部样式。还涉及了JavaScript的变量定义、函数及事件编程。内容涵盖网页布局、样式控制和交互功能实现。

摘要由CSDN通过智能技术生成

HTML

标题标签:h1-h6:从大到小渲染

水平线标签:<hr/>

段落标签:<p>

滚动标签:marque:direction(滚动方向),scrollamount(滚动速度),behavior(滚动方式),scrolldelay:滚动的时间间隔,单位是毫秒值

dl dt dd:描述一个定义列表中的条目,带有项目和描述的描述列表

有序列表:ol,列表项:li 属性type:列表项前面的标记类型,默认值是1

无序列表:ul,列表项:li

上下标签:sup和sub

原样输出:pre

斜体标签:em或者i

加粗标签:strong或者b

转义字符:

©版权

®注册商标

<小于

>大于

超链接:a标签:

        常见属性:href="" url:链接地址 URL组成:协议+域名+端口号/具体的服务器路径地址

                target属性:_self:当前窗口打开(默认) _blank:新的窗口打开

使用:1)普通跳转链接

2)锚链接:

在同一页面下使用:a):创建一个书签:<a name=""></a>;

                                                       b)在当前页面的其他位置创建一个跳转连接,从当前位置跳转到a指定的位置即可:<a href="#跳转标记中的name属性的属性值"></a>

在不同页面下使用:a)在另一个html页面中的某个位置设置书签:<a name=""></a>;

b)在当前页面中,直接跳转到连接的地址:<a href="另一个页面的地址#name属性的属性值"></a>

表格标签:

border:边框大小不指定不会显示边框

align:对其方式

cellspacing:设置单元格和边框之间的间隙,0就是没有空隙(合并)

caption:当前表格的标题

tr:行标签

th:表头内容,自动居中,适当加粗(默认)

td:普通单元格,必须设置对其方式才能居中,默认左对齐

合并单元格:

合并行:rowspan="所占单元格的个数"

合并列:colspan="所占单元格的个数"

表单标签:form

属性:action="提交的后台地址" method="提交方式"

get/post提交有什么区别:

get:默认提交方式:将数据提交至地址栏上,密码一铭文显示不安全,而且地址栏不能无限制的提交,有大小限制

post:不会讲数据提交至地址栏上,相对get来说安全一点,提交数据没有大小限制,适合私密数据提交

常见的表单项:

        <input type="text"/>文本输入框
       <input type="password"/>密码输入框
       <input type="radio"/>单选按钮
       <input type="checkbox"/>复选框
       <input type="date"/>提供的日期组件

<input type="hidden"/>隐藏域:没有任何效果,但会携带数据到后台地址上
       <input type="email"/>当用户提交的时候，填写的内容必须符合邮箱的格式@
       邮箱，一般可以指定是文本输入框，type="text",后期可以提供“正则表达式”进行校验
       <input type="hidden"/>隐藏域：没有任何效果，但是会携带数据到后台地址上
       <input type="file"/>文件上传
       <input type="button"/>普通按钮，必须给定value属性，否则没有显示
       <input type="submit" value="注册/登录"/>特殊提交按钮，将信息提交至action指定地址
       <input type="reset" value="清空/重置"/>将当前所有的表单项内容清空掉
       <select> 下拉菜单
           <option>下列选项

视频标签:

controls="controls":固定属性,必须给这个属性
<body>
		<video width="800" height="800" controls="controls">
			
			<source src="mp4/01_晨写_今日内容.mp4" type="video/mp4">
			
		</video>
	</body>

CSS

CSS:Cascading Style Sheet 关联层叠样式表

CSS的使用方式:

1)行内样式:

在每一个html标签中都有一个style属性,专门设置样式 style="样式属性":属性值

2)内部样式:

在header标签体中,书写style标签,书写css代码

3)外部样式:

在css文件夹在定义好css文件,将css文件下的css文件导入到当前html页面中

当前页面:<link rel="stylesheet" href="css/1.css"> rel:固定必须写,关联层叠样式表

选择器:

标签选择器:div{}

class选择器:.c1{}

id选择器:#id名{}

通配符选择器:*{}

优先级:id选择器>class选择器>标签选择器

伪类选择器:描述的是一个元素的经历状态

link:鼠标未经过元素的状态

visited:鼠标访问过的状态

hover:鼠标经过状态

active:鼠标点击但没松开状态

注意:

        hover必须在css定义中的link和visited之后，才能生效.

        active必须在css定义中的hover之后才能生效

文本样式:

text-align:文本对齐方式

text-decoracton:underline下划线

        text-transform:文本转换:指定文本的大小写

text-indent:文本缩进

text-shadow:文本阴影

font-family:字体

letter-spacing:字符间距

line-height:行高

list-style-type:url;指定列表项前面的标记类型

边框样式:

border-collapse:将单元格与边框线合并

border:边框宽度颜色样式

border-radius:圆角边框:指定像素大小

background-repeat:背景图片重复

background-image:背景图片

background-position:设置图片的起始位置默认(left top;)

浮动:

float:将浮动框向左或者向右移动,一旦该浮动框移动了,就脱落了当前的文档流,表现得想这个div块不存在一样,随着其他的框也相应的改变

不浮动属性:clear (clear:both;)

display:inline:所有的列表同一行

js使用方式:

1)内部方式:在head标签体中指定script标签,书写js代码

2)外部方式:在js文件夹下创建js代码,在当前某个html页面中导入js文件,必须要有开始,结束标签. <script src="js文件路径地址></script>

定义变量:

        使用var来定义,var可以省略,定义一个变量可以重复定义,后面的值会将前面的值覆盖掉,var可以定义任意数据类型

查看变量的数据类型:typeOf(),无论是整数还是小数,都是number类型---自动提升为js内置对象

常用函数:

document.write("");向浏览器输出的内容

console.log("");在浏览器的控制台输出日志,使用控制台对象

alert("");弹出一个提示框

事件编程三要素:

1.事件源

2.编写监听事件

3.绑定事件监听器

DOM操作:

1.docuement.getElementById("id属性值") ,需要在标签中给的id属性值

        2:document.getElementsByName(页面中所有同名的name属性值)

        3:document.getElementsByClassName(页面中所有同名的class属性值)

        4:document.getElementsByTagName(页面中所有同名的标签名称)

获取它的value属性:获取内容

变量名.value;