web前端

web前端

网页基础认知：

网站：因特网上根据一定的规则，用html等制作的用于展示特定相关内容相关网页的集合。

网页：构成网站的基本元素

网页都有啥？------文字、图片、音频、视频、超链接（网页打开看见到的）

网页背后有啥呢？------前端程序员写的代码-------举个栗子：哔哩哔哩网页的源代码（如下图）

结构、表现、行为-------html/css/JavaScript

html 超文本标记语言

超：------不仅有文字，还有图片、音频、视频等等

---------从一个网页跳转到另外一个网页（超级链接文本）

文本：

标记：文本要变成超文本，就需要各种标记符号

语言：每个标记的写法、读音、使用规则，构成标记语言

一点小tips：<开始标签>标签体（内容）</结束标签> 标签可以嵌套

关于html的骨架：

属性名=“属性值”

若属性名与属性值相同，只写属性名

关于html的字符集（发展历程）：

ASCII======>大小写字母、数字、符号（128个表）-----美国

ISO 8859-1======>扩充一些希腊字母（256个）-----欧洲

GB2312=====>扩充6763个汉字、682个字符

GBK======>继续追加收录汉字和字符20000+，，支持繁体中文

因国家太多，推出了万国码（沿用至今）

UTF-8：万国码，包含世界上所有文字与符号（推荐）

注意：

存储时，选对字符编号，否则数据会无法存储并丢失

存储与读取方式必须采用一致的，否则将会乱码。

在head标签中：

:浏览器不支持脚本时，所要显示的内容

:网页内部相对URL的计算基准

<h1>到<h6>字体逐渐减小

在vscode中可以使用！进行快速生成html框架

指令标签：

在中文段换行使用

指令，文本加粗使用指令，表格换行使用标签，切换单元格使用标签，插入一个视频使用标签，插入音频使用标签，未阐明的注释（下划线）使用标签，超链接使用文本，图片链接采用元素（加src="指定文件夹"指向图片的位置），链接使用

视频链接的一些小细节：

• width 和 height

  你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

• autoplay

  这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

• loop

  这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

• muted

  这个属性会导致媒体播放时，默认关闭声音。

• poster

  这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

• preload

  这个属性被用来缓冲较大的文件，有 3 个值可选："none" ：不缓冲"auto" ：页面加载后缓存媒体文件"metadata" ：仅缓冲文件的元数据

创建有序列表：

<ol>(可在后面加type="属性"进行更改列表序号类型)
    <li>1</li>
    <li>2</li>
</ol>

创建无序列表：

<ul>(可在后面加type="属性"进行更改列表序号类型)
    <li>1</li>
    <li>2</li>
</ul>

创建自定义列表：

<dl>
	<dt>
	</dt>
	<dd>
	</dd>
</dl>

<iframe>能够将另一个html页面嵌入当前界面中。

<table>创建表格
    <caption>1</caption>表头区域
    <thead>…</thead>
    <tbody>
   	 	<tr>
        	<th>11</th>
        	<th>11</th>
   	 	</tr>
   	 	<tr>
   	 		<td>22</td>
   	 		<td>22</td>
   	 	</tr>
    </tbody>
</table>

表格的合并：

跨行：

跨列：

表单：网页交互区，收集用户信息

<form action="" method="">(action将数据交给谁处理、method提交方式)
    <input type="text" name="">(name必有属性)
    <button>提交</button>
</form>

常见表单元素：

html的全局属性：