前端基础笔记01-HTML介绍
1.HTML主体
-
HTML标签大多都是成对出现的(也有单标签),在写标签的时候,如果是双标签,一定要先将双标签都写完,再去添加其中的内容,以防止标签未正确关闭。
-
HTML文档主体结构
<!-- HTML5格式标识,确保不同的浏览器能统一渲染显示 --> <!DOCTYPE html> <!-- html标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。 --> <html> <!-- head标签定义了文档头部,,描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。--> <head> <!-- meta可提供有关页面的元信息,在HTML5中是单标签 --> <meta charset="utf-8"> <!-- title定义了网页标签页的名称 --> <title>这是网页名称</title> </head> <!-- body定义了网页的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。) --> <body> 这是一个正常文本。 </body> </html>
2.常见标签
<!-- HTML5格式标识,确保不同的浏览器能统一渲染显示 -->
<!DOCTYPE html>
<!-- html标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。 -->
<html>
<!-- head标签定义了文档头部,,描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。-->
<head>
<!-- meta定义了文档的属性 -->
<meta charset="utf-8">
<!-- title定义了网页标签页的名称 -->
<title>测试页面</title>
<!-- style 定义了显示样式,可以写到CSS中 -->
<style type="text/css">
p{font-family: "宋体";}
</style>
</head>
<!-- body定义了网页的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。) -->
<body>
<!-- 使用超链接方式作为回到顶部的标记 -->
<a id="top"></a>
<!-- 普通文本默认字体大小为16px或1em (16px=1em) -->
这是一个正常文本。
<!-- 标题标签只有六个级别,都具有文本加粗效果 -->
<h1>一级标题,文本加粗,标题中的字号最大</h1>
<h2>二级标题,文本加粗,字号比一级标题小,下级标题字号依次减小</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题,最小的标题级别</h6>
<h7>没有此标签,但格式正确,浏览器也能正常解析显示,但没有特殊效果</h7>
<p>第一个段落,使用p标签,具有段落含义,没有其他特殊效果</p>
<!-- br标签是单标签,作用是手动换行 -->
<p> br标签是单标签, <br/> 作用是手动换行 </p>
<!-- hr是个单标签,效果是一条水平横线 -->
<hr />
<!-- img是用于添加图片的标签,是单标签,
src中填写图片的路径,相对路径和绝对路径都可以,路径中包含图片的准确名称
图片可以直接设定图片的宽width高height
alt:用于作为图片加载失败时的文字提示-->
<img src="./img/six.png" alt="壁纸" width="288px" height="180" >
<br>
<!-- a标签是超链接标签,点击标签体中包含的内容的任意部分都可以作为跳转到herf提供的超链接地址, target="_blank"作用是在新标签页中打开网页,target="_top"是在当前窗口中打开(是默认方式)-->
<a href="https://www.baidu.com" target="_blank">百度主页</a>
<br>
<!-- 将图片作为跳转链接 -->
<a href="https://www.baidu.com/" title="百度首页" target="_blank">
<img src="./img/logo-baidu.png" >
</a>
<div>div是无语意标签,可用于区域划分</div>
<div>div中的内容显示完毕后在结束时是会自动换行的,</div>
<span>span是无语意标签,属于行内标签,</span><span>一个span标签结束后不会自动换行,</span>
<span>会在行尾直接显示下一个标签的内容。</span>
<!-- 点击回到顶部,会回到本页顶部 -->
<a href="firstWeb.html#top">回到顶部</a>
</body>
</html>
在浏览器中的样式:
3.列表标签
- 将内容以列表的形式按从上往下进行排列,列表分为三种
- 无序列表
- 有序列表
- 自定义列表
代码示例
<div >
无序列表,列表标识默认样式是实心原点,可用type指定排序类型
<ul type="circle" >
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</div>
<!-- 无序列表 -->
<div id="">
有序列表,默认样式是阿拉伯数字从1开始,用type指定排序类型,start指定开始的位置
<!-- type="a" start="3" 按小写字母表排序,从第三个开始 -->
<ol type="a" start="3" >
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</div>
<div id="">
自定义列表,dt相当于标题,dd里是内容描述
<dt>列表标题</dt>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dt>列表标题</dt>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
</div>
实际显示:
4.表格标签
- 和办公软件Excel表格是类似的,都有行(tr)和列(td),行及列都可以进行合并操作,但在HTML中行为主,行中包含列。
- 表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注,此时就需要考虑一个问题:如果不同区域中的位置因为跨行或跨列被占据了,那么整个表格都会发生错乱;为了避免出现跨行或跨列超出区域的问题,提供了区域划分的标签:thead、tbody、tfooter
示例列表:
代码:
<div>
表格演示:
<!-- table标签是表格主体 -->
<table border="1px" cellpadding="0" cellspacing="0" width="800px" height="252px">
<!-- -->
<tr >
<td colspan="4" align="center">跨四列</td>
</tr>
<tr>
<td></td>
<td colspan="3" align="center">跨三列</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2" align="center">跨两列</td>
</tr>
<tr>
<td width="25%" height="40"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td rowspan="2" align="center">跨两行</td>
<td height="40"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="40"></td>
<td></td>
<td></td>
</tr>
</table>
</div>