前端基础知识(一){HTML.CSS.JavaScript}
本文主要讲解前端基础知识即大部分HTML标签和JS的含义及其使用,还有小部分内容的css
前端主要分为:
--HTML:
标签具有模式特点:
HTML是一种标记语言,用于构建网页的结构和内容.它通过一系列标签(如<html>, <head>, <body>, <h1>-<h6>, <p>, <img>, <a>, <div>, <span>等)来描述网页的不同部分和元素,形成一种层次化的文档结构.
--CSS:
修改标签的特点:
CSS负责网页的视觉呈现和布局.它允许开发者通过选择器(如标签名,类名,ID等)来指定HTML标签的样式特征,如字体,颜色,大小,间距,位置,背景,边框,动画效果等.
--JavaScript:
动态交互与功能实现：
JavaScript是一种脚本语言,它在网页开发中承担着实现动态交互,增强用户体验和提供高级功能的角色.
JavaScript可以直接操作HTML文档对象模型(DOM),即浏览器解析HTML后形成的内存中的对象树,从而动态地修改,添加,删除HTML标签及其属性,甚至创建全新的标签结构.
HTML:
块级元素与行内元素:
块级标签与行内标签是HTML中两种基本的元素类型,其文档布局和呈现方面有着显著的区别.
块级元素:
常见的块级元素包括<div>,<p>,<h1>至<h6>(各级标题),<ul>,<ol>,<li>(列表项),<table>,<form>等.
显示方式及其样式:
- 无论标签内有多少内容,块级标签在默认情况下占据整行空间,
- 块级标签可以通过
css中display转换为行内元素或行内块级, - 块级标签可以通过
css设置内外边距(margin和padding)和高宽(width和height),同时还可以通过顶部,底部,左右(top,bottom,left,right)与内外边距和高宽的结合实现单独控制某一方向的样式,列如:margin-top: 0;可以使顶部外边距为0px,其他方向不作改变, - 块级标签如果不进行高宽设置,其会继承父级标签的高宽,即
width:100%;height:100%,
包含:
- 块级元素可以包含其他块级元素,行内元素以及行内块级元素,形成多层次的嵌套结构.简称套娃
行内元素:
常见的行内元素包括<span>,<a>,<strong>,<em>,<img>,<input>,<label>等.
显示方式及其样式:
- 行内标签内容有多少就占有多大空间,仅在行内无法容纳标签内容时才会换行,
- 行内标签可以通过
css中display转换为块级元素或行内块级, - 行内标签的高宽由其内容决定,不能之际设置固定的高宽,但是能够设置其内外边距,通常情况下,上下边距不会产生可见效果,但实际上可能会影响行间距
行内块级元素:
除了块级标签和行内标签,还有一类特殊的标签称为“行内块级元素”,如<img>和<input>.
这类元素在布局上表现为行内元素(即不换行,与文本同行显示),但在尺寸控制上类似于块级元素(可以设置宽度,高度及四边的内外边距).
FORM
<form>是html中的重要元素,可用于将用户输入的数据发送到服务器进行处理.<form>通常用于登录,查询,评论等需要用户输入数据的地方,<form>的主要属性包括;
action:主要用于将用户输入的数据发送到指定的url中,eg:
<form action="xxx.py">``<form action="xxx.php">,如果没有定义action属性,form中的数据将会默认发送到当前页面中.methon:用于指定数据的提交方式
POST``GET``AJAX等get:将数据直接拼接到url后面(eg:www.123.com/?username=admin&password=admin)posy:将数据放在请求体中发送,不可直接在url中见到,可以通过抓包看见
enctype:当使用
post方式发送数据时,enctupe属性可以指定表单数据提交时的编码方式.常见有:application/x-www-form-urlencoded(默认):- 表单数据被编码为键值对，每个名/值对之间用
&分隔，名和值之间用=分隔。 - 空格被替换为加号 (
+)，非字母数字字符被URL编码（例如，空格变为%20）。 - 适合文本数据，尤其是ASCII字符组成的简单数据。
- 表单数据被编码为键值对，每个名/值对之间用
multipart/form-data:- 用于文件上传,当form表单中包含
<input type='file'>时,要使用此编码方式 - 文件内容不经编码直接发送,保留原始的二进制数据
- 非file文件的部分仍按照名/值进行处理,但会以特殊的多部份格式进行封装
- 用于文件上传,当form表单中包含
text/plain:- 以纯文本的方式进行提交表单数据,不进行url编码
- 键值对之间用换行符分隔，名和值之间用冒号 (
:) 分隔,
- form中标签需要设置name属性，从而使form中标签的数据再提交到后台后，后台可以通过name获得该标签内的数据
- form中需要有一个submit即
<button type='submit'>提交</button>当点击提交时,form中的数据会以action,methon,enctype的形式向后台发送
