1.br -- 折行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折行</title>
</head>
<body>
<h1>折行--br[换行]</h1>
<p>假设我们在html文件中有一段话语，<br>
如果遇见我们通过键盘的回车键输入的换行那么在显示时没有效果的。<br>
这时我们就需要使用html的折行标记br。<br>
在显示的时候出现换行效果<br>
所以以后在html中需要换行的时候使用br标记。而不是使用回车键。<br><br><br>
如果需要多空出几行，那么就多出几个br标记。
</p>
</body>
</html>
2.HTML 格式化标签--设置字体加粗/倾斜/上标.....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化标签</title>
</head>
<body>
<h1>格式化标签--设置字体加粗/倾斜/上标.....</h1>
<p>默认的字体格式</p>
<b>b--设置字体加粗</b><br>
<em>em---定义着重显示文字</em><br>
<i>i--设置字体倾斜</i><br>
<small>small--定义小号字体</small><br>
<strong>strong---定义加重语气</strong><br>
X<sup>2</sup>-2X+1=0 <br>
X<sub>1</sub>=1,X<sub>2</sub>=-1<br>
<ins>ins--默认出现下划线</ins><br>
<del>del---设置删除线【贯穿线】</del><br>
<i><small><b><ins><del><small>多个标记设置同一个文本文字</del></ins></b></small></i>
</body>
</html>
3.HTML 图像--图片
在 HTML 中，图像由<img> 标签定义。通常都以单标记呈现。
<img> <img /> <img></img>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
</head>
<body>
<h1>在 HTML 中，图像由img标签定义。通常都以单标记呈现。</h1>
<h3>src--图片地址</h3>
<h3>width--设置图片宽度</h3>
<h3>height--设置图片高度</h3>
<h3>alt--属性用来为图像定义一串预备的可替换的文本。</h3>
<h4>绝对路径=从操作系统的指定盘中的目录开始查找图片的路径。</h4>
<h5>例如:F:\20230522\html\20230530HTML(2)\code\tupian1.png</h5>
<img src="F:\20230522\html\20230530HTML\code\tupian1.png"
width="100px" height="100px" alt="tupian1.png">
<h5>绝对路径缺点:<br>
1.如果图片保存目录太深，图片的操作路径就会很长。<br>
2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。<br>
</h5>
<h4>相对路径=以当前网页为参照、为中心，对外开始查找图片的路径。</h4>
<h5>当前网页与图片在同一目录下，操作图片名称</h5>
<img src="tupian2.PNG">
<h5>当前网页与图片不在同一目录下，当前目录的子文件夹中，操作子文件夹+图片名称</h5>
<img src="tuxing/tupian3.PNG">
<h5>当前网页与图片不在同一目录下，当前目录的上层目录中，操作../[上一层目录]</h5>
<img src="../tupian/tupian3.PNG">
<h4>网络地址=图片对应的网络地址</h4>
<h5>https://img.duoziwang.com/2019/01/01162111661716.jpg</h5>
<img src="https://img.duoziwang.com/2019/01/01162111661716.jpg">
</body>
</html>
4.HTML 超链接（链接）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a id="top"><h1>HTML使用标签a来设置超文本链接。</h1></a>
<h1>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</h1>
<h3>href属性来描述链接的地址</h3>
<h3>target 属性设置被链接的地址，是否在新窗口中显示</h3>
<h4>_blank----在新窗口中显示资源</h4>
<h4>_self-----在当前窗口中显示资源</h4>
<h4> id 属性--超链接的编号，可以通过href属性来引用【#id编号】跳转到当前文档中的某个部分</h4>
<h4>地址---[绝对路径 相对路径 网络地址]</h4>
<a href="F:\20230522\html\20230530HTML(2)\code\geshibiaoji.html">测试超链接--绝对路径</a><br>
<a href="tupian.html">测试超链接-- 相对路径</a><br>
<a href="https://www.baidu.com/home" target="_blank">测试超链接-- 网络地址</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top">回到顶端</a>
</body>
</html>
5.HTML中的head元素
<!DOCTYPE html>
<html>
<head>
<!--charset=设置当前网页的字符编码以兼容中文显示-->
<meta charset="utf-8">
<!--为搜索引擎定义关键词:-->
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
<!--为网页定义描述内容-->
<meta name="description" content="免费 Web & 编程 教程">
<!--定义网页作者-->
<meta name="author" content="wangxing">
<!--每3秒钟刷新当前页面:-->
<!--<meta http-equiv="refresh" content="3">-->
<!--3秒钟后刷新到指定页面:-->
<!--<meta http-equiv="refresh" content="3,url=https://www.baidu.com/home">-->
<title>head标记</title>
<!--style=设置样式-->
<style>
h1{
color: red;
}
</style>
<!--导入外部css文件-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--导入/编写javascript脚本语言-->
<script>
window.οnlοad=function(){
alert("测试script标记");
}
</script>
</head>
<body>
<h1>head标记--html文件的头部</h1>
<h2>html文件的头部为了给浏览器提供显示html网页的附加信息</h2>
<h3>meta--附加信息,title--网页标题【可见】，<br>
style--设置样式，link--导入外部css文件<br>
script--导入/编写javascript脚本语言</h3>
<h4>meta--附加信息</h4>
<h5>meta charset="utf-8" -- 设置当前网页的字符编码以兼容中文显示</h5>
<h5>meta name="keywords" content="关键词"--为搜索引擎定义关键词</h5>
<h5>meta name="description" content="描述内容"--为网页定义描述内容</h5>
<h5>meta name="author" content="作者名称"--定义网页作者</h5>
<h5>meta http-equiv="refresh" content="30"--设置刷新当前页面</h5>
<h5>meta http-equiv="refresh" content="3,url=https://www.baidu.com/home"</h5>
<h4>style标记--设置样式</h4>
<h4>link--导入外部css文件</h4>
<h4>script--导入/编写javascript脚本语言</h4>
</body>
</html>
6.HTML中的表格设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>head标记</title>
</head>
<body>
<h5>table--表格，tr--行，td--列</h5>
<table border="1px" cellpadding="10px" cellspacing="0px"
width="600px" height="600px" bgcolor="red">
<tr align="center">
<td rowspan="14">表格设置</td>
<td colspan="3"><h4>表格设置</h4></td>
</tr>
<tr bgcolor="blue" align="center"><td>标记名称</td><td>表现</td><td bgcolor="green">备注</td></tr>
<tr><td>表格</td><td align="right">table</td><td></td></tr>
<tr><td>行</td><td>tr</td><td>表格中</td></tr>
<tr><td>列</td><td>td</td><td>行中</td></tr>
<tr><td>设置边框</td><td>border</td><td>border="1px"</td></tr>
<tr><td>单元格边距</td><td>cellpadding</td><td>内容与边框的距离</td></tr>
<tr><td>单元格间距</td><td>cellspacing</td><td>单元格与单元格的距离</td></tr>
<tr><td>表格的宽度</td><td>width</td><td>width="600px"</td></tr>
<tr><td>表格的高度</td><td>height</td><td>height="600px"</td></tr>
<tr><td>表格的背景色</td><td>bgcolor</td><td>也可以设置行/列的背景色</td></tr>
<tr><td>行/列中内容的水平对齐方式</td><td>align</td><td>left，center,right</td></tr>
<tr><td>表格跨行</td><td>rowspan</td><td>td设置,新增</td></tr>
<tr><td>表格跨列</td><td>colspan</td><td>td设置，删除</td></tr>
</table>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
