body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的
虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情，而且在布局的时候多使用语义化的标签，会方便搜索引擎在爬取网页文件时更好地解析文档结构，从而进行收录。
对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，都是用来修改样式的=====》已废弃
#1、
换行 我是帅气逼人的Egon老师
我是帅气逼人的Egon老师 我是帅气逼人的Egon老师 我是帅气逼人的Egon老师 #2、
分割线 #3、 修改文字大小，颜色 我是哈哈哈 #4、 加粗 论颜值，我秒杀宇宙 #5、 下划线 #6、 倾斜 #7、删除线
html5中推出了一些新的标签=====》现在使用
strong == b
ins == u
em == i
del == s
新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事）
strong的语义：定义重要性强调的文字
ins的语义（inserted）：定义插入的文字
em的语义（emphasized）：定义强调的文字
del的语义（deleted）：定义被删除的文字
具体使用：
代表换行-->
你好啊br>哈哈哈哈
代表加分割线-->
hr>
我擦了
加粗 不要用这种-->
strong>强调strong>
下划线 已废弃，用下面的-->
ins>插入ins>
倾斜 已废弃，用下面的-->
em>倾斜em>
删除 已废弃，用下面的
删除div与span标签都是没有语义的标签，我们在css中讲解
#1、div用来标记一块内容，没有具体的语义。
#2、span用来标记一行中的一小段内容，也没有具体的语义。
（1）在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理 （2）字符实体指的是 在HTML中 有的字符是被HTML保留的比如大于号小于号 有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体，如下
| 内容 | 代码 |
|---|---|
| 空格 | |
| > | > |
< |
|
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
HTML特殊符号对照表: http://tool.chinaz.com/Tools/HtmlChar.aspx
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
head>
body>
字符实体之空格符-->
你好 我擦类 哈哈哈
p><print>p>
p>100000000000¥p>
p>egon&lxxp>
p>©p>
p>Θp>
body>
html>
用法举例
语义：标记内容为一个标题，全称headline
h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其实是h2。。。
虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
head>
body>
h1>我是标题1h1>
h2>我是标题2h2>
h3>我是标题3h3>
h4>我是标题4h4>
h5>我是标题5h5>
h6>我是标题6h6>
h7>我是标题7h7>
我是标题7
h1>egonh1>
p>论颜值，p>
p>论才华p>
body>
html>
用法举例h&p标签
注意：在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑，搜索引擎会使用标题将网页的结构和内容编制索引）,比如www.163.com。
语义：标记内容为一个段落，全称paragraph
用法举例见 h 标签
语义：标记一个图片，全称image
#1、用法
#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>Titletitle>
head>
body>
-->
img src="img/1.jpg" title="这是一个美女" alt="图片被怪兽吃掉了" width="300px" >
body>
html>
用法举例img标签语义：标记一个内容为超链接，全称anchor，锚
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
需要展现给用户查看的内容/也可以是图片
#2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片
百度一下，你就知道
2.2 a标签必须有href属性，href的值必须是http://或https://开头
2.3 a标签还可以跳转到自己的页面
锤你胸口
2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆，
如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
head>
body>
点我啊
-->
假链接-->
点我啊-->
点我啊-->
假链接-->
页面的锚点-->
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>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
a href="" name="p1">a>
p style="color: red">1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p>
p>1111111111p<
登录查看全部
参与评论
手机查看
返回顶部