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>

HTML学习笔记(上)的更多相关文章

Zookeeper学习笔记(上)
Zookeeper学习笔记本篇主要是一些基本的介绍和API的使用介绍, 有些只是记录了知识点,而没有完全在笔记中详细解释, 需要自行查找资料补充相关概念主要参考了课程中的内容: Zookeeper ...
Bootstrap学习笔记上（带源码）
阅读目录排版表单网格系统菜单.按钮做好笔记方便日后查阅o(╯□╰)o bootstrap简介: ☑ 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集 ...
struts2学习笔记--上传单个和批量文件示例
struts2提供了对上传文件的支持,将上传后的文件封装为java.io.File对象,开发者只需要在Action中定义一个File类型的变量,然后直接使用该变量,将它复制到目的目录即可. 单个文件上 ...
Javaweb学习笔记——上传下载文件
一.前言在Javaweb中,上传下载是经常用到的功能,对于文件上传,浏览器在上传的过程中是以流的过程将文件传给服务器,一般都是使用commons-fileupload这个包实现上传功能,因为comm ...
PHP学习笔记——上传文件到服务端的文件夹下
环境开发包:appserv-win32-2.5.10 服务器:Apache2.2 数据库:phpMyAdmin 语言:php5,java 平台:windows 10 需求编写一个PHP脚本页面,可 ...
Oracle PL/SQL语句基础学习笔记(上)
PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE server和其它工具中了,近几年中很多其它的开发者和DBA開始使用PL/SQL,本文将讲述PL ...
git学习笔记(上)
1 安装 win安装地址安装之后自报家门 $ git config --global user.name "Your Name" $ git config --global u ...
Git学习笔记-上传一个新的项目到GitHub上
前提: 已有Github账号,已在Github上建立了仓库,已在Github上配置了SSH,已上传过一些项目到Github上目标: 目前有一个新的项目,需要上传到github上我的做法记录: 1. ...
学习笔记-AngularJs（九）
到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

随机推荐

Python的实例方法,类方法,静态方法之间的区别及调用关系
如果只看这个图,很多人可能会看的一头雾水,特别是学过完全面向对象语言的同学, Python 是双面向的,既可以面向函数编程,也可以面向对象编程,所谓面向函数就是单独一个. py 文件,里面没有类,全是 ...
android http通信之HttpURLConnection post乱码问题
楼主前段时间做android项目,用到http通信,于是楼主本着练手的态度,自己写httpUrlConnection通信过程,然后在测试的时候,发现使用post请求一直乱码,这时候楼主开始看发送的数据 ...
Customize Netbeans Platform Splash Screen and About Dialog
原帖一直打不开,通过谷歌翻译找到的 http://blogs.kiyut.com/tonny/2007/10/18/customize-netbeans-platform-splash-screen- ...
Node Embedding
1.Kipf, Thomas N., and Max Welling. "Semi-supervised classification with graph convolutional ne ...
execute,executeQuery和executeUpdate的区别
在jdbc中有3种执行sql的语句分别是execute,executeQuery和executeUpdate execute执行增删改查操作 execute返回的结果是个boolean型,当返回的是t ...
Java sql server数据库连接成功
import java.sql.Connection; import java.sql.SQLException; import java.sql.Statement; import java.sql ...
asp.net中TextBox只能输入数字的最简洁的两种方法
如下TextBox <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server&quo ...
HDU3062-Party(2-SAT)
pid=3062">题目链接思路:2-SAT的模版题代码: #include <iostream> #include <cstdio> #include & ...
SQL 基本关键字函数关联连接
http://www.w3cschool.cn/sql_having.html w3c中有些SQL的讲解 1 order by 排序 SELECT Company, OrderNumber FROM ...
Android Studio中debug和release模式默认的参数配置
The possible properties and their default values are: debuggable:表示是否可以在手机上调试程序. 在Eclipse中,只有android ...