编程技术

Document

前端编程语言的应用--html标记语言的应用

文章目录

前端编程语言的应用–html标记语言的应用

一.HTML前后端交互的介绍

前端用于给用户提供展示页面,以及用户数据接收

后端由前端调用,处理用户数据,并且请求数据库

处理完成的数据有前端接收后,给用户展示出来

58e56111ff0f0984099ed6982fd5bb2b

二.前端的介绍

1.用户浏览器直接渲染前端代码

五大浏览器:IE,火狐,谷歌,safari,opera

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

2.web构成标准

内容标准:HTML规范页面框架内容

表现标准:CSS规范页面样式

行为标准:JS规范规范页面用户交互行为

意义:

  1. 让web的防战前景更广阔
  2. 内容能被更广泛的设备访问
  3. 更容易被搜寻引擎搜索
  4. 降低网站流量费用
  5. 使网站更易于维护
  6. 提高页面浏览速度

三.HTML的应用

1.介绍

超文本标记语言(Hyper Text Markup Language, HTML）是一种用于创建网页的标记语言，网页文件的扩展名：.html或.htm

# vscode的插件
chinese
prettier
php interphense
# vscode常用快捷键
ctrl+/				#注释
ctrl+shift+[		#折叠代码
ctrl+shift+]		#展开代码
ctrl+s				#保存
ctrl+z				#撤销
ctrl+y				#取消撤销

2.HTML文档的基本结构

<!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head> 
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body> 
  唯有学习
  <h1>使我快乐</h1>
</body>
</html>

<head>定义页面全局属性,页面标题
<body> 定义页面主体信息（页面内容）

3.head常用标签

<title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
<title>测试页面</title> 

<meta charset="utf-8"/>  							#页面字符集环境
<meta name="Keywords" content="test" /> 			#搜索引擎关键字
<meta name="Description" content="简介、描述" />		#网站的简介和描述

4.body常用的标签

文本类的标签
# 标题 
<hn> n代表数字 1~6  定义页面内容标题

# 加粗
<b> 			#文本加粗
<strong> 		#强调加粗

# 斜体
<i> 			#倾斜
<em>...</em> 	#强调斜体

# 换行符
<br> 换行符
<p>  段落

# 字体样式
<font color= 	#字体颜色
	  size= 	#字体大小
	  face=> 	#字体样式

# 上标与下标
<sup> 			#上标
<sub> 			#下标

# 删除线
<del> 

# 页面分割线
<hr>
列表类的标签
#无序列表
<ul>			#无序列表
	<li></li>	#列表项
</ul>
#有序列表
<ol>			#有序列表
	<li></li>	#列表项
</ol>
#自定义列表
<dl>	自定义列表
<dt>	自定义列表头
<dd>	自定义列表内容
表格类的标签

image-20240825132949517

<table border=1>
<tr>
	<td>1</td>
	<td>2</td>
</tr>
</table>

<th>表头
<tr>行
<td>单元格
#合并单元格
rowspan 行单元格合并,删除额外的下一行单元格
colspan	列单元格合并,删除额外的下一列单元格
#表格属性
align 文本对齐方式
	left	#居左
	right	#居右
	center	#居中
图片类的标签
<img />
	src:图片名及url地址
	alt:图片加载失败时的提示信息
	title:文字提示属性
	width:图片宽度
	height:图片高度
	border:边框线粗细
超链接
<a></a> 将一个文本跳转到其他url
属性：href必须，指的是链接跳转地址
	target: 表示链接的打开方式：
		_blank  新窗口
		_parent 父窗口
		_self   本窗口（默认）
		_top	顶级窗口
		framename 窗口名
title：文字提示属性（详情）


锚点链接：页面定位
使用锚点：	  <a href="#a1">跳到a1处</a>
打锚点 <h1 id="a1">