第一部分html
一、什么是html?
全称:Hyper Text Markup Language 超文本标记语言。用于描述网页文档的一种标记语言。
二、html标签
html分为单标签和双标签
html标签是由尖括号包围的关键词,比如 <html>
html 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
三、html文档
html文档又被称作网页
Web浏览器的作用是读取html文档,并以网页的形式显示出它们。浏览器不会显示html标签,而是使用标签来解释页面的内容。
结构:由head和body组成
<head></head>标签中包括单标签<meta>,<meta/>主要用来描述html网页文档的属性,也称作元信息。比如作者和日期时间、网页相关描述、关键词等。
<head></head>标签中还包括双标签<title></title>,两者之间的内容是显示在浏览器的标题栏上的信息。
<body></body>标签是web页面的主要部分,其中的内容是人们可以实际看到的网页信息。
四、html中的注释
<!- -AAA- ->“AAA”为注释内容
五、html文档类型
- 在网页源代码中,我们通常会看到<!DOCTYPE html>这样的标签,此标签不是html标签,它的作用是告知浏览器文档使用哪种html或xhtml规范。
六、html基本语法
双标记
<标记>内容</标记>
如:<html> …… </html>
单标记
<标记>
如:<br />
标记属性
<标记 属性1=value1 属性2=value2 属性3=value3 …>
key=value
如:<body bgcolor=“#00ff00”>
七、常见标签
1.基本标签
<html> 定义 HTML 页面,根标签
<head> 页面头部
<meta> HTML 页面的元信息
html4:
<meta content="text/html" http-equiv="Content-Type" charset="UTF-8"/>
html5:
<meta charset="UTF-8" />
<title>我的主页</title> 文档的标题
<link> 引入外部资源(了解)
<style>…</style> 定义或引入样式(了解)
</head>
<body>…</body> 页面体
</html>
2.文本标签
<h1>...</h1> 标题字大小(h1~h6)
<p>...</p> 段落
<br/> 换行
<ul>…</ul> 无序列表
<ol>…</ol> 有序列表
<li>…</li> 列表项目
<a href=”…”>…</a> 文字超链接
<a href="#dest">destination</a> 锚点及其使用
<a name="dest">destination is here!!!</a>
<pre>...</pre> 保留文档样式
<b>...</b> 粗体字,尽量不用bold
<strong>...</strong> 粗体字(强调)
<em>...</em> 强调,表示为斜体,没有strong强
3.图形标签
<img src="" alt=""> 定义图像 alt属性,注意src的相对和绝对路径
<a href=""><img src="" /></a> 图像超链接
<hr/> 水平线
八、标签的分类
标签除了可以分为单标签和双标签外还可以有如下三种分类:
块状元素
行内元素
行内块状元素
常用的块状元素:<div> <p> <h1>…..<h6> <ol> <ul> <dl><table><address> <blockquote> <form>
常用的行内元素:<a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var>
常用的行内块状元素:<img> <input>
块级元素特点:display:block;
每个块级元素都从新的一行开始,并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。行内元素特点:display:inline;
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。行内块状元素的特点:display:inline-block;
和其他元素都在一行上;
元素的高度、宽度、行高以及顶和底边距都可设置。