HTML的语法和常用标签

最新推荐文章于 2021-08-02 20:06:54 发布
最新推荐文章于 2021-08-02 20:06:54 发布
阅读量181 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46343373/article/details/107849292
版权

基本语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- ①标签不能交叉嵌套 -->
	正确：<p><i>早安，Alex</i></p>
	错误：<p><i>早安，Alex</p></i>
	
	<!-- ②标签必须正确关闭 -->
	<!-- i.有文本内容的标签： -->
	正确：<p>早安，Alex</p>
	错误：<p>早安，Alex
	
	<!-- ii.没有文本内容的标签： -->
	正确：aaaaaa<br />bbbbbbbb
	错误：aaaaaa<br>bbbbbbbb
	
	<!-- ③属性必须有值，属性值必须加引号 -->
	正确：<font color="blue">早安，Alex</font>
	错误：<font color>早安，Alex</font>
	错误：<font color=red>早安，Alex</font>
		
	<!-- ④注释不能嵌套 -->
	正确：<!-- 注释内容 -->
	错误：<!-- 注释内容<!-- 嵌套的注释 --> 溢出的注释 -->
	
</body>
</html>

常用标签

1、表格
用法

<table>
	<tr>
		<td></td>
		...
		<td></td>
	</tr>
	<tr>
		<td></td>
		...
		<td></td>
	</tr>
</table>

代码实操

<!--  <tr> </tr> 一行  -->
<!--  <td> </td> 一列  -->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<table border="1" align="center" width="80%">
		<tr><th>姓名</th><th>位置</th><th>公司</th><th>财富</th></tr>
		<tr>
			<td>王健林</td>
			<td>北京</td>
			<td>万达</td>
			<td>2211</td>
		</tr>
		<tr>
			<td>马云</td>
			<td>杭州</td>
			<td>阿里巴巴</td>
			<td>1889</td>
		</tr>
		<tr>
			<td>马化腾</td>
			<td>深圳</td>
			<td>腾讯</td>
			<td>1642</td>
		</tr>
		<tr>
			<td>王卫</td>
			<td>深圳</td>
			<td>顺丰速运</td>
			<td>1240</td>
		</tr>
	</table>

</body>
</html>

代码结果
在这里插入图片描述
2、超链接
用法

<a href="链接地址" >文本内容</a>

代码实操
a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="pages/target.html">跳转到目标页面，目标页面有美女！</a>
</body>
</html>

target.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	美女！
</body>
</html>

代码结果
在这里插入图片描述
点击文本，跳转页面
在这里插入图片描述

插入图片

用法

<img alt="加载失败显示内容" src="图片链接地址">

代码实操

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<img alt="加载图片失败" src="img/a.jpg">

</body>
</html>

代码结果
在这里插入图片描述

列表

用法

<!-- 有序-->
<ul>
	<li>..</li>
	<li>..</li>
</ul>

<!-- 无序-->
<ol>
	<li>..</li>
	<li>..</li>
</ol>

代码实操

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 在这里创建无序列表 -->
	<ul>
		<li>火影忍者</li>
		<li>死神</li>
		<li>海贼王</li>
		<li>名侦探柯南</li>
		<li>网球王子</li>
	</ul>
	
	<br /><br />
	
	<!-- 在这里创建有序列表 -->
	<ol>
		<li>漩涡鸣人</li>
		<li>黑崎一护</li>
		<li>路飞</li>
		<li>柯南</li>
		<li>越前龙马</li>
	</ol>

</body>
</html>

代码结果
在这里插入图片描述

标题和段落

用法

<h1>..</h1>   最大标题
<h2>..</h2>      .
<h3>..</h3>      .
<h4>..</h4>      .
<h5>..</h5>      .
<h6>..</h6>   最小标题

<p>...</p>    占一行

代码实操

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 在这里创建标题 -->
	<h1>江畔独步寻花</h1>
	<h3>唐·杜甫</h3>
	<!-- 在这里创建段落 -->
	<p>黄四娘家花满蹊</p>
	<p>千朵万朵压枝低</p>
	<p>留连戏蝶时时舞</p>
	<p>自在娇莺恰恰啼</p>

</body>
</html>

代码结果
在这里插入图片描述

康康叹气
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用标签
07-19
### HTML常用标签详解 #### 一、HTML简介与基本结构 **HTML**(HyperText Markup Language)是一种用于构建网页的标准标记语言。它通过一系列预定义的元素来规定网页内容的显示方式，这些元素由标签组成。 - **超...
HTML 语法常用标签属性及方法
06-16
### HTML 语法常用标签属性及方法 HTML (HyperText Markup Language) 是构成网页的主要语言之一，用于描述网页的结构和内容。以下将详细介绍基于HTML网页编程的常用标签及其属性，帮助开发者更好地理解和应用这些...
04-HTML详细用法
小凡子的博客
08-02 783
1.HTML与CSS 1.1.什么是HTML？什么是CSS？ HTML是HyperText Markup Language(超文本标记语言) 它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。 CSS (Cascading Style Sheets) 层叠样式表 ​ 是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语
前端基础1：HTML基本语法和标签
qq_43479937的博客
11-05 283
写完代码要保存：ctrl+s，再去看网页才有效果。 文件命名要用英文：index.html 名称要遵守标识符规则，小写字母，数字，下划线。 换行标签： ，手动换行不起作用。 标题标签：到 注释标签：ctrl+/ 段落标签： 水平线标签： 字体样式标签：加粗：或者 倾斜：或 空格：  圆角中文状态下，输几个空格就是几个空格，否则输多少个空格都只显示一个空格。但是一般不用，都用...
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7185
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
html常用元素总结
lincoco49的博客
05-08 8115
一.HTML的基本结构 一个最基本的HTML文件需要包括以下代码块中的内容: 1.<!DOCTYPE html>： 该行与最后一行的</html>构成一对标签； 它始终放在文档的第一行； 该行中的!DOCTYPE用来告诉浏览器应该用什么样的html规范还解释该html文件，!DOCTYPE表示用标准的W3C标准来解释 2.<head></hea...
web---HTML基础知识
Allure泽宇的博客
06-11 5489
HTML基础知识内容总结
HTML5 常用语法一览(列举不支持的属性)
09-28
本文将详细解析HTML5中的常用语法以及不支持的属性。 首先，我们来看HTML5中的头部标记。`<head>`部分是网页的元信息区域，包括文档的标题和样式设置。`<title>`标签用来设定浏览器顶部显示的页面标题，`<meta>`...
JavaWeb基础之HTML
Jorocco的博客
03-05 279
1、超链接 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 超链接：
HTML基本语法格式（元素、标签）
热门推荐
qq_44598397的博客
03-06 2万+
HTML的语法格式 阅读提醒：由于博客显示问体所以元素的&lt;&gt;开始和&lt;/&gt;被省略了 HTML的主体格式 第一部分：和是网页文件的最外层标签，HTML中所有的内容都要在这里面； 第二部分：和标签之间文本是头信息，放在元素的最上面使用，头部分信息不会显示在浏览器窗口中，主要包括页面的一些基本描述语句，用于说明文件的标题和文件的公共属性。 第三部分：标签是HTML文件的主体标记，标...
HTML专题(二)-HTML常用标签
08-27 777
1.标题标签 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <!-- 浏览器不会解析标题标签title中的标签，原样显示--> <title>标题标签<h1>到<h6></title> </...
Html基本结构、语法规则、常用标记/标签
Dodddhdhdg的博客
09-18 1万+
Html基本结构、语法规则、常用标记/标签 （h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/）及空格符&nbsp; 注：自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言（Hpyer text markup language）; XHTML是可扩展超文本标记语言（扩展成XML文档）（Extensible text markup language）; HTML5:指的是第五次大修改规范（新标准）； 二、站`点的定义： 是存放整
HTML常用标签大全（前篇）
藏经阁
12-15 3879
什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面 --------------------- 作者：swh0318 来源：CSDN 原文：https://blog.csdn.net
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 608
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
基本HTML标签语法整理
coderge's CSDN Blog.
04-10 1317
1 html语法规范 1.1 基本语法概述 HTML标签是由尖括号包围的关键词.例如<html>. HTML标签通常是成对出现的,例始<html>和</html> , 我们称为双标签。标签对中的第一个标签是开始标签, 第二个标签是结束标签。 有些特殊的标签必须是单个标签(极少情况) . 例如 <br/>我们称为单标签。 1.2 标签关系 双标签关系可以分成两种,包含关系和并列关系 2 html基本结构标签 2.1 第一个html网页 每个网页都会有一个基
Java中类和对象的关系
qq_46343373的博客
07-29 4859
一、基本概念 1、类：类是一个模板，它描述一类对象的行为和状态。（比如一张汽车设计图纸） 2、对象：对象表示现实世界中一个具体的事物。对象是类的一个实例，有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。（比如根据汽车设计图纸设计出来的汽车） 3、类与对象的关系 （1）类是抽象的概念，仅仅是一个模板，比如说：“人”。 （2）对象是一个你能够看得到、摸得着的具体实体。 （3）类定义了对象将会拥有的特征（属性）和行为（方法） （4）类是对象的类型，对象是类的实例 二、
Form表单以及各种信息框(文本框，密码框，单选/复选框，下拉列表框)
qq_46343373的博客
08-16 2788
表单的使用 <form action="信息最后提交到的地方" method="get或者post"> <!-- 中间可以写入各种信息框--> </from> 使用案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>
库存管理系统（用户信息的增删改查）
qq_46343373的博客
08-02 1415
视图层`` package com.hyg.view; import java.util.List; import java.util.Scanner; import com.hyg.model.User; import com.hyg.service.UserService; public class Menu { UserService userservice = new UserService(); Scanner sc =new Scanner(System.in); //
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值