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
* 空格
* 一个区域
* <div></div>
* CSS+div在网页上进行布局
* 块元素,自带换行光环
* <span></span>
* 行元素,不会换行
* 通过js动态添加内容的时候,经常使用
-->
我 的 题 目
<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>
* 标签和嵌套
* 转义字符
* < <
* > &at
* & &
* 滚动的字幕
* 太土了...都没人用了
* <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)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...
随机推荐
- 导入mysql文件提示“ASCII '\0' appeared in the statement”
在windows服务器上导入mysql文件时,出现以下报错:ASCII '\0' appeared in the statement, but this is not allowed unless o ...
- Python 双向链表 快速排序
1.创建链表: from random import randint class DLinkedNode(object): def __init__(self, data=None, pre=None ...
- 安装nextant
1. 安装java sudo apt-get install default-jre 然后用下面语句试试 java -version 2. 下载和解压solr,去https://lucene.apac ...
- 微信小程序 view 布局
刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性”row” ...
- db2 blob EMPTY_BLOB()
--针对BLOG类型的列,写入一个0长度的字符串
- ChemDraw 15出现安装异常如何处理
化学绘图软件ChemDraw最近更新了,更新后的是2015版本,ChemDraw Professional 15是其中组件之一.一些用户朋友在使用ChemDraw 15的过程中由于对软件的不了解往往会 ...
- 【转发】linux开发人员常用命令
每个开发人员到了他们职业人生的某个阶段的时候,将会发现自己要寻找有关Linux的信息.我并不是这方面的专家.但是掌握了以下8个命令,我几乎可以得到我任何需要的东西. 注意:以下的命令都有很多扩展的文档 ...
- poj 3683(2-sat+输出一组可行解)
题目链接:http://poj.org/problem?id=3683 思路:对于每个结婚仪式,只有在开始或结束时进行这两种选择,我们可以定义xi为真当且仅当在开始时进行.于是我们可以通过时间先后确定 ...
- syntaxerror : unexpected token &
部署网站到服务器后,添加.修改.删除数据都会出现这个错误,之前都没有出现过. 之前的服务器系统都是windowserver2008,而这次所部署的服务器系统也是2008,只是此服务器一开始并没有安装. ...
- go反射----1类型
声明:文章内容取自雨痕老师<Go语言学习笔记> 反射( reflect )让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥补了静态语言在动态行为上的不足.同时,反射还是元编程 ...