前端专题 HTML5基础篇，从txt开始写网页

最新推荐文章于 2022-07-05 02:24:53 发布

极光雨雨

最新推荐文章于 2022-07-05 02:24:53 发布

阅读量1.2k

点赞数 1

分类专栏： # H5 CSS JS基础文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44131922/article/details/107797419

版权

H5 CSS JS基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

网页的最简单写法（txt中）

前提：保证你电脑上有浏览器，IE，火狐，谷歌都可以，应该又会有的吧…

HTML

超文本标记语言(Hyper Text Markup Language)，浏览器网页，页面中可能含有文本，标点符号，图片，视频，音频，按钮等等，这些所有的元素都是同html这种标签去表示，这些标签都是定义好的，多用几次或者直接查阅相关资料就可以使用

在你的桌面新建一个txt文本，鼠标右键，新建文本如下图文本文档就是txt文档
在这里插入图片描述
名字可以随便起，打开后可以这样简单写一个

<html>
   <head>
		<title>打开网页后 你的标题名</title>
   </head>
<body>
这里写入你要写的内容，什么都可以
</body>

</html>

写完之后保存，关闭，把文件后缀名改为html，它可能会弹警告说改变后可能会导致无法使用，不用理他，直接确定，然后文本的图标会变为你浏览器的图标，直接双击打开，或者选中后回车打开。姐可以看到之前写的内容

这是一个页面最简单的写法，html可以让你里面的内容被浏览器识别并编译，body内写主要的内容，head里面是一些有关这个网页的信息，或者一些引用也可以写在这里。title 望文生义就是标题的意思。

写起来很不方便吧？

换一个专用的工具

Hbuilder 或者 HbuilderX

这两款工具写前端是很顺手的，提示功能很强大，而且是免费的，可以放心下，直接去官网下方便一点，去其他地方可能出现各种意外的情况… … … …

当你下好工具之后看一下工具里面的教程文档，然后就可以无比痛快的写前端代码了

来几个例子可以试试

具体每个标签有什么作用还是建议去看官方文档，或者别人总结好的，还有之前推荐的几个学习网站都比较全，我知道的不全就不献丑了,ԾㅂԾ,

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul>
			<li>
				<a href="http://baidu.com">百度</a>
			</li>
			<li>
				<a href="http://jd.com">京东</a>
			</li>
			<li>
				<a href="http://sina.com">新浪</a>
			</li>
			<li>news1</li>
			<li>news2</li>
			<li>news3</li>
		</ul>
		<hr size="5" noshade="noshade" />
		<ol>

			<li>
				<a href="http://sina.com">新浪</a>
			</li>
			<li>news333</li>
			<li>news444</li>
			<li>news222</li>
			<li>news333</li>
			<li>news444</li>
		</ol>
		
		<!--标签的嵌套-->
		<ul>
			<li>Color
				<ul>
					<li>red</li>
					<li>bule</li>
					<li>grey</li>
					<li>purple</li>
					<li>green
						<ul>
							<li>qianlv</li>
							<li>shenglv</li>
						</ul>
							
					</li>
					<li>balck</li>
				</ul>
			</li>
			<li>Field</li>
			<li>methods</li>
			<li>???no</li>
		</ul>
		<!--左侧加减号可以收起和展开代码段-->
		
		<!--src source-->
		<!--图片的宽窄只要设置一个就可以，都设置一般会变形-->
		<img src="img/wuxia.png" width="300px" alt="图片" title="武侠" />	
		<!--单位不写px则默认为px-->
		<!--title表示-->
		
		<table border="2px" width="100px" height="100" >
			<tr>	<!--一行-->
				<th>Name</th>	<!--加粗的标题-->
				<th>Sex</th>
				<th>Age</th>
			</tr>
			<tr align="center"> 
				<td>name1</td>	<!--列-->
				<td>male</td>
				<td>20</td>
			</tr>
			<tr	align="center">		<!--align  内容的位置-->
				<td>name2</td>
				<td>female</td>
				<td>20</td>
			</tr>
		</table>
		
		
		
		<!--跨行跨列-->
		<table border="" width="50px" height="50">		<!--原为三行三列-->
			<tr>
				<td colspan="2"></td>	<!--跨列  被占用的单元格要删掉-->
				
				<td rowspan="2"></td>
			</tr>
			<tr>
				<td rowspan="2"></td>	<!--跨行要将下一行的单元格删掉-->
				<td></td>
				
			</tr>
			<tr>
				
				<td colspan="2"></td>
				
			</tr>
		</table>
		
		<table border="" width="50px" height="50" cellspacing="0px">
		<!--cellspacing单元格之间的间隔-->
		
		<tr>
			<td colspan="2" rowspan="2"></td>		<!--以第一个单元格为基点 进行扩展-->
			
			<td></td>
		</tr>
		<tr>
			
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		</table>
		
		
		<table border="2px" height="100px" width="100px" cellspacing="0">
			<tr>
				<th>name</th>	<!--同列的内容一致 要合并只需要找到第一个进行row合并-->
				<th>author</th>
				<th>age</th>
			</tr>
			<tr>
				<td>A</td>
				<td>A1</td>
				<td>a2</td>
			</tr>
			<tr>
				<td>B</td>
				<td rowspan="2">B1</td>
				<td rowspan="2">B2</td>
			</tr>
			<tr>
				<td>C</td>
				
			</tr>
		</table>
		
		<!--列表前面的样式使用type修改-->
		<ul type="square">
			<li>aaaaa</li>
			<li>bbbbb</li>
			<li>yyyyy</li>
		</ul>
		<ol type="I">
			<li>dawd</li>
			<li>12313</li>
			<li>daw1</li>
			<li>dawd</li>
		</ol>
		
	</body>

</html>

再来一个案例看看其他标签的效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Day1</title>
		<link rel="shortcut icon" href="img/favicon.ico" />
		<!--图标制作-->
		<!--百度ico制作 或者制作ico图标  或其他图片也可以 但会被压缩-->
	</head>

	<body>
		这是普通文本<br>
		<strong>加强文本</strong><br />
		<i>斜体</i><br />
		<em>em标签</em>
		<span>字体</span><br />
		<font size="4" color="chocolate">font</font><br />
		
		<p>案件恩菲看手机呢发 违反那我i额发为非警务i而佛问佛发表给
			我乖乖然后给无公害无公害五个毫无i给u韩国i无花果一无</p>
			<!--段落之间会自动换行-->
		<p>kjdajbiabnjanc;bwlksbhfjsbfjk</p><br />
		
		<a href="http://baidu.com">daidu</a><br />	<!--不建议使用绝对路径-->
		<a href="http://sina.com">xinliang</a><br />	<!--http也表一种绝对路径-->
		<a href="xxxx.html">下一页</a>    <!-- 也可以跳到自己写的其他页面 -->
		
		
		<video src="img/AKINO - 海色.mp3" controls="controls" autoplay="autoplay" muted="muted">MP3MP3MP3MP3</video>
		<!--src表路径   autoplay表自动播放 需要跟后面的字  muted 表静音-->
		<!--更新后需要autoplay 和 muted 同时使用才能自动播放-->
		<!--controls 属性出现控制的进度条-->
		

		<h1>H1标签</h1>
		<h2>H2标签</h2>
		<h3>H3标签</h3>
		<h4>H4标签</h4>
		<h5>H5标签</h5>
		<h6>H6标签</h6>
		
		
	</body>

</html>

总的来说，HTML5其实是很简单易用的，只要多试试，就会发现其实并不难。

当你用Hbuilder后，可以直接在新建的HTMl页面中写，就可以直接看到效果了，txt并不常用。

极光雨雨

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端专题 HTML5基础篇，从txt开始写网页

网页的最简单写法（txt中）前提：保证你电脑上有浏览器，IE，火狐，谷歌都可以，应该又会有的吧…HTML超文本标记语言(Hyper Text Markup Language)，浏览器网页，页面中可能含有文本，标点符号，图片，视频，音频，按钮等等，这些所有的元素都是同html这种标签去表示，这些标签都是定义好的，多用几次或者直接查阅相关资料就可以使用在你的桌面新建一个txt文本，鼠标右键，新建文本如下图文本文档就是txt文档名字可以随便起，打开后可以这样简单写一个<html>
复制链接

扫一扫