- A+
所属分类：Web前端
一、head内常用标签
1、meta相关
#1、指定字符集 <meta charset="gbk"> #2、页面描述 <meta name="Description" content="具体描述。。。"> #3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名 <meta name="Keywords" content="网易，邮箱，游戏，新闻"> #4、3秒后跳转 <meta http-equiv="refresh" content="3,http://www.baidu.com"> #5、三秒刷新 <meta http-equiv="refresh" content="3">
2、非meta标签
#1、标题 <title>百度一下，你就知道</title> #2、网站的图标 <link rel="icon" href="https://www.baidu.com/favicon.ico"> #3、定义内部样式 <style></style> #4、引入外部样式文件 <link rel="stylesheet" href="mystyle.css"> #5、定义JavaScript代码或引入JavaScript文件 <script src="hello.js"></script>
3、演示&其余需要知道的标签
<!--html5--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 如果有 description一定要放在keywords才有意义--> <meta name="keywords" content="开发者，程序员。。。"> <meta name="description" content="我是程序员"> <!--指定属性，3秒后跳转到网页--> <meta http-equiv="refresh" content="3,http://www.baidu.com" > <!--标题名--> <title>百度一下你就知道</title> <!--图标 ，直接王上搜索制作ico就出来很多--> <link rel="icon" herf="favicon.ico"> <!--给标签加样式--> <!--方式1：一般不用，最好是外部引入解开耦合，color后面的颜色可以用小吸管吸一下别的页面的颜色或者自己配一下。执行的body里面的“你好”颜色就变成自己配的颜色了--> <style> p{ color: #f8d7fa; } </style> <!--方式2：外部引入css标签 要自己建一个外部的.css文件 引号内写的是文件的相对路径--> <link rel="stylesheet" herf="css/index"> <!--方式3：外部引入a.js标签标签 要自己建一个外部的.js文件 引号内写的是文件的相对路径--> <!-- <script> // alert("哈哈哈哈"); function changeColor(ths) { ths.style.backgroundColor="green"; } </script> --> <script src="js/a.js"></script> </head> <body> <!--<p onclick="changeColor(this)">你好</p>--> <!--<br> 代表换行--> 你好啊<br>哈哈哈哈 <!--<hr> 代表加分割线--> <hr> 我擦了 <!--<b>加粗</b> 不要用这种--> <strong>强调</strong> <!--<u>下划线</u> 已废弃，用下面的--> <ins>插入</ins> <!--<i>倾斜</i> 已废弃，用下面的--> <em>倾斜</em> <!--<s>删除</s> 已废弃，用下面的 </html>
二、body内常用标签
1、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）：定义被删除的文字
div与span标签都是没有语义的标签，我们在css中讲解
#1、div用来标记一块内容，没有具体的语义。 #2、span用来标记一行中的一小段内容，也没有具体的语义。
2、字符实体
（1）在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理 （2）字符实体指的是 在HTML中 有的字符是被HTML保留的比如大于号小于号 有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体，如下
ps:：实体名称对大小写敏感！
| 内容 | 代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
HTML特殊符号对照表: http://tool.chinaz.com/Tools/HtmlChar.aspx
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--字符实体之空格符--> 你好 我擦类 哈哈哈 <p><print></p> <p>100000000000¥</p> <p>egon&lxx</p> <p>©</p> <p>Θ</p> </body> </html>
用法举例
3、h系列标签
语义：标记内容为一个标题，全称headline
h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其实是h2。。。
虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的
<!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。
4、p标签
语义：标记内容为一个段落，全称paragraph
用法举例见 h 标签
5、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则可能让图片变形 那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可 只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<img src="img/1.jpg" alt="web前端——head&body内常用标签" title="这是一个美女" alt="图片被怪兽吃掉了" width="300px" height="300px">--> <img src="img/1.jpg" title="这是一个美女" alt="图片被怪兽吃掉了" width="300px" > </body> </html>
用法举例img标签
6、a标签
语义：标记一个内容为超链接，全称anchor，锚
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下 <a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a> #2、注意： 2.1 a标签不仅可以标记文字，也可以标记图片 <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</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="鼠标悬浮显示的内容"
<!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前端——head&body内常用标签" 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> <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标签
