前端知识点总结

Summer@007

已于 2022-08-29 15:23:40 修改

阅读量935

点赞数

文章标签：前端 javascript jquery html5

于 2022-08-29 15:05:32 首次发布

本文链接：https://blog.csdn.net/gongcaifeng/article/details/126585049

版权

HTML部分

1.web三要素

浏览器

浏览器发请求给服务器，下载服务器中的内容(HTML),执行html显示出内容

服务器

接收浏览器的请求，发送响应结果给浏览器

http协议

浏览器与服务器的通讯协议

2.主流浏览器内核私有属性css前缀：

主流浏览器：Chrome,Firefox等

hbuilderx软件自带了一个内置服务器：端口号默认是8848

Mozilla内核(firefox,flock等)-moz
webkit内核(safari,chrome等)-webkit
opera内核(opera浏览器)-o
trident内核(ie浏览器)-ms

3.web学习内容

HTML：用于勾勒网页的结构和内容
css:用于网页美化
js:js操作的目标是html，css,是以这两者为基础的

4.web项目开发的技术

5.关于html语义化，你知道的都有哪些标签？

header、article、address都属于语义化明确的标签

6.HTML文件的标签与元素介绍

一个html文件是由一系列的元素和标签组成的
- 元素是HTML文件的重要组成部分，例如title(文件标题)、img(图像)及table(表格)等。元素名不区分大小写。
- HTML用标签来规定元素的属性和它在文件中的位置
HTML的标签部分单独出现的标签和成对的标签两种
- 成对标签仅对包含在其中的文件部分发送作用，例如和标签用于界定标题元素的范围，也就是说，和标签之间的部分是此HTML文件的标题。
- 单独标签的格式为<元素名称>，其作用是在相应位置插入元素，例如
  标签是在该标签所在位置插入一个换行符
元素：当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称之为一个元素。
html文件的后缀名：.html或.htm

7.HTML标签

块级标签：默认宽度100%(占满一行)；块级标签自动换行(独占一行，右边不能有任何东西)；块级标签可以使用CSS设置宽度高度！常用的块状元素有：div、 p、 h1**h6、ol、ul、dl、table、address、blockquote、form
行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；行级标签不会自动换行(一行当中，从左往右依次排列)；行级标签的宽度高度不能设置！常用的内联元素有：a、span、br、i、em、strong、label、q、var、cite、code；常用的内联块状元素有：img、input。

8.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

- 行内元素:a   span  img  input  select
- 块级元素：div  ul  ol  li  dl  dt  dd  hl  pl 
-空元素：<br>  <hr>  <link>  <meta>

9.页面导入样式时，使用link和@import有什么区别？

同：都是外部引用css方式

区别：

link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
link支持使用javascript控制去改变样式，而@import不支持
link方式的样式的权重高于@import的权重
import在html使用时候需要<style type="text/css">标签

10.HTML文件避免乱码

html文件在新建的时候，要将文件的编码设置为utf-8.
html文件内容中，需要在head标签内部的meta标签中，设置编码方式为utf-8.
两处编码需要保持一致，同时需要支持中文的编码

11.HTML页面的访问方式

HTML是解释执行的语言。浏览器直接会解析html标签，显示内容到网页中。
网络方式访问
- http://127.0.0.1:8848/web01/day1/aa.html
- http: 网络协议
- 127.0.0.1:8848 :访问的服务器的地址(域名) – ip:port
  
  1.127.0.0.1 , 是代表本机的ip地址（ 192.168.3.46）：通过ipconfig命令查询本机ip.
  1. localhost: 是代表本机的域名
  2. port :端口号（8848 , 通过端口号，找到电脑上在运行的某个软件。）
  3. /web01/day1/aa.html :运行的8848软件上对应的具体的资源。
文件方式访问
- file:///C:/Users/Administrator/Documents/HBuilderProjects/web01/day1/1.html文件的结构.html
- file:文件协议
- 通过文件的硬盘路径，打开文件。

12.HTML标签

作用：填写并提交表单信息与服务器进行动态交互
表单有两个基本部分：① 实现数据交互的可见的界面元素，比如文本框或按钮 ， ②提交后的表单处理
相关标签：①form标签：使用“form”元素创建表单，②在“form”元素添加其他表单可以包含的控件元素

1.form表单

定义表单：使用成对的标记
主要属性：
- action：定义表单被提交时发生的动作，通常包含服务方脚本的URL(比如JSP，PHP)
- method：指出表单数据提交的方式，取值为get或者post
- enctype:表单数据进行编码的方式

在这里插入图片描述

2.表单元素

元素用于收集用户信息
该标记是一个空标记，语法为：
主要属性：
- type：根据不同的type属性值，可以创建各种类型的输入字段，比如文本框，复选框等。
- value：控件的数据
- name:控件的名称
文本框：type=“text”
密码框：type=“password”
隐藏域：type=“hide”–在表单中包含不需要用户知道的信息
文件上传：type=“file”–选择要上传的文件
单选框：type=“radio”
复选框：type=“checkbox”
主要属性
- name:input元素的名字，提交数据的key
- value:input元素的值，提交数据的value
- checked：设置单选框，复选框是否被选中
提交按钮：type=“submit”—提交表单数据给服务器端或其他程序处理
重置按钮：type=“reset”—清空表单的内部，并把所有表单控件设置为最初的默认值
普通按钮：type=“button”—用于执行客户端属性

—主要属性value：按钮的标题文本

3.下拉选项框和滚动列表

select:创建选项框
- name:选项框命名
- size:大于1，则为滚动列表
- multiple：设置多选
option：选项
- value:选项的值
- selected：预选中

4.多行文本输入框

- <textarea>文本</textarea>
- 主要属性
  - cols:指定文本区域的列数
  - rows:指定文本区域的行数
  - readonly：只读

5.表单元素的使用

form标签：表单相关的标签，其内部嵌套用于用户输入数据的标签。
- action: 表单提交的请求地址(url)
- method: 请求的方式get / post
- enctype : 设置enctype的类型，对请求参数的处理方式。
  - 如果表单中涉及到文件上传，要求：method是post , enctype设置为 multipart/form-data
```
<label for="inputname">用户名:</label> 
```
- for:label的for属性对应的数据值时input标签的id。那么单击label标签的时候，input标签获取焦点(光标就在输入框内部, 用户就可以直接输
  
  入数据。)
```
<input id="inputname" type="text" name="username" value="tom" /> 
```
- input标签：用于用户输入数据
  - type: 设置标签的类型,对用户输入的数据进行一些设置
  - name: 用户输入的数据，传输到服务器端的时候， java程序根据name的值，获取到输入框的数据。
  - value: 对应的就是用户输入的数据值
  - type=“submit”:提交请求(请求的地址 + 请求的参数)的按钮 , 单击按钮触发表“单提交事件”
  - “表单提交事件” ：发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端。

<h2>表单相关元素的介绍</h2> 
<form action="#" method="post" enctype="multipart/form-data"> 
    单行文本框： <input type="text" name="user" /><br> 
    密码框：<input type="password" name="pwd" /><br> 
    隐藏域：<input type="hidden" name="hide" /><br> 
    文件上传：<input type="file" name="photyo" /><br> 
    <!-- 单选按钮：①一般一组单选按钮，需要设置相同的name值，才能保证只有一个按钮被 选中。 
② 标签后面的文本提示，是给用户看的， 标签的value值时给 程序使 用的。 (程序中用0表示男，1表示女) 
③ checked="checked" ,表示设置为默认选中 --> 
    单选按钮：<input type="radio" name="sex" value="0"/> 男 
    <input type="radio" name="sex" value="1" checked="checked"/> 女 
    <br> 
    复选框：<input type="checkbox" name="hobbys" value="看书" checked="checked" /> 看书 
    <input type="checkbox" name="hobbys" value="弹琴" /> 弹琴 
    <input type="checkbox" name="hobbys" value="跑步" /> 跑步<br>
    下拉列表(单选)：<select name="city">
    <option>请选择</option> 
    <option value="0">上海</option> 
    <!-- selected="selected" : 设置默认选中项 --> 
    <option value="1" selected="selected">北京</option> 
    <option value="2">天津</option> 
    </select><br> 
    下拉列表(多选): 
    <!-- multiple="multiple"：用于设置下拉列表，支持多选 --> 
    <select name="language" multiple="multiple" size="6"> 
        <option value="java">java</option> 
        <option value="c">c</option> 
        <option value="c++">c++</option> 
        <option value="python">python</option> 
        <option value="html">html</option> 
    </select><br> 
    多行文本框： 
    <!-- cols="5" :设置宽度 rows="10" :设置高度 --> 
    <textarea name="info" cols="5" rows="10"></textarea><br> 
    submit:<input type="submit" value="提交数据" /><br><br>
    reset:<input type="reset" value="清空数据" /><br> 
    button:<input type="button" value="普通按钮" /><br> 
    分组标签： <fieldset> 
    <legend>地址</legend> 
    邮箱： <input type="email" name="email" /> 
    年龄: <input type="number" name="phone" />
    date: <input type="date" name="date" /> 
    颜色：<input type="color" name="color" /> 
    submit:<input type="submit" value="提交数据" /><br><br> 
    </fieldset> 
</form>

6.iframe标签

iframe标签：在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中

<!-- iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。 --> 
<iframe src="1.表单相关标签.html" width="100" height="100">
</iframe> <iframe src="../img/a.jpeg" width="100" height="100"></iframe>

a标签的target ，指定为iframe标签的name值，那么超链接的内容，则显示到 iframe标签中。

<ul>
    <!-- a标签的target ，指定为iframe标签的name值 ， 那么超链接的内容，则显示到 iframe标签中。 --> 
    <li><a href="../day1/1.html文件的结构.html"target="content">1.文件结构 </a></li> 
    <li><a href="../day1/2.文本相关标签.html" target="content">2.文本相关 </a></li> 
    <li><a href="../day1/3.有特殊样式的文本标签.html" target="content">3.特殊 样式的文本</a></li> 
</ul> 
<!-- 单击li中的超链接，把超链接的内容显示到iframe标签中。 --> 
<iframe src="../day1/1.html文件的结构.html" width="300px" height="300px" name="content" ></iframe>

13.HTML标签

块级标签：默认宽度100%（占满一行）
块级标签自动换行(独占一行，右边不能有任何东西)；
块级标签可以使用css设置宽度高度；
常用的块状元素有：div、 p、 h1**h6、ol、ul、dl、table、address、blockquote、form
行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；
行级标签不会自动换行(一行当中，从左往右依次排列)；
行级标签的宽度高度不能设置！常用的内联元素有：a、span、br、i、em、strong、label、q、var、cite、code；
常用的内联块状元素有：img、input。

14.解释utf-8和GBK和ISISO8859-2字符集

charset 属性规定 HTML 文档的字符编码。
UTF-8（8-bit Unicode TransformationFormat）是一种针对Unicode的可变

长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）
GBK是汉字编码，是双字节码，可表示繁体字和简体字。
ISO8859-2 字符集，也称为 Latin-2，收集了东欧字符。

15.HTML元素的显示优先级

帧元素（frame）>HTML元素优先，表单元素总>非表单元素优先。
常见的非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则。
所有这样HTML元素又可以根据其显示要求分成两类，即有窗口的HTML元素(Windowed Element),无窗口的HTML元素（Windowless Element)。
有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE5.01以主更早版本中的IFRAME元素。
无窗口的元素包括：大多数的普通HTML元素，如链接和TABLE标记，除了SELECT元素之外的大多数表单元素。

CSS语言

css(Cascading Style Sheets）:层叠样式表，又叫级联样式表，简称样式表

用于HTML文档中元素的样式定义，实现网页的美化，实现将内容和表现分离

1.css的三种使用方式

内联样式：直接在标签上，通过style属性进行使用。只对当前使用的标签有效。
- 样式定义在单个的HTML元素中
内部样式：在head标签中，通过

2.css的特征

继承性
- 大多数css的样式规则可以被继承
层叠性
- 可以定义多个样式表
- 多个不冲突的样式，可以层叠为一个
优先级
- 样式定义冲突时，按照不同样式的规则优先级来应用样式

3.css的选择器

元素选择器	元素名{属性：属性值}
类选择器	.类名{属性：属性值}
分类选择器	元素名.类名{属性：属性值}
id选择器	#id名字{属性：属性值}
选择器分组	元素1，元素2，元素…{属性：属性值}
派生选择器	p.main{属性：属性值}；p>.main{属性：属性值}
伪类选择器	伪类{属性：属性值}

选择器：selector ，根据某个特征，找到标签。

①标签选择器：根据标签的名字，选择到对应的标签（当前HTML页面中的该标签都被选择出来。）
②id选择器：根据标签的id，选择标签。（一个HTML页面，id是唯一的，只会选择出一个符号条件的标签）。
③class选择器：根据标签的class属性，选择标签。（一个HTML页面，class允许重复，可以选择除多个符号条件的标签。）
④分类选择器：元素选择器和class/id选择器一起使用。
⑤分组选择器：选择器1，选择器2，选择n…{样式}
⑥派生选择器：找子(嵌套在内部的第一层符号条件的标签元素)选择器>选择器{}；找子孙（嵌套在内部的所有符号条件的标签元素）选择器选择器{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的基本选择器</title>
		<style type="text/css">
			#ul1 li{
     
				background-color: green;
				list-style: none; /*去掉li标签前面符号*/
				margin: 3px;  /*设置标签和其他标签四个方向的间距都是3px*/
			}
			/* class选择器：  .className{} */
			.group{
     
				color: red;
			}
			#first{
     font-size: 30px;}
			/* span标签是行内元素，宽度高度由内部的内容决定。如果希望设置width,height.
			   那么需要修改span标签的显示方式：display:inline-block(行内块级元素：不换行，支持设置宽，高，比如img标签。)
			 */
			span{
     
				width: 100px;
				height: 30px;
				background: #21448c;
				text-align: center;  /*文字的左右居中*/
				line-height: 30px;  /*行高：如果文字只有一行，然后行高等于高度，那么文字就垂直居中*/
				
			}
			b{
     
				color: white;
				border-left: 1px solid white;
				border-right: 1px solid white;
				/* padding: 1px; /*padding:四个方法的内边距（标签和内部的内容之间的间距。）*/ */
				padding-left: 6px;
			}
			/* 分类选择器的使用 */
			span.three{
     
				width: 120px;
				
			}
			/* 分组选择器 */
			p,h1{
     
				border: 3px solid black;
				border-radius: 5px;  /*设置边框为圆角*/
			}
			/* 派生选择器：选择子孙 */
			/* #sel span{
				padding: 5px;
				border: 3px solid #008000;
			} */
			/* 派生选择器：选择子*/
			#sel>span{
     
				padding: 5px;
				border: 3px solid red;
			}
			
			
		</style>
	</head>
	<body>
		 <ul id="ul1">
		 	<li class="group" id="first">九龙坡</li>
			<li>渝中</li>
			<li>渝北</li>
			<li>江北</li>
			<li class="group" >沙坪坝</li>
		 </ul>
		 
		 <ul>
		 	<li>html语言</li>
			<li>css语言</li>
			<li>js语言</li>
		 </ul>
		 <p>
		 	<span><b>span one</b></span>