章十六、HTML —— 概述、HBuilderX安装、HTML基本语法、常用标签、特殊符号转义、表格、表单

三木几

已于 2024-05-26 17:14:38 修改

阅读量1.5k

点赞数 18

CC 4.0 BY-SA版权

文章标签： html 前端

于 2024-05-26 17:07:08 首次发布

本文链接：https://blog.csdn.net/king_faner/article/details/139207667

一、 HTML概述

● HTML(HyoecIext Markup Language)超文本标记语言

一、 HTML概述

C/S结构（Client+Server）客户端+服务器：

需要在电脑上安装的重终端,qq,微信,腾讯会议要安装一个特定的客户端才能运行

B/S结构（Browserl+Server）浏览器+服务器：

百度,京东,腾讯新闻.…..浏览器输入网址访问网站

● HTML(HyoecIext Markup Language)超文本标记语言

文本：文字字符

超文本：网页内容

标记：标签、标识

html语言就是一种标记语言,提供许多的标签,不同的标签功能不同，网页就是通过这些标签描述出来的最终由浏览器解释运行成我们看到的网页

二、 HBuilderX 安装

● 下载地址

等待下载，下载下俩是一个压缩包文件，解压~然后打开

● 创建项目

文件 --- 新建 --- 项目

选择普通项目，创建基本HTML项目

三、 HTML基本语法

● 声明

html4的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

html5的文档声明

<!DOCTYPE html>

如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。

● Head标签

Head标签(标签)包含了所有的头部标签标签。

● 头部区域的标签标签为: <title>，<style>，<meta>，<link>，<script>

<title>标签：定义网页的标题

<meta> 标签：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签：位于文档的头部

<meta charset="utf-8" />

<link rel="icon" href="ico地址">：标题处添加图标

● 一个HTMl的基本结构

<!-- 
 HTML的注释
 -->
<!DOCTYPE html> <!-- 声明 HTML语言的版本信息，为html5版本，告诉浏览器以html5运行 -->
<html><!-- HTML标签是网页的根标签，所有的内容都应该卸载此标签中 -->
	<head><!--头标签-->
		<meta charset="utf-8" /> <!-- 网页字符集 -->
		<meta name="keywords" content="家电，手机"/> <!-- 设置网页关键字，让搜索引擎能收到 -->
		<title>我的第一张网页</title> <!-- 网页标题 -->
		
		<link herf="img/baidu.ico" rel = "icon"/><!-- 网页题图 -->
        <!-- 如果没有这张照片就现将这句删掉 -->

	</head>
	<body> <!-- 身体标签，用来写网页内容 -->
		网页内容
	</body>
</html>

记着写完之后要 Ctrl + s 保存 ，然后点击运行，随便选一个

PS：可以在设置里把失去焦点自动保存打开

结果：

● 标签

HTML中的标记指的就是标签，HTML使用标记标签来描述网页。

结构：

<标签名>标签内容</标签名> 闭合标签（有标签内容）

<标签名/> 自闭合标签（无标签内容）

<body> <!-- 身体标签，用来写网页内容 -->
	
		网页内容<br />
		
		<!--
			标签结构 和 写法
			1、<开始标签>  </结束标签>  闭合标签（双标签）
			
			2、完成一个特定的设置功能，没有标签体
			<标签名 属性 = ""  />  自闭和标签（单标签）
			<br/>换行标签
		-->
		
		<b>百度</b> <br/>新浪 <br />
			
		
		
	</body>

● 标签属性

标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：<body text=”red”>

1.属性的格式：属性名 = “属性值“

2. 属性的位置： <标签名属性名 = “属性值“ >xxx</标签名>

3. 添加多个属性： <标签名属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

	<body> <!-- 身体标签，用来写网页内容 -->
	
		网页内容<

最低0.47元/天解锁文章

200万优质内容无限畅学