web前端——body内常用标签(h,p,img,a)

  • A+
所属分类:Web前端
摘要

body中的标签是会显示到浏览器窗口中的,body内的标签只有一个作用就是用来标记语义的,语义指的是从字面意思就可以理解被标记的内容是用来做什么的


一、HTML语义化 (理解意思,因为有时候用的不是语义)

body中的标签是会显示到浏览器窗口中的,body内的标签只有一个作用就是用来标记语义的,语义指的是从字面意思就可以理解被标记的内容是用来做什么的

虽然不同的标签会有不同的显示样式,但我们一定要强制自己忘记所有标签的显示样式,只记它的语义。因为每个标签的样式各不相同,记忆不同标签的样式来控制显示样式,对前端开发来说将会是一种灾难,更何况添加样式并不是HTML擅长的事情,而且在布局的时候多使用语义化的标签,会方便搜索引擎在爬取网页文件时更好地解析文档结构,从而进行收录。

对于那些只用来修改样式的标签将会被淘汰掉,比如以下标签都是没有语义的,都是用来修改样式的=====》已废弃

#1、<br> 换行         我是帅气逼人的Egon老师         <br>         我是帅气逼人的Egon老师         我是帅气逼人的Egon老师         我是帅气逼人的Egon老师  #2、<hr> 分割线  #3、<font> 修改文字大小,颜色         <font color="red" size="10px">我是哈哈哈</font>  #4、<b> 加粗         <b>论颜值,我秒杀宇宙</b>  #5、<u> 下划线  #6、<i> 倾斜  #7、<s> 删除线

html5中推出了一些新的标签=====》现在使用

 strong == b          ins == u          em == i          del == s  新的标签是有语义的,而老的只是单纯的添加样式(这是CSS干的事)         strong的语义:定义重要性强调的文字         ins的语义(inserted):定义插入的文字         em的语义(emphasized):定义强调的文字         del的语义(deleted):定义被删除的文字 

具体使用:

<!--<br> 代表换行--> 你好啊<br>哈哈哈哈 <!--<hr> 代表加分割线--> <hr> 我擦了 <!--<b>加粗</b>  不要用这种--> <strong>强调</strong>  <!--<u>下划线</u> 已废弃,用下面的--> <ins>插入</ins>  <!--<i>倾斜</i> 已废弃,用下面的--> <em>倾斜</em>  <!--<s>删除</s> 已废弃,用下面的 <del>删除</del>

div与span标签都是没有语义的标签,我们在css中讲解

#1、div用来标记一块内容,没有具体的语义。 #2、span用来标记一行中的一小段内容,也没有具体的语义。

二、字符实体

(1)在HTML中对空格/回车/tab不敏感,会把多个空格/回车/tab当作一个空格来处理  (2)字符实体指的是 在HTML中 有的字符是被HTML保留的比如大于号小于号 有的HTML字符,在HTML中是有特殊含义的,是不能在浏览器中直接显示出来的,那么这些东西想显示出来就必须通过字符实体,如下
ps::实体名称对大小写敏感!
内容 代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

 

HTML特殊符号对照表:  http://tool.chinaz.com/Tools/HtmlChar.aspx

web前端——body内常用标签(h,p,img,a)web前端——body内常用标签(h,p,img,a)

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <!--字符实体之空格符--> 你好&nbsp;&nbsp;&nbsp;&nbsp;我擦类&nbsp;&nbsp;&nbsp; 哈哈哈  <p>&lt;print&gt;</p> <p>100000000000&yen;</p> <p>egon&amp;lxx</p> <p>&copy;</p> <p>&Theta;</p> </body> </html>

用法举例

 

三、h系列标签

语义:标记内容为一个标题,全称headline

h系列标签从h1-h6共6个,没有h7标签,标记内容为1~6级标题,h1用作主标题(代表最重要的),其实是h2。。。

虽然h1-h6标签的显示样式是从大到小,但再次强调:记忆HTML标签的显示样式是没有意义的

web前端——body内常用标签(h,p,img,a)web前端——body内常用标签(h,p,img,a)

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <h1>我是标题1</h1> <h2>我是标题2</h2> <h3>我是标题3</h3> <h4>我是标题4</h4> <h5>我是标题5</h5> <h6>我是标题6</h6> <h7>我是标题7</h7> 我是标题7  <h1>egon</h1> <p>论颜值,</p> <p>论才华</p> </body> </html>

用法举例h&p标签

 

注意:在企业开发中一定要慎用h系列标签,特别是h1标签,在企业开发中一般一个界面中只能出现一个h1标签(出于SEO考虑,搜索引擎会使用标题将网页的结构和内容编制索引),比如www.163.com。

四、p标签

语义:标记内容为一个段落,全称paragraph

  用法举例见 h 标签

五、img标签

语义:标记一个图片,全称image

#1、用法 <img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />  #2、注意 2.1 src指定的图片地址可以是网络地址,也可以是一个本地地址,本地地址可以用绝对或相对路径,但通常用相对路径,相对路径是以html文件当前所在路径为基准进行的  2.2 图片的格式可以是png、jpg和gif  2.3 alt="图片加载失败时显示的内容"  为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。  2.4 title = "鼠标悬停到图片上时显示的内容"  2.5 如果没有指定图片的width和height则按照图片默认的宽高显示,如果指定图片的width和height则可能让图片变形 那如果又想指定宽度和高度,又不想让图片变形,我们可以只指定宽度和高度的一个值即可 只要指定了一个值,系统会根据该值计算另外一个值,并且都是等比拉伸的,图片将不会变形

 

web前端——body内常用标签(h,p,img,a)web前端——body内常用标签(h,p,img,a)

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>  <!--<img src="img/1.jpg" alt="web前端——body内常用标签(h,p,img,a)" title="这是一个美女" alt="图片被怪兽吃掉了" width="300px" height="300px">--> <img src="img/1.jpg" title="这是一个美女" alt="图片被怪兽吃掉了" width="300px" > </body> </html>

用法举例img标签

六、a标签

语义:标记一个内容为超链接,全称anchor,锚

#1、超链接标签是超文本文件的精髓,可以控制页面与页面之间的跳转,语法如下 <a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>   #2、注意: 2.1 a标签不仅可以标记文字,也可以标记图片     <a href="https://www.baidu.com"><img src="mv.png" alt="web前端——body内常用标签(h,p,img,a)" />百度一下,你就知道</a>  2.2 a标签必须有href属性,href的值必须是http://或https://开头  2.3 a标签还可以跳转到自己的页面     <a href="template/aaa.html">锤你胸口</a>  2.4 target="_blank"代表在新页面中打开,其余的值均无需记忆,     如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置     <base target="_blank">     如果a标签自己设置了target,那么就以自己的为准,否则就会参照base的设置  2.5 title="鼠标悬浮显示的内容"

 

web前端——body内常用标签(h,p,img,a)web前端——body内常用标签(h,p,img,a)

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <!-- <a href="http://www.baidu.com" title="跳转到百度" target="_blank">点我啊</a>  <a href="http://www.baidu.com">     <img src="img/1.jpg" alt="web前端——body内常用标签(h,p,img,a)" alt=""> </a> -->  <!--假链接--> <!--<a href="#">点我啊</a>--> <!--<a href="javascript:">点我啊</a>--> <!--假链接-->  <!--页面的锚点--> <p>     <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">一 八八八八</a> </p>  <p>     <a href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px">八 用户与程序交互</a> </p>  <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <a href="" name="p1"></a> <p style="color: red">1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <a href="" name="p2"></a> <p style="color: green">1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p>  <a href="">跳到首页</a> <a href="#">跳到首页</a> </body> </html>

用法举例a标签