5月25日 python学习总结 HTML标签

一、HTML简介

　　 http://www.cnblogs.com/linhaifeng/articles/8973878.html

二、HTML标签与文档结构

　　http://www.cnblogs.com/linhaifeng/articles/8982242.html

三、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）：定义被删除的文字

二字符实体

#1、在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理

#2、字符实体指的是
在HTML中
有的字符是被HTML保留的比如大于号小于号
有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体，如下

注释：实体名称对大小写敏感！

内容	代码
空格	` `
>	`>`
<	`<`
&	`&`
¥	`¥`
版权	`©`
注册	`®`

HTML特殊符号对照表

三 h系列标签

语义：标记内容为一个标题，全称headline

h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题

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

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta charset="utf-8">
        <title>Egon才华无敌</title>
    </head>
    <body>
        <h1>一级标题</h1><h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
        <h7>没有七级标题</h7>
        没有七级标题
    </body>
</html>

注意：在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑）,比如www.163.com。

四 p标签

语义：标记内容为一个段落，全称paragraph

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta charset="utf-8">
        <title>Egon无敌</title>
    </head>
    <body>
        <h1>Egon</h1>
        <p>论颜值，鹤立鸡群</p>
        <p>论才华，天下无敌</p>
    </body>
</html>

五 img标签

语义：标记一个图片，全称image

#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />

#2、注意
2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的

2.2 图片的格式可以是png、jpg和gif

2.3 alt="图片加载失败时显示的内容"

2.4 title = "鼠标悬停到图片上时显示的内容"

2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形
那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可
只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形

六 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="鼠标悬浮显示的内容"

假链接

#1、什么是假链接？
    就是点击之后不会跳转的链接，我们称之为假链接

#2、假链接存在的意义：
    在企业开发前期，其他界面都还没有写出来，
    那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替

#3、假链接的定义格式
    1、href="#"   :会自动回到网页的顶部
    2、href="javascript:" ：不会返回顶部

页面内锚点

#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
这样a标签才能在当前界面中找到需要跳转到的目标位置

#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的

#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置

跳到首页

#1、跳到首页
<a href="">刷新页面，回到顶部，人类感觉不出来区别</a> 
<a href="#">回到顶部</a>

#2、注意点：
    通过我们的a标签跳转到指定的位置，是没有过度动画的
    是直接一下子就跳转到了指定位置,比如京东主页
    如果跳到首页需要过渡动画，则不用a标签做，比如天猫主页

<!--
    <a href="">刷新页面，回到顶部</a> 刷新页面，人类感觉不出来区别
    <a href="#">回到顶部</a>


-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p id="sb1">alex是个大SB</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p id="sb2">wxx是个大SB</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <p>我上山是虎，我下海是龙</p>
    <a href="#sb1">找第一个SB</a>
    <br>
    <a href="#sb2">找第一个SB</a>
    <br>
    <a href="#">不刷新，跳回首页</a>
    <br>
    <a href="">刷新，跳回首页</a>
</body>
</html>

页面锚点+跳回首页练习