HTML学习笔记(上)

来源：互联网发布：网络电视能连手机吗编辑：程序博客网时间：2024/06/04 00:31

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>

0 0