HTML学习笔记(上)

1. HTML介绍

1.1 什么是HTML

HyperText Markup Language,超文本标记语言.简单来说,HTML文件本质上就是一个文本文件,但是这个文本文件是带有标签的. 不同的标签会有不同的作用和含义,可以将一个文本文件的内容变得更丰富.比如

玲珑骰子安红豆,入骨相思知不知

这一句话,我想让它变成红色就可以使用一个标签

<front color="red">玲珑骰子安红豆,入骨相思知不知</front>

让一个正常的人类去解读这种标签,并且靠想象力把它想象成红色显然是一件很蛋疼的事情. 所以,我们把解析标签的事情交给浏览器了. 也就是说,浏览器可以解析HTML标签,然后把它按照标签的含义把”文本”展示出来. 换句话说,HTML就是告诉浏览器,一个页面应该是什么样子的. 比如哪里该大,哪里该小. HTML的学习其实就是学习各种html标签

1.2 HTML文件的基本格式

  • 一个HTML文件首先要告诉浏览器,我是一个HTML文件,所以最外层需要有一个html标签.
  • 要有头(head) 有身体(body)
  • 其中head中存放一些属性和辅助信息. 比如标题,引用的css和js文件,以及一些SEO的信息.
  • body中存放的是真正会在浏览器中展示的数据.
    一个HTML的文件基本格式如下:
        <html>
            <head>
                存放属性的信息，辅助性的信息
                引入外部的文件（重要）
                会先加载
            </head>
            <body>
                存放的是真正的数据
            </body>
        </html>
  • 绝大部分的标签都是成对出现的.
  • 想要对标签修饰的内容有更丰富的意义,标签可以被指定一些属性
  • 属性与属性值之间以=连接.属性值,可以用双引号,单引号甚至可以不写引号,一般情况下都是使用双引号,这个在语法上没有要求.

2. 排版的标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>排版的标签</title>
</head>
<body>

    <!-- HTML的注释 -->

    <!-- 
    * 
        * <br /> 换行
        * <hr /> 一条水平线
            * color: 颜色
                * 直接写英文单词,red green blue
                * RGB三原色  #ffffff
            * width:宽度
                * 像素 200px
                * 百分比 30%
                    > 区别,像素是固定的. 而百分比是会根据窗口大小变化的.
        * <p></p> 段落标签
            * 段落开始和结束的位置会留一个空行
            * align:对齐方式
                * left
                * center
                * right
        * &nbsp; 空格
        * 一个区域
            * <div></div>
                * CSS+div在网页上进行布局
                * 块元素,自带换行光环
            * <span></span>
                * 行元素,不会换行
                * 通过js动态添加内容的时候,经常使用


     -->

     我&nbsp;的&nbsp;题&nbsp;目
     <hr color="red" width=30% />

     <p align="left">
    一尺深红胜曲尘，天生旧物不如新<br />
    合欢桃核终堪恨，里许元来别有人<br />
    井底点灯深烛伊，共郎长行莫围棋<br />
    玲珑骰子安红豆，入骨相思知不知<br />
     </p>

     <div>这是存放在div区域的一些文字</div>
     <div>图片</div>
     <div>新闻</div>

     <span>这是存放在span区域的一些文字</span>

</body>
</html>

3.字体标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>字体标签</title>
</head>
<body>

    <!--
        * 字体标签
            * <font></font> 
            * color: 颜色
            * size:  字体大小
                * 最大值和最小值
                    * 最小值:1
                    * 最大值:7
                * 默认值:3
                * 另一种写法, +2 默认值+2
            * face:  字体的类型
        * 标题标签
            * <h1></h1> ...<h6></h6>
        * 粗体
            * <b></b>
        * 斜体
            * <i></i>
            * 标签和嵌套
        * 转义字符
            * < &lt
            * > &at
            * & &amp
        * 滚动的字幕 
            * 太土了...都没人用了
            * <marquee></marquee>

     -->

    <font color=red size="7" face="楷体">我被字体标签修饰了</font><br/>
    <font color=red size="1" face="楷体">我被字体标签修饰了</font><br/>
    <font color=red size="5" face="楷体">我被字体标签修饰了</font><br/>
    <font color=red size="+2" face="楷体">我被字体标签修饰了</font><br/>

    <hr/>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <marquee>这是一个老土的滚动字幕</marquee>


</body>
</html>

4.列表标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表标签</title>
</head>
<body>

    <!--
        #列表标签
            - 格式化成一个列表
            ##不常用的一种列表
                ```
                    <dl>
                    <dt>上层项目</dt>
                    <dd>下层项目</dd>
                    <dd>下层项目</dd>
                  </dl>
                ```
            ##有序列表和无序列表
                ###有序列表

                ```
                    <ol>
                    <li>数据的条目<li/>
                    </ol>
                ```
                **<ol>标签的属性**
                - type="a" 指定列表序号方式
                - start="" 指定起始序号

                ###无序

                ```
                    <ul>
                    <li>数据的条目</li>
                    </ul>
                ```
     -->

    <dl>
        <dt>上层项目</dt>
        <dd>下层项目</dd>
        <dd>下层项目</dd>
    </dl>

    <h3>有序列表</h3>
    <ol type="a" start="3">
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
    </ol>

    <h3>无序列表</h3>
    <ul>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
    </ul>


</body>
</html>

5.图片标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片标签</title>
</head>
<body>
    <!--
    ##图片标签
        <img/>
         - 属性:
            - src="图片的地址"
            - width="图片显示的宽度"
            - height="图片显示的高度"
            - alt="图片的说明文字"


     -->

    <img src="../imgs/girl4.jpg" width="60%" height="70%" alt="我了个去!">
    <marquee>

    </marquee>

</body>
</html>

6.超链接标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>超链接标签</title>
</head>
<body>
    <!--
        ##超链接标签
        **作用**
        - 链接资源
            - 必需的属性 href="url"
            - 需要填写协议,默认是file,如果浏览器解析不了,会弹出下载
            - 支持自定义协议


        - 定位资源
            - name属性可以定位一个锚点
            - 通过href="#锚点名称" 可以通过超链接来定位到锚点


        **语法**
        `<a></a>`
     -->


    <a href="http://www.thecatcher.net">野生程序员</a>
    <!-- 这就是一种自定义协议,点击这个链接之后,浏览器会调用本地软件打开该链接 -->
    <a href="thunder://lkjasdasdhkjnkj">监狱风雨2</a>

    <hr/>

    <a name="top"></a>
    balabalabla.... 
    <a href="#top">返回顶部</a>

</body>
</html>
posted @ 2016-07-06 00:28  不愿透露姓名的高杨  阅读(174)  评论(0)    收藏  举报