HTML学习路程(一)HTML教程
超文本标记语言(Hyper Test Markup Language 简称:HTML)是一种用于创建网页的标准标记语言,可以使用HTML来建立自己的Web站点,HTML运行在浏览器上,有浏览器来解析。
HTML简介
<!DOCTYPE html> //声明为HTML5文档
<html> //元素是html的根元素
<head> //元素包含了文档的元(meta)数据,涉及字符集之类的
<meta charset="utf-8">
<title>学习之路</title> //元素描述了文档的标题
</head>
<body> //元素包含了可见的内容界面
<h1>第一个标题</h1> //元素定义了一个大标题
<p>第一个段落</p> //元素定义了一个段落
</body>
</html>
HTML是用来描述网页的语言
HTML指的是超文本标记语言:HyperText Markup Language
HTML不是一种编程语言,而是一种标记语言
标记语言是一套标记标签(markup tag)、
HTML使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容
HTML文档也叫做web页面
HTML标记标签通常被称为HTML标签
HTML标签是由尖括号包围的关键词,比如<HTML>
HTML标签通常是成对出现的,比如<b>和</b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始标签和结束标签也被称为开放标签和闭合标签
<!DOCTYPE>声明有助于浏览器中正确显示网页
网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确的显示网页内容,DOCTYPE声明是不区分大小写的。
中文编码
在大部分的浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为utf-8
HTML基础
HTML标题
HTML标题是通过<h1>-<h6>标签来定义的
HTML段落
HTML段落是通过标签<p>来定义的
HTML连接
HTML连接是通过标签<a>来定义的
<a href="http://www.baidu.com">This is a link </a>
HTML图像
HTML图像是通过<img>标签进行定义的。
<img src="baidu.jpg" width="102" height="123"/>
HTML元素
html文档是由HTML元素定义的
HTML元素指的是从开始标签到结束标签的所有代码
HTML元素语法
HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容
空元素在开始标签中进行关闭
大多数的HTML元素拥有属性
大多数的HTML元素可以嵌套
HTML文档由嵌套的HTML元素构成
HTML属性
属性为HTML元素提供附加信息
HTM标签可以拥有属性,属性提供了有关HTML元素的更多的信息
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在HTML元素的开始标签中规定。
HTML标题
HTML标题是由<h1>-<h6>等标签进行定义的。
<h1>定义最大的标题。<h6>定义最小的标题。浏览器会自动地在标题的前后添加空行。
HTML的标题很重要
要确保将HTML标题 标签只用于标题。不要仅仅是为了生成粗体或者大号的文本而使用标题。
搜索引擎使用标题是为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览网页,所以用标题来呈现文档结构是很重要的
应该将h1用作主标题(最重要的),其次是h2(次要的),再其次是h3,以此类推。
HTML水平线
<hr>标签在HTML页面中创建水平线。
HTML标题大小与字体大小的关系
1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
HTML段落
HTML可以将文档分割为若干段落。段落是通过<p>标签定义的,浏览器会自动地在段落的前后添加空行(</p>是块级元素)
HTML的换行
如果希望在段落中进行换行,请使用<br/>标签;
HTML文本格式化
HTML使用标签<b>与<i>对输出的文本进行格式,<b>是粗体 <i>是斜体文本。
<strong>与<em>可以替换上述标签,但他们更加注重的是你要呈现的文本是重要的,所以要突出显示。
HTML链接
HTML使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。
HTML超链接
HTML使用标签<a>来设置超文本链接。
超文本链接可以是一个字,一个词,或者一组词,也可以是一幅图像
默认的情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
HTML链接的语法
链接的HTML代码如下:
<a href="url">链接文本</a>
HTML链接的target属性
使用target属性,你可以定义被链接的文档在何处显示
<a href="www.baidu.com" target="_blank">访问链接</a>
这个链接会在新的窗口中打开
HTML链接-id属性
id属性可用于创建一个HTML文档书签标记
HTML头部
<title>定义了HTML文档的标题
<base>定义了所有链接的URL
<meta>提供了HTML文档meta标记
HTML<head>元素
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本(scripts),样式文件(CSS),以及各种meta信息。
可以添加在头部区域的元素标签为:<title>,<style>,<meta>,<link>,<script>,<noscript>,<base>
HTML<title>元素
<title>标签定义了不同的文档的标题
<title>在HTML/XHTML文档中是必须有的
<title>元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时,显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
HTML<base>元素
<base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。
HTML<link>元素
<link>标签定义了文档与外部资源之间的关系
HTML<style>元素
<style>标签定义了HTML文档的样式文件引用地址
HTML<meta>元素
meta标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。<meta> 一般放置于 <head> 区域
HTML<script>元素
<script>标签用于加载脚本文件
HTML CSS
CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式
CSS是为了更好的渲染HTML元素而引入的
CSS通过以下方式添加到HTML中:
内联样式-在HTML元素中使用“style”属性
内部样式表-在HTML文档头部<head>区域使用<style>元素 来包含CSS
外部引用-使用外部CSS文件
最好的方式是通过外部引用CSS文件
内联样式
当特殊的样式需要应用到个别元素的时候,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。一下实例显示出如何改变段落的颜色和左边外边距。
<p style="color:blue; margin-left:20px">This is my blog.</p>
HTML样式实例-背景颜色
背景色属性(background-color)定义一个元素的背景颜色
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="test/css" href="mystyle.css">
</head>
HTML图像
HTML图像-图像标签(<img>)和源属性(Src)
在HTML中,图像是由<img>标签定义。
<img>是空标签,意思是说,它只包含属性,并没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src指“source”。源属性的值是图像的URL地址
定义图像的语法是:
<img src="url" alt="some_text">
其中URL指的是存储图像的位置
浏览器将图像显示在文档中图像标签出现的位置上。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,然后显示第二段。
HTML图像-Alt属性
alt属性用来为图像定义一串预备的可替换的文本
替换文本属性的值是用户定义的
<img src="c/ss/ss/img.gif" alt="sds">
在浏览器无法载入图像的时候,替换文本属性告诉读者他们失去的信息,此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都将加上替换文本的属性是一个很好的习惯。
HTML图像-设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
HTML表格
html中的表格是有<table>标签定义的,每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格和边框属性
如果不定义边框属性,表格将不显示边框。
使用边框属性来显示一个带有边框的表格:
<table border="1‘’>
<tr>
<td>ROW1,CELL1</td>
<td>ROW1,CELL2</td>
</tr>
</table>
HTML表格表头
表格的表头使用<th>标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本。
HTML 列表
HTML有序列表
有序列表是一个项目列表,此列项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
列表项项使用数字来标记。
<ol>
<li>sdsd</li>
<li>sds</li>
</ol>
HTML无序列表
无序列表也是一个项目的列表,此列项目使用粗体远点(典型的小黑圆圈)进行标记。
无序列表使用<ul>标签
<ul>
<li>sadsa</li>
<li>asfd</li>
</ul>
HTML自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表以<dt>开始。每个自定义列表项的定义以<dd>开始
HTML区块
HTML可以通过<div>和<span>将元素组合起来
HTML区块元素
大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
<h1>,<p>,<ul>,<table>
HTML内联元素
内联元素在显示时通常不会以新行开始。
实例:<b>,<td>,<a>,<img>
HTML<div>元素
HTML<div>元素是块级,它可用于组合其他HTML元素的容器。
<div>元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与CSS一同使用,<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML<span>元素
HTML<span>元素是内联元素,可用作文本的容器。
<span>元素也没有特定的含义。
当与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。
HTML布局
网页布局对改善网站的外观非常重要。
HTML表单
HTML框架
HTML颜色
HTML颜色名
HTML颜色值
HTML颜色值
HTML脚本
HTML字符实体
HTMLURL
HTML速查列表
HTML总结
XHTML简介