web - 前段三剑客
目录
前言
一. HTML
常用标签演示
图片标签
编辑
表格标签(重点)
编辑
表单标签 (重点)
布局标签
其余标签
二. CSS
2.1 . css的三种引入方式
2.2 . 三大选择器
2.3 . css样式 - 浮动
2.4 . css样式 - 定位
1.static
2.absolute(绝对位置)
3.relavite(相对于元素原本的位置)
4.fix(相对位置,相对与浏览器窗口)
2.5 . css样式 - 盒子模型
三.JavaScript
1.简介
2.js引入方式
3. js基础语法
4.js对象
前言
大家好,今天也是展开了一个新的篇章,这篇博客主要讲解的是web前端的三大得力干将,分别是HTML,CSS,JavaScirpt,我们将之称为前端三剑客
一. HTML
- HTML(HyperText markup Language) 超文本标记语言
- 超文本: 超越了文本的限制,比普通文本更加强大。除了文字信息，还可以定义音频，视频等
- 标记语言：由标签构成的语言
在学习HTML之前，我们有必要了解一些专业的名词
-
标签（tag）：HTML中的标签是用来定义和包裹不同类型内容的元素。标签通常由尖括号包围，如
标签用于定义段落， -
属性（attribute）：HTML标签可以包含属性，属性提供了关于元素的额外信息。属性通常以键值对的形式存在，写在标签的开始标记中。例如，
中的href就是一个属性，它指定了链接的目标地址。 -
文本（text）：HTML标签中的文本是指标签包含的内容。例如，
Hello, World!
-
元素（element）：元素是指标签、属性和文本的整体组合。一个完整的HTML元素包括开始标记、结束标记和其中的内容。例如，
结束标记。Hello, World!
开始标记、文本内容"Hello, World!"和
- 常用标签:
：定义HTML文档的根元素。：定义HTML文档的头部，包含了一些元数据，如标题、样式表等。</code>：定义网页的标题，显示在浏览器的标题栏上。</span></li> <li><span style="color:#0d0016;"><code><body></code>：定义HTML文档的主体部分，包含了网页的内容。</span></li> <li><span style="color:#0d0016;"><code><h1></code>-<code><h6></code>：定义标题，h1为最高级别的标题，h6为最低级别的标题。</span></li> <li><span style="color:#0d0016;"><code><p></code>：定义段落。</span></li> <li><span style="color:#0d0016;"><code><br>: <strong>换行</strong></code></span></li> <li><code><ul></code>：定义无序列表。</li> <li><code><ol></code>：定义有序列表。</li> <li><code><li></code>：定义列表项。</li> <li><span style="color:#0d0016;"><code><a></code>：定义超链接，可以跳转到其他网页或者页面内的位置。</span></li> <li><span style="color:#0d0016;"><code><img></code>：定义图像，可以在网页中插入图片。</span></li> <li><span style="color:#0d0016;"><code><table></code>：定义表格。</span></li> <li><span style="color:#0d0016;"><code><tr></code>：定义表格行。</span></li> <li><span style="color:#0d0016;"><code><td></code>：定义表格单元格。</span></li> <li><span style="color:#0d0016;"><code><form></code>：定义表单，用于用户输入和提交数据。</span></li> <li><span style="color:#0d0016;"><code><input></code>：定义表单中的输入字段，如文本框、复选框、单选按钮等。</span></li> <li><span style="color:#0d0016;"><code><textarea></code>：定义多行文本输入框。</span></li> <li><span style="color:#0d0016;"><code><button></code>：定义按钮。</span></li> <li><span style="color:#0d0016;"><code><div></code>：定义文档中的一个区块或容器。</span></li> <li><span style="color:#0d0016;"><code><span></code>：定义文档中的一个行内元素。</span></li> </ul></li> </ul> <h3 id="%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE%E6%BC%94%E7%A4%BA"><strong>常用标签演示</strong></h3> <hr> <h4 id="%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE">图片标签</h4> <p><a href="http://img.e-com-net.com/image/info8/5e8ed8c11c744c3dbdf743d504221c20.jpg" target="_blank"><img alt="web - 前段三剑客_第2张图片" height="338" src="http://img.e-com-net.com/image/info8/5e8ed8c11c744c3dbdf743d504221c20.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E2%80%8B%E7%BC%96%E8%BE%91"><a href="http://img.e-com-net.com/image/info8/e14ae50791f54f65a8618bacccf7b5e0.jpg" target="_blank"><img alt="web - 前段三剑客_第3张图片" height="506" src="http://img.e-com-net.com/image/info8/e14ae50791f54f65a8618bacccf7b5e0.jpg" width="650" style="border:1px solid black;"></a></h4> <hr> <h4 id="%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE(%E9%87%8D%E7%82%B9)">表格标签(重点)</h4> <p><a href="http://img.e-com-net.com/image/info8/669990d612a8435bbe26181f106aaf4c.jpg" target="_blank"><img alt="web - 前段三剑客_第4张图片" height="999" src="http://img.e-com-net.com/image/info8/669990d612a8435bbe26181f106aaf4c.jpg" width="650" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/0abb4a176c0a4856ac4a114e6910bce0.jpg" target="_blank"><img alt="web - 前段三剑客_第5张图片" height="233" src="http://img.e-com-net.com/image/info8/0abb4a176c0a4856ac4a114e6910bce0.jpg" width="650" style="border:1px solid black;"></a></p> <p>上面的一个案例中使用了部分css样式,大家不必在意,后面我会一一讲到</p> <p>值的一提的是thead,tbody,tfoot标签可以省略不写,如果三个标签全部省略不写,那么浏览器在解析html页面时,会将所有的tr标签包裹在tbody标签中,如果不需要指定表格头和表格尾,大家完全可以将这三个标签省略掉</p> <p><strong>表格的跨行和跨列</strong></p> <p><a href="http://img.e-com-net.com/image/info8/d3c7452637754ab6a682acf318aee381.jpg" target="_blank"><img alt="web - 前段三剑客_第6张图片" height="432" src="http://img.e-com-net.com/image/info8/d3c7452637754ab6a682acf318aee381.jpg" width="650" style="border:1px solid black;"></a></p> <h4><a href="http://img.e-com-net.com/image/info8/7f535171432948c5848cc2a0f375ecf9.jpg" target="_blank"><img alt="web - 前段三剑客_第7张图片" height="264" src="http://img.e-com-net.com/image/info8/7f535171432948c5848cc2a0f375ecf9.jpg" width="650" style="border:1px solid black;"></a></h4> <hr> <h4 id="%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%20(%E9%87%8D%E7%82%B9)">表单标签 (重点)</h4> <ul> <li> <p>form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签</p> <ul> <li> <p>action, form标签的属性之一,用于定义信息提交的服务器的地址</p> </li> <li> <p>method, form标签的属性之一,用于定义信息的提交方式</p> <ul> <li> <p>get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开</p> </li> <li> <p>post post方式,数据会通过请求体发送,不会在缀到url后</p> </li> </ul></li> </ul></li> <li> <p>input标签,主要的表单项标签,可以用于定义表单项</p> <ul> <li> <p>name, input标签的属性之一,用于定义提交的参数名</p> </li> <li> <p>type, input标签的属性之一,用于定义表单项类型</p> <ul> <li> <p>text 文本框</p> </li> <li> <p>password 密码框</p> </li> <li> <p>submit 提交按钮</p> </li> <li> <p>reset 重置按钮</p> </li> </ul></li> </ul></li> </ul> <p>在HTML中，有多种标签可用于创建表单项（form element），以下是一些常用的表单项标签：</p> <ol> <li> <p><code><input></code>：用于创建各种类型的输入字段，例如文本输入框、密码输入框、单选按钮、复选框等。<code>type</code>属性用于指定输入字段的类型。</p> </li> <li> <p><code><textarea></code>：用于创建多行文本输入框。</p> </li> <li> <p><code><select></code>：用于创建下拉选择框，可以与<code><option></code>标签一起使用来定义选项。</p> </li> <li> <p><code><label></code>：用于创建标签文本，通常用于与输入字段关联，通过<code>for</code>属性指定关联的字段的<code>id</code>。</p> </li> <li> <p><code><button></code>：用于创建按钮，可以用于提交表单或执行其他操作。</p> </li> <li> <p><code><fieldset></code>：用于创建一个字段集合，可以将相关的表单项组织在一起。</p> </li> <li> <p><code><legend></code>：用于为<code><fieldset></code>元素定义标题。</p> </li> <li> <p><code><input type="file"></code>：用于创建文件上传字段。</p> </li> <li> <p><code><input type="checkbox"></code>：用于创建复选框。</p> </li> <li> <p><code><input type="radio"></code>：用于创建单选按钮。</p> </li> </ol> <p>这些标签可以根据需要进行组合和嵌套，以创建各种类型的表单项。通过合理地使用这些标签，可以构建出功能完善、易于使用的表单。</p> <p>案例</p> <p><a href="http://img.e-com-net.com/image/info8/0a544d9df7e24503a0aff209ea400d7c.jpg" target="_blank"><img alt="web - 前段三剑客_第8张图片" height="409" src="http://img.e-com-net.com/image/info8/0a544d9df7e24503a0aff209ea400d7c.jpg" width="650" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/e7e2f91cd2f943c993e4a53908ad4783.jpg" target="_blank"><img alt="web - 前段三剑客_第9张图片" height="252" src="http://img.e-com-net.com/image/info8/e7e2f91cd2f943c993e4a53908ad4783.jpg" width="650" style="border:1px solid black;"></a></p> <p>此时的提交方式为get不应改在?后面拼接用户名和密码吗?</p> <p>注意此时只是指定了值,但是并没有指定值所对应的键</p> <p>url?key=value&key=value</p> <p>需要我们指定对应的键,即表单项必须指定name属性才能提交上去</p> <p><a href="http://img.e-com-net.com/image/info8/47fe12f41e4a4d29b264690855183dd9.jpg" target="_blank"><img alt="web - 前段三剑客_第10张图片" height="216" src="http://img.e-com-net.com/image/info8/47fe12f41e4a4d29b264690855183dd9.jpg" width="650" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/da7f5fdf127941f28d7f887033f0fd35.jpg" target="_blank"><img alt="web - 前段三剑客_第11张图片" height="142" src="http://img.e-com-net.com/image/info8/da7f5fdf127941f28d7f887033f0fd35.jpg" width="650" style="border:1px solid black;"></a></p> <p> 上面通过get方式提交数据用户名和密码直接暴露在了地址栏中并不安全并且提交的长度也有限制该方式提交并不友好,我们来看看通过post方式来提交数据</p> <p><a href="http://img.e-com-net.com/image/info8/b284a47ea3eb4752ae260403aee99f6b.jpg" target="_blank"><img alt="web - 前段三剑客_第12张图片" height="239" src="http://img.e-com-net.com/image/info8/b284a47ea3eb4752ae260403aee99f6b.jpg" width="650" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/7a434428ad2d4b83ad7f38ada464d55d.jpg" target="_blank"><img alt="web - 前段三剑客_第13张图片" height="342" src="http://img.e-com-net.com/image/info8/7a434428ad2d4b83ad7f38ada464d55d.jpg" width="650" style="border:1px solid black;"></a></p> <p>请求的数据被放入请求体中发往服务器端,由于我们没有服务器端因此报错</p> <p>两种请求方式的特点</p> <p><a href="http://img.e-com-net.com/image/info8/e3f4c21c12214563a265e2c225820a17.jpg" target="_blank"><img alt="web - 前段三剑客_第14张图片" height="254" src="http://img.e-com-net.com/image/info8/e3f4c21c12214563a265e2c225820a17.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E5%B8%83%E5%B1%80%E6%A0%87%E7%AD%BE%C2%A0">布局标签 </h4> <p><a href="http://img.e-com-net.com/image/info8/d3f7857c5a4b40689c3fc639180fd324.jpg" target="_blank"><img alt="web - 前段三剑客_第15张图片" height="290" src="http://img.e-com-net.com/image/info8/d3f7857c5a4b40689c3fc639180fd324.jpg" width="650" style="border:1px solid black;"></a></p> <h4 id="%E5%85%B6%E4%BD%99%E6%A0%87%E7%AD%BE">其余标签</h4> <p>单选框标签</p> <p><a href="http://img.e-com-net.com/image/info8/d02ee5400af84e02a07172a1b40ebb11.jpg" target="_blank"><img alt="web - 前段三剑客_第16张图片" height="114" src="http://img.e-com-net.com/image/info8/d02ee5400af84e02a07172a1b40ebb11.jpg" width="650" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/0ed51c541da2448999ac0ed8b6c4abae.jpg" target="_blank"><img alt="web - 前段三剑客_第17张图片" height="215" src="http://img.e-com-net.com/image/info8/0ed51c541da2448999ac0ed8b6c4abae.jpg" width="650" style="border:1px solid black;"></a></p> <p> 上面的图是没有添加value属性的,我们来看看添加了value属性的</p> <p><a href="http://img.e-com-net.com/image/info8/871f0210ee0148a6915d6e7b1c47be60.jpg" target="_blank"><img alt="web - 前段三剑客_第18张图片" height="142" src="http://img.e-com-net.com/image/info8/871f0210ee0148a6915d6e7b1c47be60.jpg" width="650" style="border:1px solid black;"></a></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document 
二. CSS
CSS 层叠样式表(英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面
2.1 . css的三种引入方式
CSS样式可以通过以下方式应用到HTML文档中：
- 内联样式：直接在HTML元素的
style属性中指定CSS样式。 - 内部样式表：在HTML文档的
标签中使用
- 内联样式：直接在HTML元素的