web开发 简单的html2

最新推荐文章于 2023-03-01 13:59:09 发布
最新推荐文章于 2023-03-01 13:59:09 发布
阅读量231 收藏
点赞数
分类专栏： web 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sermisry/article/details/119293115
版权

文章目录

块级元素

块级元素总是在新的行上开始，并尽可能的占据本行全部可用的宽度
常见的有

<address> <article> <aside> <blockquote><canvas> <dd> <div> <dl> <dt>
<fieldset><figcaption> <figure><footer><form><h1>~<h6><header> <hr><li><main>
<nav><noscript><ol><output><p><pre><section><table> <tfoot><ul><video>

行内元素

行内元素不会另起一行，只是占用必要的宽度

<a> <abbr> <acronym> <b> <bdo><big><br><button> <cite> <code> <dfn> <em>
<i><img><input> <kbd> <label> <map><object> <q><samp> <script> <select>
<small><span> <strong><sub> <sup><textarea ><time><tt><var>
  • 一般情况下，行内元素只能包含数据和其他行内元素
  • 块级元素可以包含行内元素和其他块级元素
  • 这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构
<!DOCTYPE html>
<html>
<head>
    <title>换行</title>
    <style>
        span { color: red }
    </style>
</head>
<body>
    <!--span是行内元素，不会换行，br相当于是换行符-->
    <p>或许是不知梦的缘故，<br />流离<span>之人追</span>逐幻影</p>
    <p>生人无与相惜者，<span>曰悲</span></p>
    <a href="https://space.bilibili.com/456687192" target="_blank">一键进入</a>
</body>
</html>

html字符实体

  • 在 HTML 中，某些字符是预留的。不能使用包含这些字符的文本。
  • 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
  • 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
    字符实体查阅 小甲鱼

下面的这种情况在网页显示不出来

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>pre元素演示</title>
</head>
<body>
	<pre>
		<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<title>pre元素演示</title>
		</head>
		<body>
		
		</body>
		</html>
	</pre>
</body>
</html>

要用到字符实体

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>插入代码演示</title>
</head>
<body>
	<!--pre元素插入代码-->
	<pre>
		&#60;!DOCTYPE html&#62;
		&#60;html&#62;
		&#60;head&#62;
			&#60;meta charset="utf-8"&#62;
			&#60;title&#62;pre元素演示&#60;/title&#62;
		&#60;/head&#62;
		&#60;body&#62;
		
		&#60;/body&#62;
		&#60;/html&#62;
	</pre>
	<!--code元素插入代码-->
	<p>HTML中注释的语法是：<code>&#60;!--这里写注释的内容--&#62;</code></p>
	<!--pre和code插入代码-->
	<pre>
	<code>
		&#60;!DOCTYPE html&#62;
		&#60;html&#62;
			&#60;head&#62;
				&#60;title&#62;七里香-周杰伦&#60;/title&#62;
			&#60;/head&#62;
			&#60;body&#62;
				&#60;h1&#62;七里香&#60;/h1&#62;
				&#60;h6&#62;哈哈哈&#60;/h6&#62;
				&#60;p&#62;是一种鸡屁股&#60;/p&#62;
			&#60;/body&#62;
		&#60;/html&#62;
	</code>
	</pre>
	<!--var、kbd、samp元素-->
	<!--定义程序的变量、定义用户的输入、定义程序的输出-->
	<p>上面的代码定义了一个变量<var>user_input</var>，用于定义用户的输入</p>
	<p>如果用户的输入是<kbd>香蕉</kbd>，那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p>
</body>
</html>

引用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>引用演示</title>
</head>
<body>
	<!--q元素用于简短的行内引用-->
	<p>孔子有云：<q>学而不思则罔，思而不学则殆</q></p>
	<!--cite包括一个标题-->
	<p><cite>《百度百科》</cite>中对龙族有如下解释</p>
	<!--blockquote采用缩进的形式引用-->
	<blockquote>
		<p>《龙族》是作家江南创作的系列长篇魔幻小说</p>
		<p>由《龙族Ⅰ火之晨曦》、《龙族Ⅱ悼亡者之瞳》、《龙族Ⅲ黑月之潮》、《龙族Ⅳ奥丁之渊》，《龙族Ⅴ：悼亡者的归来》组成</p>
		<p>2009年10月1日开始在小说绘上连载，第一部于2010年04月首次出版，第二部于2011年05月出版，第三部上篇于2012年12月出版，第三部中篇于2013年07月出版，第三部下篇于2013年12月出版，第四部则于2015年10月出版，第五部于2018年5月15日在QQ阅读平台开始连载</p>
	</blockquote>
	<!--abbr元素可以包含一个可能不认识东西-->
	<p><abbr title="哔哩哔哩">BiliBili.com</abbr>是一个网站</p>
	<!--dfn元素用于包裹术语-->
	<p><dfn>HTML</dfn>是一门用于创建网页的标准标记语言</p>
	<!--address元素包裹作者的地址，邮箱等联系方式-->
	<address>
		<strong>联系我们：</strong><br>
		邮箱：905854985@qq.com<br>
		微信：123456
	</address>
	<!--ruby元素用于给出拼音，和rt元素以及rp元素搭配使用-->
	<ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
	<ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby>
	<ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
	<ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
	<br>
	<!--bdo元素默认dir属性是ltr从左到右-->
	<bdo dir="rtl">
	<ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
	<ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby>
	<ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
	<ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
	</bdo>
</body>
</html>

格式化元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>格式化元素演示</title>
	<style type="text/css">
		.bold {font-weight: bolder;}
		.italic {font-style: italic;}
	</style>
</head>
<body>
	<!--使用strong元素表示重要的内容-->
	<!--使用b元素表示粗体，没有附带表示任何表示重要的语义-->
	<p>
		总政版<b>《毛主席语录》</b>出版后，地方出版部门纷纷要求加印。人民出版社报经领导部门批准，从1964年9月开始向地方供应总政版语录的纸型，人民出版社也先后出版多种版本，均在内部发行。<strong>文化部规定，不在报上发消息，不登广告，不公开陈列，不卖给外国人。</strong>
	</p>
	<!--em元素表示强调，斜体-->
	<!--i元素表示斜体，没有强调的语义-->
	<p>我们都是<em>小怪兽</em>，有一天会被正义的奥特曼打死。</p>
	<p>let us across <i>hell</i> and reach to heaven!</p>
	<!--使用css代替b和i元素-->
	<p class="bold">这里的内容加粗</p>
	<p class="italic">这里的内容是倾斜的</p>
	<!--del元素是删除线和ins元素是下划线-->
	<p>我的网名由<del>木土子</del>变成了<ins>Tumuzi</ins>，因为那个人</p>
	<!--s元素表示删除线，表示错误-->
	<p>Something for <s>nothing</s></p>
	<!--u元素拼写错误的单词或者汉语中的专有名词-->
	<p>七宗罪，不是<u>玩具</u>，是“凡王之血，必以剑终”</p>
	<!--mark元素，标记作用-->
	<p><mark>可乐</mark>，<mark>雪碧</mark>，<mark>柠檬茶</mark>，请问客官喝点啥</p>
	<!--sup元素和sub元素，上标和下标-->
	<p>E=mc<sup>2</sup></p>
	<p>Mg+ZnSO<sub>4</sub>=MgSO<sub>4</sub>+Zn</p>
	<!--small元素，文本变小-->
	<p>这次<strong>六级过了</strong><small>把瘾</small></p>
</body>
</html>

排序

ol

属性值描述
reversedreversed规定列表顺序为降序
startnumber规定有序列表的起始值
type1、A、a、I、i(其中I和i代表罗马数字)规定在列表中使用的标记类型
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表演示</title>
	<style>
	/*通过list-style-type 设置列表的标志*/
	ul.b {list-style-type: disc;}
	ul.c {list-style-type: circle;}
	ul.d {list-style-type: none;}
	ul.e {list-style-image: url("../image/ori.png");}
	</style>
</head>
<body>
	<!--ul元素创建无序列表-->
	<ul>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	<!--ol元素创建有序列表-->
	<ol type="i" reversed>
		<li>HTML5 & CSS3</li>
		<li>JavaScript</li>
		<li>JQuery</li>
		<li>BootStrapt</li>
		<li>Vue</li>
		<li>PHP</li>
	</ol>
	<!--四种不同的标号-->
	<ul class="b">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	<ul class="c">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	<ul class="d">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	<ul class="e">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Me</li>
	</ul>
	<!--列表嵌套-->
	<p>ow联赛战队(不完全统计)</p>
	<ol>
		<li>HangZhouSpark</li>
		<ul>
			<li>Guxue</li>
			<li>Lige</li>
			<li>Shy</li>
			<li>IDK</li>
		</ul>
		<li>ChengDuHunters</li>
		<ul>
			<li>Ga9a</li>
			<li>Elsa</li>
			<li>Leave</li>
			<li>Jinmu</li>
			<li>Mommk</li>
		</ul>
		<li>ShangHaiDragon</li>
		<ul>
			<li>Fate</li>
			<li>Void</li>
			<li>Fleta</li>
			<li>Lip</li>
			<li>Leegangon</li>
			<li>Izzakiay</li>
		</ul>
	</ol>
	<!--定义列表-->
	<dl>
		<dt>Lip</dt>
		<dt>Fleta</dt>
		<dd>上海龙的两名队员</dd>
		<dd>上海龙的主C</dd>
	</dl>
</body>
</html>

案例：二级菜单

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>二级菜单</title>
	<style type="text/css">
	/*使菜单居中*/
		body {
			text-align: center;
		}
		/*菜单css代码*/
		.menuDiv {
			border-right: 1px solid #fff;
			overflow: hidden;
			display: inline-block;
		}
		.aSpecial {
			color: orange !important;
		}
		/*去掉a标签的下划线*/
		.menuDiv a {
			text-decoration: none;
		}
		/*设置ul和li的样式*/
		.menuDiv ul , .menuDiv li {
			list-style: none;
			margin: 0;
			padding: 0;
			float: left;
		}
		/*设置二级菜单绝对定位，并隐藏*/
		.menuDiv > ul > li > ul {
			position: absolute;
			display: none;
		}
		/*设置二级菜单的li样式*/
		.menuDiv > ul > li > ul > li {
			float: none;
		}
		/*鼠标放到一级菜单上，显示二级菜单*/
		.menuDiv > ul > li:hover ul {
			display: block;
		}
		/*一级菜单*/
		.menuDiv > ul > li > a {
			width: 120px;
			line-height: 40px;
			color: #fff;
			background-color: #429296;
			text-align: center;
			border-left: 1px solid #bbf;
			display: block;
		}
		/*在一级菜单中，第一个不设置左边框*/
		.menuDiv > ul > li:first-child > a {
			border-left: none;
		}
		/*在一级菜单中，鼠标放上去的样式*/
		.menuDiv > ul > li > a:hover {
			color: #fff;
			background-color: #174c4b;
			text-decoration: underline;
		}
		.menuDiv .aSpecial:hover {
			color: orange;
			background-color: #174c4b;
			text-decoration: underline;
		}
		/*二级菜单*/
		.menuDiv > ul > li > ul > li > a {
			width: auto;
			font-size: 16px;
			padding-left: 10px;
			padding-right: 10px;
			line-height: 36px;
			color: #456;
			background-color: #fff;
			text-align: left;
			border: 1px solid #ccc;
			border-top: none;
			display: block;
		}
		/*在二级菜单中，第一个设置顶边框*/
		.menuDiv > ul > li > ul > li:first-child > a {
			border-top: 1px solid #ccc;
		}
		/*在二级菜单中，鼠标放上去的样式*/
		.menuDiv > ul > li > ul > li > a:hover {
			color: #174c4b;
			background-color: #e6f3f4;
		}

	</style>
</head>
<body>
	<div class="menuDiv">
		<ul>
			<li>
				<a href="#">大会员</a>
			</li>
			<li>
				<a href="">消息</a>
				<ul>
					<li><a href="#" style="color:red;">收到的赞</a></li>
					<li><a href="#">收到的回复</li>
				</ul>
			</li>
			<li>
				<a href="">动态</a>
			</li>
			<li>
				<a href="">收藏</a>
			</li>
			<li>
				<a href="">历史</a>
			</li>
			<li>
				<a href="" class="aSpecial">创作中心</a>
			</li>
		</ul>
	</div>
</body>
</html>
Sermiscry
关注
专栏目录
Python Web开发（一）：Web开发简介
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
07-01 3万+
Python Web开发一：Web开发简介
Web 开发都需要学什么？
最新发布
Duiz33237的博客
12-04 3229
常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开发不同类型的web应用程序。 web开发的过程通常包括需求分析、设计、开发和测试。需求分析阶段涉及确定网站或应用程序的功能和目标用户。设计阶段包括创建网站的布局、用户界面和交互设计。开发阶段涉及编写代码并实现所需的功能。
web---HTML基础知识
Allure泽宇的博客
06-11 5523
HTML基础知识内容总结
＜!DOCTYPE html＞＜html＞＜head＞ ＜meta charset=“utf-8“ /＞ ＜meta name=“viewport“ conten
热门推荐
weixin_55229531的博客
03-01 1万+
HTML基础
zzbdkl的博客
01-23 1033
html基础知识内容，适合小白
HTML中的 ＜!DOCTYPE＞ 声明
qq_51735681的博客
04-05 2884
HTML中的 <!DOCTYPE> 声明： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> 内容...... </body> </html> 几乎所有主流浏览器都支持 <!DOCTYPE> 声明。（其中包括像IE、火狐、Opera、Go
HTML页面规范
weixin_30872157的博客
01-22 101
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>页面名称</title> <meta name="keywords" content=""/> <meta name="descripti...
海康威视web3.0开发包
07-12
这个开发包是海康威视在Web技术上的进一步升级，它融合了现代Web技术，如HTML5、JavaScript、Ajax等，提供了更丰富的交互体验和更高的性能。 web3.0通常指的是互联网的第三个阶段，强调的是语义网、数据互联和智能...
Java Web开发入门很简单源代码
01-30
第2篇为基础篇，主要介绍HTML、CSS、JavaScript、Servlet、JSP和JavaBean等Java Web开发所需的基础知识，并对这些基础知识进行练习和领悟；第3篇为提高篇，介绍当前流行的SSH开发框架，并带领读者对SSH框架进行整合...
python web开发实录源代码
11-07
首先，Python作为服务器端编程语言，其简洁的语法和强大的库支持使得Web开发变得简单易学。在Python Web开发中，我们通常会用到以下几个关键知识点： 1. **基础语法**：理解Python的基本数据类型（如字符串、列表、...
【前端】【HTML】基础知识
我的的博客哦
03-06 6211
🔰HTML指的是超文本语言，它是用来描述网页的的一种语言。🔰HTML不是编程语言，而是一种标记语言。🔰标记语言是一套标记标签。
html头部中各式各样的meta
weixin_30668887的博客
06-05 223
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
HTML基础教程
qq_47848696的博客
09-18 2873
转载：绿叶学习网之Html 若有侵权，联系删除！ 一、什么是HTML 这里是引用HTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。我们也把“标签”说成“元素”，例如把“p标签”说成“p元素” 语法 <标签符>内容</标签符> 二、基本标签 1、Html结构 1.1、 文档声明 是一个文档声明，表示这是一个HTML页面。 1.2、HTML标签 HTML标签的作用，是在告诉浏览器，这个页面是从开始，然后到结束的。 1
html使用
悲欢离合
04-25 805
1.html说明 1.1<!--注解 --> 注释:解释说明，对代码的说明；注释浏览器不解析 2html:超文本标签语言 浏览器解析； 弱语言：偶尔写错浏览也能解析；程序员编写的时候尽量规范； 3标签的作用：让html页面语义化 4标准的html格式 文档声明：<!doctype html> html标签：包括所有内容 head标签：文档头，包括一些关于页...
HTML入门学习
qq_46556545的博客
03-23 4006
基本标签 文档声明 <!DOCTYPE html> <!--文档声明，表示这是一个HTML页面--> HTML标签 <html> </html> <!--标签对，告诉浏览器这个页面的范围--> head标签 <head> </head> <!--标签对，是网页的头部，用于定义一些特殊的内容--> body标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 常见特殊符号
【Web笔记】Html学习手册
qq_37443884的博客
11-26 1608
HTML简介 HTML是**超文本标记语言（HyperText Markup Language）**的简称 HTML的前世今生 从初期的网络诞生后，已经出现了许多HTML版本: 版本 发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML...
HTML 教程：基础标签
村雨遥
04-26 1894
什么是 HTML HTML（Hypertext Markup Language），中文名超文本标记语言，是一种用于结构化 Web 网页及其内容的标记语言。 严格意义上讲，HTML 并不是一门编程语言，而是一种用于定义内容结构的标记语言。它由一系列的元素所构成，通过标签与内容组合得到我们所需效果，使其以某种形式呈现。 HTML 中的基础标签 既然说了 HTML 是由一系列的元素组成，那我们就来看看元素相关的内容。 元素又是由一对标签加上内容所共同构成，以下是一个简单的文本标签示例。 该元素中，主要组成部分如
前端入门HTML篇
qq_44354408的博客
08-04 841
HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。 标签是什么？ HTML标签 是由一对尖括号包裹的单词构成 例如: 所有标签中的单词不可能以数字开头；标签不区分大小写 和 推荐使用小写；标签分为两部分: 开始标签 和 结束标签 ， 两个标签之间的部分，......
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 7314
本文是作者在学习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.
HTML5移动Web开发实战指南
“HTML5移动Web开发指南，由唐俊开著，详细讲解了如何使用HTML5技术进行移动Web网站和WebApp的开发。书中涵盖了Web技术的发展、HTML5的新功能和特性、JavaScript移动开发框架如jQueryMobile、SenchaTouch以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值