【wed前端初级课程】第一章 什么是HTML

news2024/11/27 12:42:23

什么是WEB前端？

简单来说就是网页，只是这个网页它是由多种技术参与制作的，用来向用户展示的页面。

  • HTML(超文本标签语言)：它决定了网页的结构。

  • CSS：网页的装饰器。

  • JavaScript：JavaScrip最初是因为校验而产生的。（数据交互、网页特效）

第一款浏览器MOSIAC

第一款商用的浏览器是netscape（网景）的navigator（导航者）

W3C制定了web的相关规范。

一、HTML的运行环境和开发环境

开发环境只需要一个记事本即可

运行环境只需要有浏览器即可

二、标签的语法结构

结构：<标签 属性=“属性值”>   内容部分或称区域   </标签结束>

1、标签大多成对出现又开始<>和结束</>。（自结束标签除外）

2、标签内可以有属性，有属性必有值。（布尔型属性除外如muted）

3、开始和结束标签之间包含的内容被称为区域。

4、标签不区分大小写。

三、页面的分类

静态页面：是指不修改网页源码的前提下，无论何时何地去访问都会得到同样的结果。

动态页面：网站会根据信息做出的实时反馈。例如注册，论坛等等。

四、常用标签

（一）head中常用标签

1、<meta>标签

charset属性：用来设置页面的编码方式（常见编码有GBK,UTF-8,BIG,bg2312）；

name属性：可以有keyword，description，这两个属性可以影响到网页的排名。

2、<title>标签

用来定义页面的主体，影响选项卡显示的内容。

（二）body中的常用标签

<b>加粗<div>块标签
<strong>加粗<span>行内标签
<i>斜体<pre>格式化标签
<em>斜体<sup>上标签
<u>下划线<sub>下标签
<del>中划线<hr>加一条灰线
<br>换行<h1、h2、、、>逐渐变小的字体
<p>段落<small>比前面的字体更小

（三）特殊符号

4306f407d1a7fc8299eb4cef56638e5c.png

五、多媒体标签

（一）图片标签

格式：<img   src="资源路径"  alt=“资源不存在时显示的内容”>

（路径填写方式：绝对路径、相对路径、网络路径）

图片的格式都有哪些

1、jpg：现在多为无损格式，并且它是不支持透明通道。

2、png：无损格式，并且它支持透明通道。

3、bmp：无损，支持透明，体积大。

4、gif：动图，只支持256色

（二）视频标签

格式：<video    src="day1.mp4"    controls="controls">

属性：

controls显示控制界面
autoplay自动播放，但要在开启mutde的前提下
width=“800”设置宽度为800px
loop自动循环播放
muted静音

（三）音频标签

格式：<audio      src="./歌.mp3"    controls="controls" >

（属性与视频标签一致）

六、表格标签

表格标签：是由table、tr、td三个标签构成，同时可以使用语义化标签thead、tbody、tfoot进行规划。

（一）表格的合并

行合并：rowspan属性用于进行表格的行合并

列合并：colspan属性用于进行表格的列合并

（二）表格的背景

设图片为背景：<table  background="图片路径”>

设置背景底色：<table  bgcolor=“#ccc”> (#ccc的背景为灰色）

七、超链接标签

1、格式：<a   href="超链接" >   显示的内容   </a>

2、属性：

href：所需要跳转的网页链接

target：为_blank的时候 跳转的网页会新建选项卡

锚链接

<a   id="top"  href="#bottom">   跳到底部  </a>

<a   id="bottom"  href="#top">   回到顶部  </a>

热区超连接

一个图片多个链接，可将分割出多个链接区域，每个区域叫一个热区。

 <img src="images/china.jpg" usemap="#Map"> 
        <map name="Map"> 
            <area shape="rect" coords="456,251,485,319" href="shaanxi.html"> #矩形
            
            <area shape="circle" coords="402,299,23" href="shanxi.html"> #圆形
            
            <area shape="poly" coords="400,365,446,268,446,381" href="ningxia.html"> #多边形

        </map>

八、相关练习

练习1：

02674038d137486a835e225d614bd67b.png

练习1代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>工商银行汇款单</title>
	</head>
	<body>
		<h2>工商银行电子汇款单</h2>
		<table border="1" witch=1000 cellpadding=0 cellspacing=0 >
			<thead>
				<tr>
					<td colspan="2"><b>回单类型</b></td>
					<td >网上转账汇款</td>
					<td colspan="2"><b>指令序号</b></td>
					<td>HQH00000000000000013878172</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="4"><b>收<br>款<br>人</b></td>
					<td>户名</td>
					<td>老牟</td>
					<td rowspan="4"><b>付<br>款<br>人</b></td>
					<td>户名</td>
					<td>老刘</td>
				</tr>
				<tr>
					<td><b>卡号</b></td>
					<td>000000000001</td>
					<td><b>卡号</b></td>
					<td>000000000002</td>
				</tr>
				<tr>
					<td>地区</td>
					<td>南京</td>
					<td>地区</td>
					<td>杭州</td>
				</tr>
				<tr>
					<td><b>网点</b></td>
					<td>工商江苏南京业务处理中心</td>
					<td><b>网点</b></td>
					<td>江苏徐州业务中心</td>
				</tr>
				<tr>
					<td colspan="2"><b>币种</b></td>
					<td>人民币</td>
					<td colspan="2"><b>钞汇标志</b></td>
					<td>钞票</td>
				</tr>
				<tr>
					<td colspan=2""><b>金额</b></td>
					<td>1.00元</td>
					<td colspan="2"><b>手续费</b></td>
					<td>0.57元</td>
				</tr>
				<tr>
					<td colspan="2"><b>合计</b></td>
					<td colspan="4">人民币（大写）：壹圆整</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2"><b>交易时间</b></td>
					<td>2017年6月1日</td>
					<td colspan="2"><b>时间戳</b></td>
					<td>2017-06-01-13.00.00。00000</td>
				</tr>
			</tfoot>
		</table>
		票据打印时间：2017-06-01 15:00:12<br>
		<del>票据打印单位：江苏徐州业务中心</del><br>
		操作员：大曾
	</body>
</html>

练习2：

184cc50c7b194a238292d5287b1aaf9b.png

 练习2代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>李白诗词</title>
	</head>
	<body>
		<h2>将进酒 <small> 君不见黄河之水天上来</small></h2>
		<table>
			<tr>
				<td><img src="21.jpg" alt="李白"/></td>
				<td>
				<pre>
君不见，黄河之水天上来，奔流到海不复回。<br />
君不见，高堂明镜悲白发，朝如青丝暮成雪。<br />
人生得意须尽欢，莫使金樽空对月。<br />
天生我材必有用，千金散尽还复来。<br />
烹羊宰牛且为乐，会须一饮三百杯。<br />
岑夫子，丹丘生，将进酒，杯莫停。<br />
与君歌一曲，请君为我倾耳听。<br />
钟鼓馔玉不足贵，但愿长醉不愿醒。<br />
古来圣贤皆寂寞，惟有饮者留其名。<br />
陈王昔时宴平乐，斗酒十千恣欢谑。<br />
主人何为言少钱，径须沽取对君酌。<br />
五花马，千金裘，<br />
呼儿将出换美酒，与尔同销万古愁。<br />
				</pre>
				</td>
			</tr>
		</table>
	</body>
</html>

练习3：

9b596765460c4a288686075af0a59548.png

 练习3代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热门电影板块</title>
	</head>
	<body>
		<h3>热门电影板块</h3>
		<hr>
		<table width=800>
			<tr>
				<td width=150><b>最近热门电影</b></td>
				<td width=50>热门</td>
				<td width=50>最新</td>
				<td width=80>豆瓣高分</td>
				<td width=80>冷门佳片</td>
				<td width=50>华语</td>
				<td width=50>欧美</td>
				<td width=50>韩国</td>
				<td width=130>日本</td>
				<td>更多>></td>
			</tr>
		</table>
		<hr>
		<table>
				<tr>
					<td><img src="31.jpg"/></td>
					<td><img src="32.jpg"/></td>
					<td><img src="33.jpg"/></td>
					<td><img src="34.jpg"/></td>
				</tr>
				<tr>
					<td>猜火车 8.1</td>
					<td>贝尔科实验 6.0</td>
					<td>加州公路巡警 6.8</td>
					<td>歌声不绝 6.3</td>
				</tr>
				<tr>
					<td><img src="35.jpg"/></td>
					<td><img src="36.jpg"/></td>
					<td><img src="37.jpg"/></td>
					<td><img src="38.jpg"/></td>
				</tr>
				<tr>
					<td>明日的我与昨日的我</td>
					<td>速度与激情8</td>
					<td>极速特工</td>
					<td>金刚狼3：殊死一战</td>
				</tr>
		</table>
	</body>
</html>

都看到这里了，创作不易，大家点个赞再走呗！！！- ̗̀(๑ᵔ⌔ᵔ๑)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/402643.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux系统编程】06：共享内存

【Linux系统编程】06：共享内存

共享内存 OVERVIEW共享内存一、文件上锁flock二、共享内存1.关联共享内存ftok2.获取共享内存shmget3.绑定共享内存shmat4.绑定分离shmdt5.控制共享内存shmctl三、亲缘进程间通信1.共享内存写入与读取2.共享内存解绑与删除3.共享内存综合四、非亲缘进程间通信1.通过sleep同步2.通…
阅读更多...
Android 进阶——Binder IPC之Native 服务的启动及代理对象的获取详解（六）

Android 进阶——Binder IPC之Native 服务的启动及代理对象的获取详解（六）

文章大纲引言一、Binder线程池的启动1、ProcessState#startThreadPool函数来启动线程池2、IPCThreadState#joinThreadPool 将当前线程进入到线程池中去等待和处理IPC请求二、Service 代理对象的获取1、获取Service Manager 代理对象BpServiceManager2、调用BpServiceManager#ge…
阅读更多...
【算法数据结构体系篇class16】：图 拓扑排序

【算法数据结构体系篇class16】：图 拓扑排序

一、图1&#xff09;由点的集合和边的集合构成2&#xff09;虽然存在有向图和无向图的概念&#xff0c;但实际上都可以用有向图来表达3&#xff09;边上可能带有权值二、图结构的表达1&#xff09;邻接表法 类似哈希表, key就是当前节点。value就是对应有指向的邻接节点2&…
阅读更多...
LeetCode——1590. 使数组和能被 P 整除

LeetCode——1590. 使数组和能被 P 整除

一、题目 给你一个正整数数组 nums&#xff0c;请你移除 最短 子数组&#xff08;可以为 空&#xff09;&#xff0c;使得剩余元素的 和 能被 p 整除。 不允许 将整个数组都移除。 请你返回你需要移除的最短子数组的长度&#xff0c;如果无法满足题目要求&#xff0c;返回 -1…
阅读更多...
PostgreSQL 数据库大小写规则

PostgreSQL 数据库大小写规则

PostgreSQL 数据库对大小写的处理规则如下&#xff1a; 严格区分大小写默认把所有 SQL 语句都转换成小写再执行加双引号的 SQL 语句除外 如果想要成功执行名称中带有大写字母的对象&#xff0c;则需要把对象名称加上双引号。 验证如下&#xff1a; 想要创建数据库 IZone&…
阅读更多...
Windows WSL配置ubuntu环境并登录

Windows WSL配置ubuntu环境并登录

一、Windows WSL配置ubuntu环境1、管理员运行cmd&#xff0c;执行以下命令启用“适用于 Linux 的 Windows 子系统”dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart2、管理员运行cmd&#xff0c;执行以下命令启用“虚拟机功…
阅读更多...
浅谈ChatGPT

浅谈ChatGPT

ChatGPT概述 ChatGPT是一种自然语言处理模型&#xff0c;ChatGPT全称Chat Generative Pre-trained Transformer&#xff0c;由OpenAI开发。它使用了基于Transformer的神经网络架构&#xff0c;可以理解和生成自然语言文本。ChatGPT是当前最强大和最先进的预训练语言模型之一&a…
阅读更多...
windows应用（vc++2022）MFC基础到实战(3)-基础（3）

windows应用（vc++2022）MFC基础到实战(3)-基础（3）

目录框架调用代码MFC 对象之间的关系访问其他对象CWinApp&#xff1a;应用程序类initInstance 成员函数运行成员函数OnIdle 成员函数ExitInstance 成员函数CWinApp 和 MFC 应用程序向导特殊 CWinApp 服务Shell 注册文件管理器拖放CWinAppEx 类用于创建 OLE 应用程序的操作顺序用…
阅读更多...
【算法题目】【Python】一文刷遍贪心算法题目

【算法题目】【Python】一文刷遍贪心算法题目

文章目录介绍分配饼干K 次取反后最大化的数组和柠檬水找零摆动序列单调递增的数字介绍 贪心算法是一种基于贪心思想的算法&#xff0c;它每次选择当前最优的解决方案&#xff0c;从而得到全局最优解。具体来说&#xff0c;贪心算法在每一步都做出局部最优选择&#xff0c;希望…
阅读更多...
Flutter——Isolate主线机制

Flutter——Isolate主线机制

简述 在DartFlutter应用程序启动时&#xff0c;会启动一个主线程其实也就是Root Isolate,在Root Isolate内部运行一个EventLoop事件循环。所以所有的Dart代码都是运行在Isolate之中的&#xff0c;它就像是机器上的一个小空间&#xff0c;具有自己的私有内存块和一个运行事件循…
阅读更多...
Linux下LED灯驱动模板详解

Linux下LED灯驱动模板详解

一、地址映射我们先了解MMU&#xff0c;全称是Memory Manage Unit。在老版本的Linux中要求处理器必须有MMU&#xff0c;但是现在Linux内核已经支持五MMU。MMU主要完成的功能如下&#xff1a;1、完成虚拟空间到物理空间的映射2、内存保护&#xff0c;设置存储器的访问权限&#…
阅读更多...
【Linux学习笔记】mmap-共享内存进程通信 vs 有名信号量和无名信号量

【Linux学习笔记】mmap-共享内存进程通信 vs 有名信号量和无名信号量

mmap和信号量实现进程间通信相关mmap1. mmap 使用的注意事项2. mmap的两种映射3. mmap调用接口以及参数4. 使用存储映射区实现父子进程间通信&#xff08;有名&#xff09;父子进程通信的三种方式unlink5. 创建匿名存储映射区6. 通过存储映射区实现非血缘关系进程间的通信信号量…
阅读更多...
SiteSucker for macOS + CRACK

SiteSucker for macOS + CRACK

SiteSucker for macOS CRACK SiteSucker是一个简单的macOS应用程序&#xff0c;允许您下载网站。它还可以将网站、网页、背景图片、视频和许多其他文件复制到Mac的硬盘上。 SiteSucker是一个Macintosh应用程序&#xff0c;可以自动下载Internet上的网页。它通过将网站的页面、…
阅读更多...
遥感影像道路提取算法——SGCN

遥感影像道路提取算法——SGCN

论文介绍 Split Depth-wise Separable Graph Convolution Network for Road Extraction in Complex Environment from High-resolution Remote Sensing Imagery&#xff08;TGRS&#xff09; 用于从高分辨率遥感图像&#xff08;TGRS&#xff09;中提取复杂环境中道路的分割深…
阅读更多...
java对象的创建与内存分配机制

java对象的创建与内存分配机制

文章目录对象的创建与内存分配机制对象的创建类加载检查分配内存初始化零值设置对象头指向init方法其他&#xff1a;指针压缩对象内存分配对象在栈上分配对象在Eden区中分配大对象直接分配到老年代长期存活的对象进入老年代对象动态年龄判断老年代空间分配担保机制对象的内存回…
阅读更多...
Spring的核心模块：Bean的生命周期（内含依赖循环+业务场景）。

Spring的核心模块：Bean的生命周期（内含依赖循环+业务场景）。

Bean的生命周期前言为什么要学习Bean的生命周期前置知识Spring Post-processor&#xff08;后置处理器&#xff09;Aware接口简单介绍Bean的实例化过程为什么会有bean的实例化&#xff1f;过程Bean的初始化阶段为什么会有Bean的初始化&#xff1f;Bean的初始化目的是什么&#…
阅读更多...
线性和非线性最小二乘问题的常见解法总结

线性和非线性最小二乘问题的常见解法总结

线性和非线性最小二乘问题的各种解法 先看这篇博客&#xff0c;非常好&#xff1a;线性和非线性最小二乘问题的各种解法 1. 线性最小二乘问题有最优解 但是面对大型稀疏矩阵的时候使用迭代法效率更好。 迭代法 有Jacobi迭代法、 Seidel迭代法及Sor法 【数值分析】Jacobi、Se…
阅读更多...
[ubuntu][GCC]gcc源码编译

[ubuntu][GCC]gcc源码编译

1.下载gcc安装包 https://ftp.gnu.org/gnu/gcc/ 选择一个需要的gcc版本&#xff0c;下载。 2.下载依赖包 查看下载的gcc安装包中contrib文件夹下的download_prerequisites文件&#xff0c;查看需要的依赖包版本。 根据download_prerequisites中红框位置的信息&#xff0c;在下…
阅读更多...
JSON.stringify()的5种使用场景

JSON.stringify()的5种使用场景

JSON.stringify() 方法将一个JavaScript对象或值转换为JSON字符串&#xff0c;如果指定了一个replacer函数&#xff0c;则可以选择性地替换值&#xff0c;或者指定的replacer是数组&#xff0c;则可选择性地仅包含数组指定的属性。 语法如下&#xff1a; JSON.stringify(value…
阅读更多...
电子技术课程设计基于FPGA的音乐硬件演奏电路的设计与实现

电子技术课程设计基于FPGA的音乐硬件演奏电路的设计与实现

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;乐曲电路 免费获取完整无水印论文报告&#xff08;包含电路图&#xff09; 文章目录一、设计任务要求二、总体框图三、选择器件四、功能模块五、总体设计电路图六、结束语一、设计任务要求 1、课程设计题目 设计一个乐曲演…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023