2021-11-01

最新推荐文章于 2024-11-11 22:26:09 发布

%小猴子

最新推荐文章于 2024-11-11 22:26:09 发布

阅读量77

点赞数

文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_45944914/article/details/121083877

版权

HTML新手入门及（笔记）

H5能做什么？

HTML+CSS+JavaScrip
全栈：能写前端和后端
手机开发的页面（APP，小游戏，小程序），由H5开发
什么是网页制作？

微信的所以文章，小程序都是一个网页，由QQ浏览器制作

所以浏览器的网页都是由HTML编写
W3C 万维网非盈利组织软件规范，规则制定

HbuilderX内置的服务器，它自动刷新

<标记文字>：标记，超文本语言(Hyper Text MarKup Language)简称HTML

准备工作：安装编写工具 HbuilderX 及浏览器
嵌套类型一定要有缩进，用Tab键

<html>
	<head><meta charset="utf8"/>
	</head>
	<body>
		<center>这是一个网页，我的作用是居中</center>
		<button>这是一个网页，我的作用是制作一个按钮</button>
	</body>
</html>

<!DOCTYPE html>写网页开端一定要写这个，HTML5的标志

基本结构的代码展示：

<!DOCTYPE html>    <!--HTML5的标志-->
<html>
	<head>	<!--网页的头部，对网页基本信息说明-->
              
              	
		<meta charset="UTF-8"> <!-- #编码方式-->
		<title>这里写网页标题</title>
	</head>
	<body>
		这里写网页的内容
		<p>p标签代表段落，因此这里的内容会独占一行</p>
		<center>这是一个网页，我的作用是居中</center>
		<button>我的作用是制作按钮</button>
		
	</body>
</html>

编写一篇博客日志

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>标签字体大小</h1>
		<h4>总共有6种标签1-6</h4>
		<i>可以把字变成斜体字2021.11.1</i>
		<hr >       <!--画一条线-->
		<p>换行，也叫段落标签</p>
		<p>这是一排字，如何只把一部分字变粗？<b>b标签变粗文字</b></p>
		<p>一排文字，换行还可以用<br>我会被换到下一行</p>
		<p>文字间的间隔用”&nbsp;“，一个符号代表一个空格</p>
	</body>
</html>

结果展示
在这里插入图片描述

百度新闻列表

制作超链接：“”<a href="  超链接地址"></a>        !--超链接-->
<img src="img/图片1.png" />              <!--访问本地图片-->
<!--无序列表ul,有序列表ol-->

<ul> #有序是ol
	<li> 
		列表目录
	</li>
</ul>

无序列表：

<ul type="circle">序列为空心圆
<ul type="disc">序列为实心圆
<ul type="square">序列为方块

有序列表：

<ol type="1">
<ol type="A">等多种

<del>给文字增加删除线</del>
<u>给文字加下划线</u>
title="鼠标移到图片上显示文字提示"
 alt="打不开显示此文字"

代码：


```html

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度新闻列表</title>
	</head>
	<body>
		<h1>科技&nbsp;<img src="img/图片1.png"title="鼠标移到图片上显示文字提示" alt="打不开显示此文字"/> </h1>
		<hr />
		<ol type="A">
			<li> <a href="https://news.cctv.com/2021/11/01/ARTIFeJfqNbEkvrKjCuSxx5x211101.shtml?spm=C96370.PPDB2vhvSivD.EZ4sRtXz56aB.3">70余万套 占全年计划近八成</a></li>
			<li><a href="https://news.cctv.com/2021/11/01/ARTIWi1v71vbKnOzvLt5wAG1211101.shtml?spm=C96370.PPDB2vhvSivD.EZ4sRtXz56aB.4">个人信息保护法今起实施 中国互联网协会发出倡议书</a></li>
			<li><a href="https://news.cctv.com/2021/11/01/ARTIAYctZnZhOuw041x42PX2211101.shtml?spm=C96370.PPDB2vhvSivD.EZ4sRtXz56aB.5"target="_blank">铁路启动“双11电商黄金周运输”</a></li>
			<!-- target="_blank"在新的一个网页打开链接 -->
			<br />
			<del>给文字增加删除线</del>
			<u>给文字加下划线</u>
		</ol>
	</body>
</html>