HTML知识总结

最新推荐文章于 2024-11-08 21:38:46 发布

Fighter_AI

最新推荐文章于 2024-11-08 21:38:46 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： html5 html

本文链接：https://blog.csdn.net/fighter_ai/article/details/114766717

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML概述

HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
它是⼀种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML网页文可以使用记事本、写字板、HBuilder、Sublime 、VScode等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。

HTML文档的整体结构

HTML的内容是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间要有正确的嵌套。
通常一个HTML网页文件包含多个部分，如：标记头区<head>……</head>，内容区<body>……</body>，网页区<html>……</html>等等，一般来讲，当我们使用编辑器新建一个以html结尾的文件时，编辑器会自动帮你生成一些HTML文档必要的标签【注：HbuilderX就是如此】，大致结构如下：

<!DOCTYPE html><!-- 声明文档类型。出于历史原因需要，现在可有可无。-->
<html><!--这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。-->
   <head><!-- html文档的头部标签 -->
   	<meta charset="utf-8"><!-- 设置文档使用utf-8字符集编码 -->
   	<title>页面标题</title>
   </head>
   <body>
   	<!-- 网页内容区 -->
   </body>
</html>

基础语法

在HTML网页文档中，说直白一点，整个网页就是一堆标签，但是，这一堆标签并不是乱放的，他们是有结构，有含义地互相嵌套，接下来，简单地说明一下在HTML中，最基础的语法结构。【注：HTML的语法结构相比于c/c++等编程语言的语法可简单多了。】
1.双标签：<title>……</title>，开始标签为<title>，结束标签为</title>，值得注意的是，结束标签比起始标签多了一个斜杠，省略号中间的内容就是元素的内容，一般都是要表达的文本本身，整个标签合并起来才叫一个完整的元素。
2.双标签属性：在标签上面加上属性是比较简单的，比如：<body bgcolor="red">…</body>，直接在开始标签里面以一个空格隔开(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)，并写上属性=属性值（属性值由一对引号 “” 引起来）即可。
3.单标签(有的地方也叫做“空元素”，本质上是一样的)：例如：<br/>,<hr/>,<br>等，在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br > 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。
4.单标签属性：同双标签加属性一样，故在此就不再赘述，举例说明，比如:<hr width="800" />。
5.注释：与c/c++，java等编程语言不同的是，在HTML中，将一段内容变成注释的方式为如下：，在VScode和HbuilderX中，可以使用快捷键ctrl+/快速生成注释。
补充一点：HTML 不区分标签的大小写，但建议全部使用小写！

常用标签

标题和水平线

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，（注意：不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。）例如:<h1>This is heading 1</h1>。hr 标签在 HTML 页面中创建⼀条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在HTML 中，hr 标签没有结束标签，水平线标签是<hr />，它的常用属性有：align（对齐方式），size，width等等。

段落和换行

p 标签定义段落。p 元素会自动在其前后创建⼀些空白。浏览器会自动添加这些空间，我们也可以在样式表中规定。比如：<p>这是一个段落</p>。br标签为换行符号， br 标签是空元素（意味着它没有结束标签，因此这是错误的：<br></br>，正确的使用：<br/>）。

列表

无序列表

无序列表由 ul 和 li 标签组成。默认使用实心圆点作为每项的标志。

<ul>
 <li></li>
 <li></li>
 ......
</ul> <ul>
 <li>好好学习</li>
 <li>天天向上</li>
</ul>

属性	Value	描述
type	disc，circle，square	规定列表的项⽬符号类型。可以使⽤样式取代。dise：实⼼圆（默认）。circle：空⼼圆。square：⽅块

有序列表

有序列表由 ol 和 li 标签组成，默认使用数字作为每项的标志。

<ol>
 <li></li>
 <li></li>
 ......
</ol> <ol>
 <li>Coffee</li>
 <li>Milk</li>
</ol>

属性	Value	描述
type	1， a， A， i， I	规定在列表中使用的标记类型。 1：用数字形式表示序号（默认） a：用小写字母表示序号 A：用大写字母表示序号 i：用小写罗马数字表示序号 I（⼤写i）：用大写罗马数字表示序号

div和span

div

div 是⼀个块级元素，通常与css配合使用，用于布局。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与
其关联。
div 是⼀个块级元素。这意味着它的内容自动地开始⼀个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。

<div>content</div>

span

span 标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span>content</span>

格式化标签

pre

定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。比如：

<!-- pre标签中的内容将保持格式不变 -->
<pre>
从明天起，做一个幸福的人

喂马、劈柴，周游世界

从明天起，关心粮食和蔬菜

我有一所房子，面朝大海，春暖花开

从明天起，和每一个亲人通信

告诉他们我的幸福

那幸福的闪电告诉我的

我将告诉每一个人

给每一条河每一座山取一个温暖的名字

陌生人，我也为你祝福

愿你有一个灿烂的前程

愿你有情人终成眷属

愿你在尘世获得幸福

我只愿面朝大海，春暖花开
</pre>

文本标签

比如： b（粗文本）、i（斜体文本）、u（下划线文本）、del （中划线文本）、sub（下标文本）、sup（上标文本）等等。

a标签和图片

a标签（超链接）

这个标签在很多网页里面经常使用，通常是用来从一个文档页面跳转到从另一个文档页面。
a 元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性，a标签内的内容与普通文本没有区别，也就失去了超链接的功能。语法格式如下：

<a href="https://www.baidu.com/" target="_blank">百度</a>

说明：1. href即为需要跳转到的URL，可以是其他页面，或者当前页面。2. target规定在何处打开链接文档，比较常用的target值有以下：_blank ：开启新页面显示页面；_self ：当前页面显示跳转到页面，默认值。
补充：锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。使用如下：

<!-- 文档其余部分 -->
<h2 id="top">页首</h2>
<!-- 文档其余部分 -->
<a href="#top">返回顶部</a>
<!-- 文档其余部分 -->

图片

<img>标签表示向当前的html文档嵌入一幅图片，使用如下：

<img src="" alt="">

说明：1. src属性为该标签中很重要的属性，即图片文件的路径。2. alt属性当获取图片出现问题时显示的文字（占位符）。

表格和表单

表格

使用table标签来定义表格。<tr>表示行(tr元素包含⼀个或多个th或td元素), <td>表示行中的单元, <th>是表头的单元（将会加粗显示），使用方式如下：

<table>
		 <tr>
			 <th>编号</th>
			 <th>姓名</th>
			 <th>年龄</th>
		 </tr>
		 <tr >
			 <td>1</td>
			 <td>张三</td>
			 <td>18</td>
		 </tr>
		 <tr>
			 <td>2</td>
			 <td>李四</td>
			 <td>19</td>
		 </tr>
		 <tr>
			 <td>3</td>
			 <td>王五</td>
			 <td>20</td>
		 </tr>
</table>

表单

form 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元
素。
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。表单元素主要有：input元素，textarea元素，label元素，button元素等等。

<form action="http://www.baidu.com" method="get" id="myform" name="myform">
			 编号：<input type="hidden" name="userId" value="1" /> <br>
			 <label for="userName">姓名</label>：<input type="text" value="zhangsan" id="userName" name="userName" /><br>
			 密码：<input type="password" name="userPwd" maxlength="6" id="upwd" /><br>
			 性别：男 <input type="radio" name="userSex" value="man"  checked="checked"/> 
				   女 <input type="radio" name="userSex" value="woman" /> <br>
			 爱好：唱歌<input type="checkbox" name="userHobby" value="sing" />
				跳舞<input type="checkbox" name="userHobby" value="dance" checked />
				说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled" /><br>
			 生日：<input type="date" name="userDate" /><br>
			 头像：<input type="file" name="userHead" /><br>
			 简介：<textarea name="remark" rows="5"  cols="50">11111</textarea><br>
			 城市：
				<select name="city" multiple="multiple" size="3" >
				 <option >请选择城市</option>
				 <option value="Beijing" disabled="disabled">北京</option>
				 <option value="Shanghai" selected="selected">上海</option>
				 <option value="Hangzhou">杭州</option>
				 <option value="Shenzhen">深圳</option>
				</select>
				<br>
			 <input type="button" value="普通按钮" />
			 <input type="reset" value="重置按钮" />
			 <input type="submit" value="提交按钮" />
			 <!-- <input type="image" src="img/bd.png" /> -->
			 <button type="button">普通按钮</button>
			 <button type="submit">提交按钮</button>
			 <button type="reset">重置按钮</button>
		 </form>

其他

块级元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>

行内元素

元素和元素一个接一个进行显示，不会新起一行。

<span>姓名：</span>
<input name="username">

常用的字符实体

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>）等，这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
实体名称对大小写敏感！常用的字符实体有以下：

Fighter_AI

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录