涵盖内容
基本语法、标签、声明、属性
标签属于什么元素,内联/内联-块级/块级元素
- 元素
+ "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
+ 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,
+ 元素组成:起始标签+元素内容+结束标签 -
什么是HTML?
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
<!DOCTYPE>
声明- doctype 声明是不区分大小写的
- html的版本,例如html5
<!DOCTYPE html>
- 中文编码
<head> <meta charset="UTF-8"> </head>
- HTML 标题(Heading)是通过
<h1> - <h6>
标签来定义的。 -
HTML 段落是通过标签
<p>
来定义的。 -
HTML 链接是通过标签
<a>
来定义的。 -
HTML 图像是通过标签
<img>
来定义的. -
HTML 空元素
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
-
<br>
就是没有关闭标签的空元素(<br>
标签定义换行)。 -
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
-
在开始标签中添加斜杠,比如
<br />
,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。 -
即使
<br>
在所有浏览器中都是有效的,但使用<br />
其实是更长远的保障。
-
HTML 属性
- name="value"
- style:规定元素的行内样式(inline style)
<hr>
标签在 HTML 页面中创建水平线。-
<!-- 这是一个注释 -->
-
HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
-
HTML 格式化标签
- HTML 使用标签
<b>
("bold") 与<i>
("italic") 对输出的文本进行格式, 如:粗体 or 斜体 -
通常标签
<strong>
替换加粗标签<b>
来使用,<em>
替换<i>
标签使用。 <strong>
或者<em>
意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。
- HTML 使用标签
-
target 属性,你可以定义被链接的文档在何处显示
- 打开新窗口
<a href="" target="_blank" "></a>
- 打开新窗口
- HTML
<base>
元素<base>
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:<head> <base href="http://www.runoob.com/images/" target="_blank"> </head>
- HTML
<link>
元素<link>
标签定义了文档与外部资源之间的关系。<link>
标签通常用于链接到样式表:<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- HTML
<style>
元素<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
- HTML
<meta>
元素- meta标签描述了一些基本的元数据。
-
<meta>
标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。 -
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
-
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
-
<meta>
一般放置于<head>
区域 -
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 表格
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
- HTML无序列表
<ul> <li>Coffee</li> <li>Milk</li> </ul>
- HTML 有序列表
<ol> <li>Coffee</li> <li>Milk</li> </ol>
-
HTML 区块元素
- 大多数 HTML 元素被定义为块级元素或内联元素。
- 块级元素在浏览器显示时,通常会以新行来开始(和结束)。
-
实例:
<h1>, <p>, <ul>, <table>
-
HTML 内联元素
- 内联元素在显示时通常不会以新行开始。
- 实例:
<b>, <td>, <a>, <img>
- 字体居中
text-align:center;
-
下拉选择框
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
- HTML 框架
<iframe src="URL"></iframe>