目录
一、什么是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 />