前端学习笔记——HTML(二)

芜的欣
126 阅读6分钟

20230906

一、HTML标签

1.1、字体标签

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         <!-- span标签：文本容器，无特殊效果 -->
         <span>good morning</span>
         <b>粗体1</b>
         <strong>粗体2</strong>
         <i>斜体1</i>
         <em>斜体2</em>
         <u>下划线</u>
         <sup>上角标</sup>
         <sub>下角标</sub>
     </body>
 </html>

展示效果：

image-20230906091746529.png

1.2、自定义字体标签

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         <!-- span标签：文本容器，无特殊效果 -->
         <span>good morning</span>
         <b>粗体1</b>
         <strong>粗体2</strong>
         <i>斜体1</i>
         <em>斜体2</em>
         <u>下划线</u>
         <sup>上角标</sup>
         <sub>下角标</sub>
         
         <!-- 换行 -->
         <br> 换行符
         <br/> 功能一样
         <hr> 换行分割线
         <hr/> 功能一样
         <br>
         
         <!-- 自定义字体标签 -->
         <!-- font为自定义标签 size、color、face为系统自带的属性 -->
         <font size="20px" color="blue" face="Microsoft YaHei">今天是周三</font>
         <xxx>没有特殊功能的自定义标签</xxx>
     </body>
 </html>

展示效果：

1.3、换行标签

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         <!-- span标签：文本容器，无特殊效果 -->
         <span>good morning</span>
         <b>粗体1</b>
         <strong>粗体2</strong>
         <i>斜体1</i>
         <em>斜体2</em>
         <u>下划线</u>
         <sup>上角标</sup>
         <sub>下角标</sub>
         
         <!-- 换行 -->
         <br> 换行符
         <br/> 功能一样
         <hr> 换行分割线
         <hr/> 功能一样
         <br>
         
     </body>
 </html>

展示效果：

image-20230906091912646.png

1.4、标题标签

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         
         <!-- h标题标签， 默认左对齐，可以通过align属性来更改对齐方式-->
         <h1>一级标题</h1>
         <h2 align="center">二级标题</h2>
         <h3>三级标题</h3>
         <h4>四级标题</h4>
         <h5>五级标题</h5>
         <h6>六级标题</h6>
         <span>普通文字</span>
         
     </body>
 </html>

展示效果：

image-20230906093009612.png

1.5、段落标签

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         
         <!-- h标题标签， 默认左对齐，可以通过align属性来更改对齐方式-->
         <h1>一级标题</h1>
         <h2 align="center">二级标题</h2>
         <h3>三级标题</h3>
         <h4>四级标题</h4>
         <h5>五级标题</h5>
         <h6>六级标题</h6>
         <span>普通文字</span>
         <br />
         
         <!-- 段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距 -->
         段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距<br />
         段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距<br />
         段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距<br />
         <p>段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距</p>
         <p>段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距</p>
         <p>段落标签p：paragraph的缩写，包裹的内容为段落的文字，首行有缩进，默认自带内边距</p>
     </body>
 </html>

展示效果：

fb99a9f86d9c4d9e9ab91860bd989bae~tplv-k3u1fbpfcp-jj-mark 0 0 0 0 q75.png

1.6、超链接标签

a标签：基本功能

示例代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         <!-- 超链接标签：a -->
         <!-- 基本语法结构：<a href="跳转的页面">超链接文字</a> -->
         <a href="01基础.html">普通超链接</a><br />
         <a href="#">空链接</a><br />
         <a href="01基础.html" target="_blank">点击链接，打开新窗口</a><br />
         <a href="01基础.html" title="超链接的名称">有名称的超链接，鼠标悬停有效果</a><br />
         <a href="img001.webp">链接图片</a><br />
         <a href="测试.txt">文件链接</a><br />
         <a href="mailto:xxx@163.com">发送邮件</a><br />
         <a href="javascript:window.alert('嘿嘿嘿')">链接js程序</a><br />
     </body>
 </html>

展示效果： 9bd6ca38adff45b9a31b02c358e178ae~tplv-k3u1fbpfcp-jj-mark 0 0 0 0 q75.png 链接图片展示效果：

7351a9a42bb5451ab6ce44884715f109~tplv-k3u1fbpfcp-jj-mark 0 0 0 0 q75.png

文件跳转展示效果：

0e6e3bcd91bc49a798e9fdf6abfee64f~tplv-k3u1fbpfcp-jj-mark 0 0 0 0 q75.png

发送邮件展示效果：

image-20230906102025181

链接js程序展示效果：

image-20230906101947666

a标签：锚点链接

锚点：anchor，又叫锚记，是网页内的超级链接，可以迅速定位当前网页的某一个位置

定义锚点id属性

 <p id="pageTop">这是一个标签1</p>

链接锚点 # + id值

 <a href="#pageTop">回到顶部</a>

跨页面链接锚点，页面 + # + id值，

示例：从 '06超链接页面' 跳转到 '07锚点链接' 的中部：

<a href="07锚点链接.html#pageMid">跳转测试</a>

1.7、图片标签

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 图片标签 img 单标签 src属性="图片路径"-->
		<!-- <img src="img001.webp"/> -->
		<!-- <img src="外部图片链接"/> -->
		
		<hr />
		<!-- 设置图片的宽度和高度 -->
		<img src="img001.webp" width="500px" height="350px"/><br />
		<!-- 宽度可以设置百分比，高度很少用百分比，会滚动 -->
		<img src="img001.webp" width="20%" height="350"/>
		
		<hr />
		<!-- alt="当图片路径出错时的文字提示" -->
		<img alt="嘿嘿嘿,图片消失了"/>
		
		<hr />
		<!-- title="鼠标悬停的文字提示" -->
		<img src="img001.webp" title="来啦哈哈哈" width="10%" height="300"/>
	</body>
</html>

展示效果：

image-20230906135801282

思考：给图片加上超链接跳转

<a href="https://www.baidu.com" target="_blank">
    <img src="img001.webp" width="100" height="100"/>
</a>

1.8、标签与属性

标签的闭合特性

  • 闭合标签：（双标签）由开始标签和结束标签组成。如：

  • 非闭合标签：（单标签）单个标签即起效果，由元素名和斜杠线，如：

标签的层级特性

闭合的标签内可以包含一个或者多个子标签，子标签如果为闭合标签，也可以继续包含子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 标签是一个多叉树的数据结构，标签的嵌套 -->
		<p>
			<span><b><i>允许标签嵌套</i></b></span>
		</p>
    </body>
</html>

标签的属性

在标签头部说明，作用是描述标签的外观或行为的标识

语法：

<标签名 属性名1=“属性值” 属性名2=”属性值“ ...>xxx<标签名>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 标签是一个多叉树的数据结构，标签的嵌套 -->
		<p>
			<span><b><i>允许标签嵌套</i></b></span>
		</p>
		
		<!-- <标签名 属性名1=“属性值” 属性名2=”属性值“ ...>xxx<标签名> -->
		<input type="button" size="50px" value="这是一个按钮"/>
	</body>
</html>

展示效果：

image-20230906101454277

二、HTML水平线与路径

2.1、水平线hr

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<hr />
		<hr width="70%"/>
		<hr width="70%" size="50"/>
		<hr width="70%" size="50" align="right"/>
		<hr width="70%" size="50" align="right" color="gray"/>
		<!-- H5开始，不建议通过以上方式改变hr样式，建议直接通过css技术-->
		<hr style="width: 70%; height: 20px; background-color: aqua;"/>
	</body>
</html>

展示效果：

image-20230906142954031

2.2、绝对路径与相对路径

路径：文件或页面在服务器中/硬盘中存放的位置 url/path/location

获取路径的两种类型

  • 绝对路径：完整的网页访问路径，与当前网页位置无关，https://xxx:port/netpoint/XXX/XXX.html

    • https：网络访问协议（http不安全，没有SSL认证）
    • xxx：域名
    • port：端口号
    • netpoint：站点
    • XXX：文件路径
    • XXX.html：网页名称

  • 相对路径：需要访问的网页资源与当前网页资源的相对位置

    • 向上一级：..
    • 进入：/
    • 向下一级：直接输入目录名
    <!-- 相对路径 -->
    <a href="xxx.html">跳转</a>
    <!-- 向上一级 .. -->
    <!-- 进入 / -->
    <a href="../xxx.html">跳转</a>
    <!-- 向下一级 直接输入目录名 -->
    <a href="inner/xxx.html">跳转</a>

    <!-- 案例：向上一级 平级另一个目录 进入目录 找到目标文件 -->
    <a href="../inner/xxx.html">跳转</a>

2.3、预格式化

不编译代码，直接将代码作为文本/字符串处理

html：用xmp

<xmp><br /><p><hr /></xmp>

H5：xmp废弃，使用pre仍然识别特殊标签，但保留代码的原格式

<body>
		<xmp><br /><p><hr /></xmp>
		public static void main(String[] args){
			System.out.println("Hello");
		}
		<pre>
			public static void main(String[] args){
				System.out.println("Hello");
			}
		</pre>
	</body>

展示效果：

image-20230906142048075

三、HTML列表与表格

3.1、列表

3.1.1、有序列表

示例代码：

<!-- 1.有序列表：ol：order list   li：list item 列表中的一项-->
		<ol>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ol>
		
		<!-- 可以通过type属性，更改序号标识符 -->
		<ol type="a">
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ol>

展示效果：

image-20230906145836150

3.1.2、无序列表

示例代码：

		<!-- 2.无序列表：没有序号 ul li -->
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
		<!-- 允许通过type属性，更改标识符 -->
		<ul type="circle">
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
		
		<!-- 作用 配合超链接 用于设置导航栏 -->
		<ul>
			<li>
				<a href="06超链接.html">超链接</a>
			</li>
			<li>
				<a href="09水平线.html">水平线笔记</a>
			</li>
			<li>
				<a href="02特殊字符.html">特殊字符笔记</a>
			</li>
		</ul>

展示效果：

image-20230906145947923

3.1.3、自定义列表

示例代码：

<!-- 3.自定义列表 dl：外层标签 dt：标签菜单 dd：菜单中内容 -->
		<dl>
			<dt>前端</dt>
			<dd>html</dd>
			<dd>css</dd>
			<dd>js</dd>
			<dt>后端</dt>
			<dd>java</dd>
			<dd>python</dd>
			<dd>golang</dd>
		</dl>

展示效果：

image-20230906150051042

3.2、div布局标签

div标签是一个自动换行，用于布局的容器标签

示例代码：

	<body>
<!-- 		<div>abc</div>
		<div>def</div> -->
		
		<!-- 简单布局 -->
		<div style="height: 300px; background-color: aquamarine;">
			头部
		</div>
		<div style="height: 200px; background-color: coral;">
			导航栏
		</div>
		<div style="height: 150px; background-color: royalblue">
			<div style="height: 50px; width: 50px; background-color: gray;">
				内嵌div1
			</div>
			<div>
				内嵌div2
			</div>
		</div>
		<div style="height: 100px; background-color: hotpink;">
			底部
		</div>
		
		<!-- span标签只有背景颜色生效 -->
		<span style="width: 200px; height: 100px; background-color: darkolivegreen;">文字格式处理</span>
	</body>

展示效果：

image-20230906151300981

布局一般用div标签，span标签只有背景颜色会生效

3.3、表格

3.3.1、简单表格

示例代码：

<!-- 	简单表格<br />
		table：表格标签
		tr：行
		td：行内单元格 -->
		
		<table>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
			</tr>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
			</tr>
			<tr>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
			</tr>
		</table>

展示效果：

image-20230906152112582

3.3.2、完整表格

示例代码：

	<!-- 完整表格：表头（thead）+ 表格内容主体（tbody）+ 表尾（tfoot） -->
	<!-- thead、tfoot在高度已经确定的情况下，会比tbody高度小-->
	<!-- thead中的td，可以更改为th（表头中的单元格标签） -->
	<!-- width height 指定宽和高 -->
	<!-- border定义边框的粗细 -->
	<!-- cellspacing 单元格间距 -->
	<!-- caption标签：表名 -->
		<table width="500" height="200" border="2" cellspacing="0">
			<caption>示例表格</caption>
			<thead>
				<tr>
					<th>单元格1</th>
					<th>单元格2</th>
					<th>单元格3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>单元格1</td>
					<td>单元格2</td>
					<td>单元格3</td>
				</tr>
				<tr>
					<td>单元格1</td>
					<td>单元格2</td>
					<td>单元格3</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>单元格1</td>
					<td>单元格2</td>
					<td>单元格3</td>
				</tr>
			</tfoot>
		</table>

展示效果：

image-20230906154540293

3.4、表格合并

示例代码：

	<body>
		<!-- 行 row 横向的 -->
		<!-- 列 column 纵向的 -->
		<!-- 占据多行 rowspan -->
		<!-- 占据多列 colspan -->
	<table width="500" border="2">
			<tr>
				<td>单元格1-1</td>
				<td>单元格1-2</td>
				<td>单元格1-3</td>
			</tr>
			<tr>
				<td>单元格2-1</td>
				<td rowspan="2">单元格2-2</td>
				<td>单元格2-3</td>
			</tr>
			<tr>
				<td>单元格3-1</td>
				<td>单元格3-2</td>
				<!-- <td>单元格3-3</td> -->
			</tr>
			<tr>
				<td>单元格4-1</td>
				<td colspan="2">单元格4-2</td>
				<!-- <td>单元格4-3</td> -->
			</tr>
	</table>
	</body>

展示效果：

image-20230906160008775

3.5、表格美化

示例代码：

<body>
		<!-- 标签上可以添加 bordercolor 属性 边框颜色 -->
		<!-- bgcolor 添加背景颜色 -->
		<!-- align设置横向对齐方式 -->
		<!-- valign设置纵向对齐方式 top bottom-->
		<!-- 可以针对tr/td设置宽高、避免自相矛盾 -->
		<!-- cellpadding 单元格的填充：当前单元格内 文本和单元格框的距离 -->
		<table width="500" height="200" border="2" cellspacing="0" cellpadding="20" bordercolor="red" bgcolor="gray">
			<caption>示例表格</caption>
			<thead>
				<tr>
					<th>单元格1</th>
					<th>单元格2</th>
					<th>单元格3</th>
				</tr>
			</thead>
			<tbody>
				<tr valign="bottom">
					<td>单元格1</td>
					<td>单元格2</td>
					<td>单元格3</td>
				</tr>
				<tr align="right">
					<td>单元格1</td>
					<td>单元格2</td>
					<td>单元格3</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>单元格1</td>
					<td>单元格2</td>
					<td>单元格3</td>
				</tr>
			</tfoot>
		</table>
	</body>

展示效果：

image-20230906161131994

作业：

  1. 整理笔记
  2. 完成代码产生图片效果

image-20230906161340784

注意：作业和笔记整理在一个文件中

完成作业：

作业1：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="400px" border="2" cellsapcing="0">
			<tr>
				<td colspan="4">品牌商城</td>
			</tr>
			<tr>
				<td colspan="2">笔记本电脑</td>
				<td colspan="2">冰箱</td>
			</tr>
			<tr>
				<td>Dell笔记本</td>
				<td>惠普笔记本</td>
				<td>海尔冰箱</td>
				<td>美的冰箱</td>
			</tr>
		</table>
	</body>
</html>

展示效果：

image-20230906163831407

作业2：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="400px" height="600px" border="2" cellspacing="15" cellpadding="15">
			<tr>
				<td height="150px" align="right" valign="bottom" colspan="5"><b>0</b></td>
			</tr>
			<tr align="center">
				<td>MC</td>
				<td>MC</td>
				<td>MC</td>
				<td>MC</td>
				<td>MC</td>
			</tr>
			<tr align="center">
				<td>⬅</td>
				<td>CE</td>
				<td>C</td>
				<td>±</td>
				<td>√</td>
			</tr>
			<tr align="center">
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>/</td>
				<td>%</td>
			</tr>
			<tr align="center">
				<td >4</td>
				<td>5</td>
				<td>6</td>
				<td>*</td>
				<td>1/x</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>1</td>
				<td rowspan="2">=</td>
			</tr>
			<tr align="center">
				<td colspan="2">0</td>
				<td>.</td>
				<td>+</td>
			</tr>
		</table>
	</body>
</html>

展示效果：

image-20230906165853674

avatar
文章
阅读
粉丝