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 安装 MaxMind GeoLite City
1.先安装 geoip c library geoip c library >= 1.4.6 installed on your machine. >= 1.4.6 installed ...
android属性动画之ValueAnimator
楼主前段时间做一个android项目,其中一个需求是需要制作一个动画,但是之前楼主没接触过android动画,所以在网上搜了下,并且也有人推荐可以试下用属性动画,所以我就百度了下属性动画怎么用,并顺便 ...
redis python交互和实际例子
import redis try: r=redis.StrictRedis(host='localhost',port=6379) except Exception,e: print e.messag ...
xxxxxxclub系统模块分类
不是分析整个程序执行的过程. 分析程序在设计的时候模块怎样分类针对的是应用程序,name 类的装载:1. Spring配置基于接口调用hsf 3. 一个页面相应的java类 Spring的xml文 ...
PHPthinking邀请您一起赚Money
原文地址:http://bbs.phpthinking.com/thread-790-1-1.html 为了让大家工作或者学习之余.可以赚些money,PHPthinking为大家推荐一个赚钱的站点! ...
LR测试文件上传
开启fiddler 录制,回放,把上传文件放入脚本根目录中.
hibernate 标签inverse cascade
inverse设立不当会导致性能低下,其实是说inverse设立不当,会产生多余重复的SQL语句甚至致使JDBC exception的throw.这是我们在建立实体类关系时必须需要关注的地方.一般来说 ...
48、ViewFlow ---- 滑动广告页
 <?xml version="1.0" encoding="utf-8"?> <LinearL ...
《从零开始学Swift》学习笔记（Day 45）——重写方法
原创文章,欢迎转载.转载请注明:关东升的博客重写实例方法在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var name: S ...
windows解除端口占用
1.步骤如图: 图片原文:https://stackoverflow.com/questions/33108185/intellij-keeps-displaying-annoying-message ...