什么是HTML?
1.HEML指的是超文本标记语言(Hyper Text Markup Language)
2.HTML不是一种编程语言,而是一种标记语言
3.标记语言是一套标记标签(markuo tag)
4.HTML使用标记语言来描述网页
HTML标签
HTML标记标签通常被称为HTML标签(HTML tag)
1.HTML标签是有尖括号包围的关键词,比如<html>
2.HTML标签通常是成对出现的,比如<b>和</b>
3.标签对中的第一个标签是开始标签,第二个标签是结束标签
4.开始和结束标签也被称为开放标签和闭合标签
HTML文档=网页
1.HTML文档描述网页
2.HTML文档包含了HTML标签和纯文本
3.HTML文档也被称为网页
注释:web浏览器的作用是读取HTML文档,并以网页的形式显示出它们.浏览器不会显示HTML标签,而是使用标签来解释里面的内容
HTML文件结构:是以.HTML或者.htm结尾的文本文件
<!DOCTYPE html>//这个指的是HTML的版本
<html lang="en">
//HTML标签是由<head>和<body>子标签组成的
<head>
<meta charset="UTF-8">//这个是它的编码语言
<title>Title</title>//这个是标题
</head>
//head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分
<body>
//在<body>里面来写你想要显示的内容
</body>
</html>
HTML常用标签:
HTML标题
HTML标题(Heading)是通过<h1>~<h6>等标签来进行定义的
<h1>字体最大<h6>最小
注释:
浏览器会自动的在标题的前后添加空行
默认情况下,HTML会自动的在块级元素前后添加一个额外的空行,比如段落,标题元素前后
标题的重要性:
不要仅仅是为了产生粗体或者大号的文本而使用标题
搜索引擎使用标题为您的网页结构和内容编制索引.
因为用户可以通过标题来快速浏览网页,所以用标题来呈现文档结构是很重要的.
HTML注释:<!-- 注释的内容-->
HTML段落
HTML段落是通过<p>标签来进行定义的
<p>标签可以起到内容换行的作用,普通文本是不会自动换行的
<hr/>分隔符,加一道横线
<br/>换行符,起到换行的作用
特殊的转义字符
<表示:<
>:表示>
HTML超链接
HTML超链接是通过<a>标签来进行定义的
<a href="...这里面写你要超链接的网址">...这里写内容</a>
HTML图像
HTML图像是通过<img>标签来进行定义的
<img src="//图像的路径" width="宽" height="高"/>
注释:图像的名称和尺寸都是以属性的形式提供的
alt是图片访问不到是的提示文字
HTML文档是由HTML元素定义的
HTML元素
HTML元素指的是从开始标签<start tag>到结束标签<end tag>的所有代码
<p> Hello Word </p>
开始标签 元素内容 结束标签
注释:开始标签经常被称为开放标签(opening tag),结束标签经常被称为闭合标签(closing tag)
HTML元素语法
1.HTML元素是以开始标签起始,以结束标签终止
2.元素的内容是开始标签与结束标签之间的内容
3,某些HTML元素具有空内容(empty content)
3.空元素在开始标签中进行关闭(就是以开始标签结束而结束)
4.大多数HTML元素可以拥有属性
嵌套的HTML元素
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
注意:
不要忘记结束标签,在未来的HTML的版本中不允许省略结束标签
没有内容的HTML元素被称为空元素,空元素是在开始标签中关闭的,<br>就是没有关闭标签的空元素(<br>标签定义换行)
即使<br>在所有浏览器中都是有效的,但使用<br/>是更长远的保障
在未来的版本总所有的HTML标签将会强制使用小写
HTML属性
HTML标签可以拥有属性,属性提供了有关HTML元素的更多的信息
属性总是在HTML元素的开始标签中规定
属性应该始终被包括在引号内,双引号是最常用的,不过单引号也没有问题
在某些个别的情况下,比如属性值本身就含有双引号.那么就必须使用单引号
下面是适用于大多数HTML元素的属性:
属性 | 值 | 描述 |
class | classname | 规定元素的类名 |
id | id | 规定元素的唯一id |
style | style-definition | 规定元素的行内样式 |
title | text | 规定元素的额外信息 |
HTML表格
<table>
<thead></thead> 头
<tbody></tbody> 体
<tfoot></tfoot> 脚
</table>
其中 thead, tbody, tfoot 里又可以分为行与列
<tr> 表示行 <td> 表示列
比如要在tbody再分两行两列
<table>
<tbody>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</tbody>
<table>
生成表格的快捷写法:
4行3列 table>tbody>tr*4>td*3
同时生成thead和tbody 需要用() 把他们分组,平级的用+连在一起
table>(thead>tr>td*3)+(tbody>tr*4>td*3)
给table加属性的快捷写法
table[border=1][width=100%]>tbody>tr*2>td*2
cosplan="要合并列的个数"
rowspan="要合并行的个数"