一.HTML标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标记</title>
</head>
<body>
<h1>内容的标题标记</h1>
<h1>通过h1-h6标签进行定义的</h1>
<h1>h1标题标记</h1>
<h2>h2标题标记</h2>
<h3>h3标题标记</h3>
<h4>h4标题标记</h4>
<h5>h5标题标记</h5>
<h6>h6标题标记</h6>
</body>
</html>
二.HTML 注释
注释--标注解释说明代码的元素
可以将注释插入 HTML 代码中,用于解释说名代码的含义和作用,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释写法如下:
<!-- 注释内容 -->
开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html注释</title>
</head>
<body>
<!--<h1>注释--标注解释说明代码的元素</h1>-->
<h1>注释--标注解释说明代码的元素</h1>
<h1><!--注释内容--></h1>
<h1>往往出现在被解释代码的上方</h1>
<h1>注释的内容不会被浏览器解释运行</h1>
<h1>注释可以帮助我们调试代码</h1>
</body>
</html>
注释的内容不会被浏览器解释运行
三.如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的。
如果您想找到其中的奥秘,只需要单击右键,然后选择"查看源文件"(IE)或"查看页面源代码"(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
四.HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线</title>
</head>
<body>
<h1>HTML水平线</h1>
<h2><hr>标签在 HTML 页面中创建水平线。</h2>
<hr >
<h3>hr是一个单标记</h3>
<h4>width属性--设置水平线长短</h4>
<hr width="50%">
<h4>color属性--设置水平线颜色</h4>
<hr color="blue">
<h4>size属性--设置水平线粗细</h4>
<hr size="5">
<h4>align属性--设置水平线水平对齐方式【left center right】</h4>
<hr align="right" width="30%" color="aqua" size="9">
</body>
</html>
五.HTML 段落
HTML 可以将文档分割为若干段落。
段落是通过 <p> 标签定义的。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落p</title>
<style type="text/css">
.a{
color: aqua;
}
.b{
color: red;
}
</style>
</head>
<body>
<p class="a">一不小心,我的故事苍凉了手中的笔。</p>
<p>我将心念飘逸在红尘中,看相遇惊艳了时光</p>
<p>在这故事里,我感动,游离。当情缥缈如风</p>
<p>人如飞絮,便去留无意,念也很苍白。 </p>
<p class="b">生命中,有些人事,就如浮云掠过。</p>
<p>你的飘忽不定,没什么大不了,什么都是浮云!</p>
<p>有风在,心中不留一丝阴霾。</p>
</body>
</html>
六.HTML 折行
<br/>可插入一个简单的换行符。
通常情况下,<br> 标签会告诉浏览器立即停止当前的文本流,并在下一行的左边,或者在左对齐的内联图形或表格的右边开始继续输出文本流。
- br标签是单独出现的,<br />
- 当使用br标签时,其后面的所有内容都将在下一行出现
提示和注释:
注释:请使用 <br> 来输入空行,而不是分割段落
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html折行</title>
</head>
<body>
<h1>HTML折行通过<br>强制换行</h1>
<h2>在html网页中键盘的回车换行是没有效果的,所以使用<br>强制换行</h2>
<h2><br>强制换行是一个单标记</h2>
<h3>春晓</h3>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
<h3>春晓</h3>
春眠不觉晓,<br>
处处闻啼鸟。<br>
夜来风雨声,<br>
花落知多少。
</body>
</html>
七.HTML 格式化标签
HTML 格式化标签就是为文字添加一些特殊的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html格式化标签</title>
</head>
<body>
<h1>HTML格式化标签就是为文字添加一些特殊的效果</h1>
格式化标签:<br>
<b>b标记--定义粗体文字</b><br>
<em>em标记--定义着重文字【斜体】</em><br>
<i>i标记--定义斜体文字【斜体】</i><br>
<small>small标记--定义小号字</small><br>
<strong>strong标记--加强语气【加粗】</strong><br>
<sub>sub标记--定义下标</sub><br>
<sup>sup标记--定义上标</sup><br>
<ins>ins标记--定义下划线</ins><br>
<del>del标记--定义删除线</del>
</body>
</html>
八.HTML 图像
在HTML页面中插入图片需要用到html中的<img>标签. <img src="" alt="">.
img代表“图像”,它是图像在页面上显示。
src代表“来源”它告诉浏览器去哪里找图像,在写代码的时候最好将图片放置在一个文件夹下保存,通过这样的方式可以通过名称前面的子目录名称来调用图片。
alt代表“文字”告诉浏览器如果找不到图像,就只显示该文本,或者将鼠标悬停在图像上就会弹出设置的文字。
1.绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。
绝对路径缺点:
<1>如果图片保存目录太深,图片的操作路径就会很长
<2>当我们将网页\保存图片的文件夹移动之后,这个图片的路径就变化。图片无法正常显示。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对路径</title>
</head>
<body>
<h3>绝对路径--从操作系统的指定盘中的目录中开始查找图片资源所形成的路径</h3>
<img src="C:\Users\14397\Desktop\11.jpg" width="200px" align="200px">
<img src="F:\xiaomiao\xue\3.jpg"/ width="200px" align="200px">
</body>
</html>
2 .相对路径--以当前网页为参照、为中心,对外开始查找图片的路径。
<1>图片与当前网页在同一个目录下【src=”图片名称”】
<2>图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
<3>图片保存在当前网页所在目录的父文件夹中【src=”../子文件夹的名称/图片名称”
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对路径图像</title>
</head>
<body>
<h1>HTML图像通过img标记显示图片</h1>
<h3>相对路径--以当前网页为参照中心,对外开始查找图片资源所形成的路径。[推荐]</h3>
<img src="img/1.png" >
<img src="img/微信图片_20210811180625.jpg" width="100px" height="200px">
<img src="../WildKingxue/微信图片_20210811180618.jpg" width="200px" >
</body>
</html>
3.图片路径还可以是网络地址
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网络路径图像</title>
</head>
<body>
<h4>网络路径就是一个url的网络地址</h4>
<img src="https://images.pexels.com/photos/7049505/pexels-photo-7049505.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="200px" align="200px">
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.250f95855aec49c974acb36b3ed32571?rik=BgcOI1PX1fb%2bww&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2f387b1a5181ebeddbec90fd5f19e606ce.jpg&ehk=Feb%2bz1leZKOVuTS20av3z7LKELRP0HH277cc6aSrAeI%3d&risl=&pid=ImgRaw&r=0"
width="200px" align="200px">
</body>
</html>