前端基础笔记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>
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
