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)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

随机推荐

浅谈web前端安全
单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服--没人看得到,自然也不算啥恶意行为.那么如果我把你的信息通过脚本发送到我的服务器保存起来呢?先放心,我不打算这么做,也没那笔闲钱去购置一个 ...
request.getParameterValues()用法
<form name="checkform" method="post" action="getvalue.jsp"> 你希望学 ...
js jQuery函数 $.ajax()
$.ajax() //$表示是jQuery cache: 要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中 ...
根据分辨率改变宽度 demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
Spring MVC下拉选项(Select)
以下示例显示如何在使用Spring Web MVC框架的表单中使用下拉选项(Dropdown).首先使用Eclipse IDE来创建一个WEB工程,实现一个让用户可选择自己所在的国家的功能.并按照以下 ...
poj 2117(割点的应用)
题目链接:http://poj.org/problem?id=2117 思路:题目的意思是要求对于给定的无向图,删除某个顶点后,求最大的连通分量数.显然我们只有删掉割点后,连通分支数才会增加,因此我们 ...
python提供了一个进行hash加密的模块：hashlib
python提供了一个进行hash加密的模块:hashlib下面主要记录下其中的md5加密方式 import hashlib data1 = 'sada' #####字母和数字 m = hashlib ...
SSH后台管理系统，实现查询+分页
一个搜索框,然后会获取大量信息,将信息进行分页,每一页显示固定条数. mysql中使用“like”和“%%”进行模糊匹配,用“limit”进行分页. 1.首先创建一个页面信息的实体类,代码如下: im ...
Android开发：《Gradle Recipes for Android》阅读笔记(翻译)2.7——使用Android Studio签署发布apk
问题: 想要使用Android studio生成签名配置,给他们分配build类型. 解决方案: Build菜单提供了生成签名配置,Project Structure窗口有tab用于分配不同的type ...
《数据结构（C#语言描述）》
本文转载自abatei,数据结构学了很多次,但是只是知道硬性的概念,现在专攻C#语言,对编程语言也有了更深的认识, 买一本C#的数据结构来看看,再一次加深对数据结构的学习,真是一件让人高兴的事. 当当 ...