HTML简介
HTML概念
HTML
超文本标记语言
以htm或html为拓展名
包含标记的文本文件
通过浏览器解析标记来显示页面
基本结构
- HTML文件通常由文档头 正文两部分构成;在外层以<html>....</html>标识为HTML文件
<html>
<head>
<title>.....</title>
</head>
<body>
<p>.....</p>
</body>
</html>第一个网页-解释执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first page</title>
</head>
<body>
<h1>You are welcom</h1>
<br/><hr />
<font color ="blue">
start!
</font>
</body>
</html>标记
- HTML文档是由HTML标记及内容组成的文本文件
- HTML标记的组成
通常成对出现,在开始标记和结束标记之间的文本是内容
大小写无关<b>和<B>表示的意思是一样的
<element attrtbute = value>
element: 元素-标识标记
attrtbute: 属性-描述标记
value:值-分配给属性的内容
标记的属性
- 标记的属性
属性为页面上的HTML元素提供附加信息
<body bgcolor = "red">.....</body>
<table border = "0">.....</table>
属性通常以name = "value" 对出现,写在起始标记中;一个标记可以有多个属性
属性值应该被包含在引号中,常用双引号.可嵌套使用单引号
<body style = "font-size:'40pt';color:'red'">...</body>
基本标记
行控制
布局
浏览器解析HTML页面时,忽略源代码中多余的空格/空行等
如果我们需要给文字设置换行样式,需要使用特定的标记
<br/>
<nobr>
<p>
行控制-无换行-示例
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>Title of page </title>
</head>
<body>
This is a heading.This is my first homepage
<b>This text is blod</b>
This is another paragraph
</body>
</html>
行控制-p段落标记
- 段落:<p>.....</p>
将标记间的文字置为一个新的段落
可以设置以下属性
| 属性 | 含义 |
| align | 设置段落的对齐方式,可取left/center/right |
- <p>示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p align="center">paragraph</p>
<p>This is first paragraph</p>
<p>This is new paragraph</p>
</body>
</html>
行控制-br/nobr
- 换行:<br>
- 不换行<nobr>.....</nobr>
- 建议换行<wbr>
将此标记加在建议换行的位置
如:页面中显示网址,一般不会再网址字符串中间换行加此标记后可能会换行
文字分区-div
分区:<div>.....</div>
把标记中的内容做为单独的一块处理
可设置以下属性
| 属性 | 含义 |
| align | 设置段落的对齐方式,可取left/center/right |
预设格式文本-pre
预设格式文本-pre
HTML在显示时一般会吃掉过多的空白字符(只显示一个)和换行符(不显示),但我们可以用<pre>和</pre>让空白字符/换行字符保存下来
常用于计算机程序的表达
字体-font
字体:<font>.......</font>
还有basefont标记可以设置页面的默认字体,通常放在head标记中
可设置以下属性
| 属性 | 含义 |
| size | 设置文字的大小 |
| color | 设置文字的颜色 |
| face | 设置文字的字体列表 |
标题字体-hn
标题字体:<hn>......</hn>
n的取值由1到6,h1最大
显示黑体字,并自动插入空行
可以设置如下属性
| 属性 | 含义 |
| align | 设置标题的位置,可取left/center/right |
物理字体
- 物理字体
设置字体显示样式,主要有以下标记
| 标记 | 含义 |
<b>...</b> | 设置标记间的文字为粗体 |
| <i>...</i> | 设置标记间的文字为斜体 |
| <u>...</u> | 设置标记间的文字带下划线 |
| <sup>...</sup> | 设置标记间的文字为上标 |
| <sub>...</sub> | 设置标记间的文字为下标 |
| <del>...</del> | 设置标记间的文字带删除线 |
| <ins>...</ins> | 设置标记间的文字为插入 |
| <bdo>...</bdo> | 设置标记间的文字方向 |
| <tt>...</tt> | 设置文字为电传打字机体 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<del>删除线</del>
<ins>插入</ins> pices
<bdo dir ="rtl">Here is some Hebrew text</bdo>
<tt>电传打字机体????????</tt>
</body>
</html>
逻辑字体
逻辑字体(与浏览器相关):
表现文字含义,主要有以下标记
| 标记 | 含义 |
| <em>...</em> | 一般强调,斜体 |
| <strong>...</strong> | 特别强调,黑体 |
| <address>...</address> | 表示地址 |
| <q>...</q> | 定义引用 |
| <kbd>...</kbd> | 用户键入的文字,字体变细变轻 |
| <cite>...</cite> | 一段引用的文字,斜体.用于书名/电影名 |
| <small>...</small> | 字体变小 |
| <big>...</big> | 字体变大 |
| <dfn>...</dfn> | 定义术语 |
| <abbr>...</abbr> | 取首字母缩写 |
| <code>...</code> | 源代码 |
| <var>...</var> | 变量 |
| <samp>...</samp> | 例子 |
水平线-hr
水平线:<hr>
用于分割同一文本的不同部分
可以设置如下属性:
| 属性 | 含义 |
| align | 设置水平线的位置,align的参数有left/center/right |
| width | 设置水平线的宽度,可以用百分数,也可以用像素数 |
| size | 设置水平线的粗细 |
| color | 设置水平线的颜色 |
注释
注释:<!--...-->
浏览器中不显示注释内容
文字移动-marquee
移动:<marquee>...</marquee>
设置标记中的文本移动----marquee
可以设置如下属性
| 属性 | 含义 |
| direction | 设置移动方向,值为left/right |
| behavior | 设置移动方式,值为slide/scroll/alternate |
| loop | 设置循环次数,整数值,未设置则一直循环 |
列表
- 列表
用于列表内容
列表分类
无序列表
有序列表
无序列表--ul
无序列表:<ul>...</ul>
列表项以<li>...</li>标识
可以设置如下属性:
| 属性 | 含义 |
| type | 取值可以是disc(实心圆点)/square(实心方点)/circle(圆圈)作为列表符号 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li type="disc">Coffee</li>
<li type="square">Tea</li>
<li type ="circle">Milk</li>
</ul>
</body>
</html>
有序列表--ol
有序列表:<ol>...</ol>
列表项以<li>...</li>标识
每一项显示时都有编号
可以设置如下属性
| 属性 | 含义 |
| type | 取值可以是1/a/A/i/I,分别代表编号使用阿拉伯数字/小写英文字母/大写英文字母/小写罗马数字/大写罗马数字 |
| start | 指定序号的起始值,只能取数字 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol>
<li>Cofffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="3" type = "a">
<li>Cofffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="9">
<li type="i">Cofffee</li>
<li type="A">Tea</li>
<li type="I">Milk</li>
</ol>
</body>
</html>
嵌套列表-示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>A nestted List</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>