HTML的基础知识

目录

一、什么是HTML

概述

书写格式

标签结构

二、基本标签

认识属性

排版标签

文本格式标签

列表标签

三、图片与超链接


一、什么是HTML

概述

what?(html是什么):超文本语言,通过标签进行开发,图文并茂,并且通过超链接的方式进行页面跳转

how?(作用):在网页中展示数据

书写格式

标签:<html></html>:开始标签与结束标签,标签不分大小写

属性=“属性值”多个属性用空格隔开

标签结构

<html> <!-- 根标签:一个html中,有且只有一个-->
	<!-- 根标签中,包含两个子标签:head,body -->
	<head><!-- 头部标签:定义编码和标题等内容,嵌入css,js文档 -->
		<meta charset="utf-8" />
		<title>第一个完美页面</title>
	</head>
	<body ><!-- 存放页面内容,所有标签都可放在body中 -->
		欢迎学习HTML
		以后要好好学习<br />天天向上
		<p align="left"
	</body>
</html>

二、基本标签

认识属性

三原色的表示形式:#rgb(0~f)、#rrggbb(00~ff)、#789

属性:结构:name="value"

排版标签

<!-- 排版标签 -->
		好好学习<br />天天向上
		<p align="left"中共贵州省委宣传部在贵州省新闻发布厅</p>
		<p align="center"举行贵州省全面深化改革工作新闻发布会</p>
		<p align="right"大家下午好!欢迎出席省委宣传部新闻发布会</p>
		<hr width="900px" align="left" size="200px" color="burlywood" />
		<span>标记标签1</span>
		<span>标记标签2</span>
		<div>容器层</div>
		<font size="400px" color="green" face="宋体"></font>
		

文本格式标签

<!-- 文本格式标签  strong b em i big small sup sub del-->
		<strong>加粗</strong>
		<b>加粗</b>
		<em>斜体</em>
		<i>斜体</i>
		<big>大号字体</big>
		<small>小号字体</small>
		<sub>下标</sub>
		<sup>上标</sup>
		<del>删除线</del>
		
		<!-- 标题标签:h1~h6 h1:1号标题  h6:6号标题 :带换行 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>

列表标签

<!-- 列表标签:分为无序列表和有序列表
			ol:有序列表  type=“”
			ul:无序  type=“disc”  circle圆心  disc实心
			square方形
		-->
		<ul type="disc">
			<li>今天我们举行“贯彻党的二十大精神</li>
			<li>推动贵州高质量发展”系列主题新闻发布会</li>
			<li>介绍我省全面深化改革工作情况</li>
		</ul>
		<!-- ol:有序列表   type="1" i,a,I,A
		start="2"起始从第几个开始
		-->
		<ol type="i" start="2">
			<li>出席今天发布会的有:</li>
			<li>省委政策研究室副主任</li>
			<li>省委改革办专职副主任肖章杰同志</li>
		</ol>
		<!-- 嵌套 -->
		<ul type="circle">
			<li>咖啡</li>
			<li>茶
				<ol type="1">
					<li>红茶</li>
					<li>绿茶</li>
				</ol>
			</li>
			<li>牛奶</li>
		</ul>

三、图片与超链接

<!-- 1.基本使用 -->
		<a href="http://www.baidu.com"target="_blank">跳转到百度  </a><br />
		<!-- 2.图片链接    a标签嵌套img#表示有超链接效果,但无法调 -->
		<a href="#"><img src="../img/方法.png"/></a><br />
		<!-- 3.锚链接  类似于md文档的 -->
		<a href="#aa">跳转到锚点位置</a>
		<img src="../img/方法.png" /><br />
		<img src="../img/方法.png" /><br />
		<img src="../img/方法.png" /><br />
		<img src="../img/方法.png" /><br />
		<a name="aa">我是锚点位置</a><br />
		<img src="../img/方法.png" /><br />
		<img src="../img/方法.png" /><br />
		<img src="../img/方法.png" /><br />

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值