写文章最主要的两个是什么?肯定是标题和段落了,写网页也是如此,最重要也是最基本的两个标签就是
<h1>标题</h1> <p>段落</p>
其中h标签可分为h1-h6,h标签可以直接使用行内样式,但是不推荐这样写,之后使用css来写样式。两者皆是块级元素,即一个元素占一行(行高可由自己设定,如果没有设定,就由内容本身撑开)。
<!--align默认属性为left,可通过center,right等属性更改-->
<h1 align="right">1</h1>
标签内可以使用class和id两个属性,来表示该元素在众多元素中是哪个。
<p id="targetBlock" class="c1 c2 c3">目标块级元素</p>
<p class="c1">不同元素可以有相同class名</p>
其中class可以有多个,多个class属性在同一""内,由空格隔开,id是唯一的。 在写文章时,常需要进行换行
<!--br负责换行-->
换<br/>行
也可以插入水平线
<!--hr水平线,color决定颜色,width决定长度,单位为像素,可不写,size决定宽度,align决定位置-->
<hr color="red" width="500" size="30" align="right"/>
网页中还经常使用的就是图片。图片可以使用多种引入方式:
<!--绝对路径-->
<img src="https://pic.quanjing.com/xc/iz/QJ8167794942.jpg@!794wsy" width="100" height="100">
<!--图片相对路径-->
<!--1.平级关系,直接给出图片名字,图片高度不一时,图片下对齐-->
<img src="alu1.png" width="100" height="100">绝对路径<br>
<!--2.下级关系,从与平级文件夹出发找下一级图片,用/取-->
<img src="img/vadder.png" width="100" height="100" alt="下级关系,需要自己建文件夹插入图片">下级关系<br>
<!--3.上级关系,以../来表示-->
<img src="../r3.png" width="100" height="100" alt="上级关系,需要自己建文件夹插入图片">上级关系<br>
<!--alt属性当图片无法正常显示时作为提示-->
<!--title属性当鼠标悬停时给出提示-->
<!--可以使用width和height来设定图片宽和高-->
<img src="https://pic.quanjing.com/xc/iz/QJ8167794942.jpg@!794wsy" alt="月亮" title="月亮图片" width="100" height="100">
此外,网页中常常使用超链接属性进行跳转
<!--a标签即为超链接标签,href后接链接,标签后可接文本等-->
<!--target标签后可接_blank,即为新窗口打开,默认为_self,即为原窗口打开-->
<!--a标签内部可以嵌套img标签,给予图片超链接能力-->
<!--href后接#,为空连接,功能为返回页面顶端-->
<a href="#" name="target">目标</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank"><img src="https://pic.quanjing.com/xc/iz/QJ8167794942.jpg@!794wsy" width="100" height="100"></a>
<a href="#" >空连接</a>
<!--锚点,实现页内跳转-->
<!--1.点击a跳转到a,2.点击a跳转到块级元素-->
<!--跳转到a,跳转标签href后接#+目标a的name-->
<a href="#target">点击跳转目标</a>
<!--块级元素独占一行,默认与父元素同宽,行内元素由内容撑开-->
<!--a跳转到目标块级元素,href接#+目标id-->
<a href="#targetBlock"> 跳转到块级元素</a>