前端学习：html基础总结

凭萧

已于 2022-02-18 22:36:51 修改

阅读量391

点赞数

分类专栏：我的前端之旅文章标签： 1024程序员节 html 前端 html5

于 2021-10-24 23:19:25 首次发布

本文链接：https://blog.csdn.net/m0_62309434/article/details/120941636

版权

我的前端之旅专栏收录该内容

1 篇文章 0 订阅

订阅专栏

只是一个阶段总结，后面还会增加完善。

1.html介绍

HTML:超文本标记语言由Tim Berners Lee制定

W3C:万维网联盟

URL：统一资源定位器由通信协议类型，主机名，路径和文件名组成

目前HTML5仍是以草案的形式发布，预计是最终版。

网页文件的后缀名为.html或者.htm

1.1 使用环境

虽然用记事本也可以学习，但是费事，一般使用Hbuider或者vscode。

1.2 学习链接

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1sf4y1k7dr?p=1html相当于骨架，而css用来修饰外貌，js让骨架动起来。

2.基本结构

<!doctype html> 
    <html>   
    <head>
        <meta charset="utf-8f">
        <title></title>
    </head> 
    <body>   
    </body>
    </html>

<!doctype html>文档头信息声明，用于告诉浏览器文档用的HTML规范

<html></html>根标签，说明浏览器是由HTML语言编写的，使浏览器能准确无误的表示

一些有意思的emoj(可以在w3school 在线教程查阅）

<title></title>网页标题标签填写的内容出现在窗口标题栏中。

<head><\head>头部标签头部信息不出现在网页之中，用于说明文件标题和一些共有属性

<body><\body>网页主体标签基本上所有的网页内容如图片，超链接等都是在此定义的

3.常见标签介绍

标签相当于容器，还分成几种

块级标签
特点 : 独占一行,能够随意设置宽度和高度(比如: div, p, h#, ul, li等)
行内标签
行内标签又叫做内联标签
特点 : 多个行内标签能同时显示在一行,并且宽度和高度是默认的，一般情况下无法像改块级元素属性那样更改行内标签的属性(比如: span, a, label)
行内-块级标签
行内-块级标签也叫做内联-块级标签
特点 : 多个行内-块级标签能够显示在同一行,并且能随意修改他们的宽度和高度(比如 : input, button)也可以使用css把块级元素转化为行内标签

单标签：如link img br hr input meta 等

<标签名 />

双标签：大多数是双标签

<标签名>内容</标签名>

注释语句：

<body>标签属性

bgcolor=" #颜色" 设置背景颜色

background=" URL"设置背景图片

text="#颜色" 设置文本颜色

link="#颜色"设置超链接颜色

vlink="#颜色"设置已使用的超链接颜色

alink="#颜色"设置未使用的超链接的颜色

leftmargin="50"设置页面左边的空白

topmargin="50"设置页面上方的空白

但是有些属性已经用了很久，不太推荐使用

<p><\p>可以输出这一行的内容

<br\>强制换行标签

<hr>实线分割线

<h#><\h#>标题，根据搜索引擎优化，一个网页最多出现一个h1标签，有利于搜索引擎优化，要实现字体加粗的效果是不要使用标题标签

<em><\em>强调文本，斜体

<strong><\strong>强调文本，粗体

<sup><\sup>上标样式

<sub><\sub>下标样式

使用时应该将他们至于<p>之内

<pre><\pre>里面的有多少个空格转成网页时还是多少个空格

&nbsp 一个空格占位符

H2O：H<sub>2<\sub>O

<img src="URL">图片标签

常用属性：alt（用于当浏览器不支持图片格式时将显示出来） height width title（鼠标悬停时出现的文字）

常用属性：target=" "(_self在当前窗口打开 _blank在新窗口打开）

链接方式：1 ./当前文件夹下 ../返回上一级文件夹

2 可以直接链接到别的网站，复制网站链接即可

用法一：锚点

书签链接:有些文章太长，会设置返回顶部或者返回底部，做法为：

用法二：跳转页面

4.表单

作用：获取用户的信息，反馈到后台。

1.<form>

在一个表单中可以包含多个表单元素，如文本框、密码框、复选框等等。在网页中制作一个表单由标签<form></form>定义，<form>是表单的开始标签，而</form>是表单的结束标签。

action：值为URL，指向处理表单的程序，表单数据将被发送到此程序。

method：设定数据的传送方式。get或post。

name：设定表单的名字，在处理表单程序可能会用到。

2.<input>

3.<input>的基本输入类型

用法：<input type="">

单选框radio

复选框checkbox

提交按钮submit

重置按钮reset

无动作按钮button

图片提交按钮image

文件上传域file

隐藏域hidden

<textarea>…</textarea>标签

<select>…</select>标签

标注标签：<label>…</label>

<fieldset>标签

5.css基本语法和选择器

CSS是“Cascading Style Sheets”（层叠样式表）的缩写，一般简称为“样式表”，是由W3C组织制定的一种非常实用的网页元素定义规则，在标准网页设计中CSS负责网页内容(HTML)的表现。

样式就是格式，比如网页中文字的大小、颜色，图片的大小，插入位置等；

层叠是指多个样式可以同时应用到同一个页面或网页中的同一个元素，如果这些样式发生了冲突，则依据层次的先后来处理网页中内容的形式。

5.1 css基本语法

CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分组成的——“对象”“属性”和“值” 。

2.css应用到网页中主要有一下方面

2.1 内嵌式样式表

内部样式表是把样式表放到页面的<head>…</head>内，这些定义的样式就应用到页面中了。样式表是用<style>标签插入的。其格式为

2.2 链接式样式表

链入外部样式表是把样式表保存为一个样式表文件（.css），然后在页面中用<link>标记链接到这个样式表文件，这个<link>标签必须放到页面的<head>…</head>内。其格式为

<head> ...

</head>

样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记。样式表文件的格式为

选择符1{属性:属性值; 属性:属性值; ... } /* 注释内容 */

选择符2{属性:属性值; 属性:属性值; ... } ...

选择符n{属性:属性值; 属性:属性值; ... }

2.3 导入式样式表

2.4 行内样式表

5.2 css选择器

1. id选择器

作用：用于对一个部分进行样式设置，局限性较大。

用法：#id名{ }

2 .组合选择器

作用：组合选择器，又叫并集选择器是多个选择器通过逗号连接而成的。在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明风格相同的CSS选择器。

用法：把多个选择器组合起来书写

3. 类选择器

作用：对同一类的样式进行设置

用法：<a class="name1" href="#" >

在<style>内设置

.name1{}

4 后代选择器

作用：根据文档的上下文关系来确定某个标签的样式

用法：

5.高级选择器

5.1 子元素选择器

5.2 相邻元素选择器

5.3 关联元素选择器

5.4 属性选择器

5.3 伪类选择器

作用：用来设置元素的特殊状态

用法：

1.. 锚伪类

链接的状态包括：未被访问状态，已被访问状态，鼠标悬停状态，和活动状态，相应的锚伪类有如下4种：

a:link 超链接的正常状态（未被访问前）

a:visited 访问过的超链接状态

a:hover 光标移到超链接上的状态

a:active 选中超链接时的状态（在鼠标单击与释放之间）

用法：

a：锚伪类名 {属性:属性值; 属性:属性值 ... }

6.css盒模型，样式，浮动

1.盒模型

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说，这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数来调节盒子的位置和大小。

属性：

1. 盒模型宽度和高度的计算方法

盒模型的宽=左外边距+左边框+左内边距+内容宽度（width）+右内边距+右边框+右外边距

盒模型的高=上外边距+上边框+上内边距+内容高度（height）+下内边距+下边框+下外边距

2. 样式初始化

3.边框 border

4.内边距padding

5.元素分类和转换

5.1 块元素

5.2 行内元素

5.3 行内块元素

6.背景属性

7.文本属性

ps:让文字位于一个盒子上下的中间的方法是将line-height设置成height的高度一样

8.浮动属性

1.普通流

普通流，也称为文档流、常规流。它指的是元素按照其在HTML页面文件中的位置顺序，决定排版布局的过程。除非专门指定，否则所有盒子都被定位在普通流中。

2.在普通流中，基本的排布规律是：

块级框从上到下、一个接一个地排列，块级框之间的垂直距离是由该块级框的垂直外边距（margin-top和margin-bottom）计算出来。行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整行内框的间距。但是，垂直内边距、边框和外边距并不影响行内框的高度。

3.浮动和绝对定位

浮动和绝对定位都使得元素脱离普通流，元素原先在普通流中所占的空间会关闭，就好像该元素原来就不存在一样。

4.浮动属性

浮动(float)属性默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时在默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。

它的语法如下：

float: none | left | right;

none：不浮动。页面中的元素默认都不浮动。

left：元素向左浮动。

right：元素向右浮动。

5.浮动的特殊情况

1.相邻的两个浮动元素不能同行显示

当浮动块所在的父元素宽度不够，不能同时容纳第二个浮动元素时，该元素将自动换行显示

2. 元素浮动时，脱离普通流，这时可能会与普通流中的元素发生重叠

解决方法：使用清除属性解决

3.浮动元素会造成父元素高度塌陷，影响网页布局

6.清除浮动属性clear

用来清除其他浮动元素对本元素的影响

clear属性它的语法如下： clear：none | left | right | both;

none：不清除，即允许本元素左右两边都可以有浮动元素；

left：本元素左边不允许有浮动元素；

right：本元素右边不允许有浮动元素；

both：本元素左右两边均不允许有浮动元素。

7.js基础知识

7.1 JavaScript简介

JavaScript语言的前身叫作LiveScript，自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的LiveScript进行重新设计，并改名为JavaScript。

ECMAScript作为一种语法规则和标准，是JavaScript三大组成中的核心；DOM提供方法JavaScript来操作HTML的标签节点；而BOM提供方法让JavaScript操作浏览器。

JavaScript是一种通用的脚本编程语言，也是一种基于对象（Object）和事件驱动（Event Driven），并具有安全性能的脚本语言。在数百万张页面中，JavaScript被用来操作HTML页面、响应用户操作、验证数据等。

7.2 DOM0级事件和变量

DOM0级事件 DOM0级事件就是将一个函数赋值给一个事件处理属性。例如，给网页中的button对象定义了一个id，通过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。