HTML简介
1什么是HTML?
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
2HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号 包围的关键词,比如 <html>
HTML 标签通常是成对出现 的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签 和 闭合标签
<标签>内容</标签>
(1)HTML标签
整个网页是从<html>这里开始的,然后到</html>结束。
(2)head标签
head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。
标签 | 描述 |
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
<head>的内部标签也非常重要,在前期大家只需要感性认知就可以。
(3)body标签
body标签代表页面的“身”,定义网页展示内容,这些内容往往都是“可见内容”(在浏览器可见)。
后续笔记讲解的标签都是在<body>标签内部的各种标签。
3HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>这是一个段落。</p>
二、基础知识
(一)、段落标签
(1)、段落与文字标签
表1 段落与文字标签
标签 | 语义 | 说明 |
---|---|---|
<h1>-<h6> | header | 标题 |
<p> | paragraph | 段落 |
<br> | break | 换行 |
<hr> | horizontalrule | 水平线 |
<div> | division | 分割(块元素) |
<span> | span | 区域(行内元素) |
(2)、文本格式化标签
表2 文本格式化标签
标签 语义 说明
<strong> <b> strong(加强) 加粗
<em> <i> emphasized(强调) 斜体
<del> <s> delete (删除) 划过
<ins> <u> 下划线 下划
<cite> cite(引用) 斜体
<sup> superscripted(上标) 上标
<sub> subscripted(下标) 下标
————————————————
(二)、网页特殊符号
网页特殊符号只需要记忆几个就行了,HTML空格 <是 <>是 >,其他的特殊符号我们不需要记忆,当我们需要的时候再回来查找一下特殊符号表就OK了。
(三)、自闭合标签
HTML标签分为2种,一种是“一般标签”,另外一种是“自闭合标签”。一般标签有开始符号和结束符号,自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号,不能插入其他标签或文字,只能定义自身的属性。
(1)、一般标签
举例:<body></body>
(2)、自闭合标签
举例:<br/>、<hr/>
(四)、图片标签
在HTML中,我们使用img标签来表示图片。
img标签有两个重要属性:alt和title。
alt属性用于图片描述,这个描述文字是给捜索引擎看的。并且当图片无法显示时,页面 会显示alt中的文字。
title属性也用于图片描述,不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上时,会显示title中的内容。
语法:
<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
表1 img标签常用属性
属性 说明
src 图像的文件地址
alt 图片显示不出来时的提示文字
title 鼠标移到图片上的提示文字
(五)、相对路径和绝对路径
相对路径,指的是同一个网站下,不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言,从而得到相对路径。
绝对路径,指的是文件的完整路径。
详细复习内容,请查看相对路径和绝对路径
(六)、超链接标签(重点)
超链接使用a标签,语法如下:
<a href="链接地址" target="目标窗口的打开方式">
表1 <a>标签target属性
target属性值 说明
_self 默认方式,即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层里打开链接
我们只需要掌握“_self”和“_blank”这两个属性值就可以了,其他两个用不到。
超链接根据链接对象的不同分为:
1.外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >。
3.空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。
4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> 第2集 </a>
找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id="two">第2集介绍</h3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
</body>
</html>
(七)、列表标签
3种列表的语义记忆:
表1 3种列表记忆
标签 语义 说明
ol ordered list 有序列表
ul unordered list 无序列表
dl definition list 定义列表
HTML3种列表
列表有3种:有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用,而定义列表比较少用。在实际应用中,最常用的是无序列表,请大家重点掌握。
目录列表和菜单列表已经被废除,大家可以直接忽略这两种列表。
(1)、有序列表
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
表1 有序列表type属性
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……
学习了CSS入门教程之后,有序列表列表项符号由list-style-type属性定义,到时候应该摒弃type属性。
(2)、无序列表
无序列表是三个列表中最为重要的列表。
语法:
<ul type="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
表1 无序列表type属性
type属性值 列表项的序号类型
disc 默认值,实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
学习了CSS之后,无序列表列表项符号由list-style-type定义,到时候应该摒弃type属性。
(3)、自定义列表
语法:
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
……
</dl>
说明:
<dl>即“definition list(定义列表)”,<dt>即“definition term(定义名词)”,而<dd>即“definition description(定义描述)”。
在该语法中,<dl>标记和</dl>标记分别定义了定义列表的开始和结束,<dt>后面添加要解释的名词,而在<dd>后面则添加该名词的具体解释。
(八)、表格标签
通过语义化记忆表格标签:
表1 表格基本标签
标签 语义 说明
table table(表格) 表格
tr table row(表格行) 行
td table data cell(表格单元格) 单元格
表2 表格结构标签
标签 语义 说明
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
合并行使用td标签的rowspan属性,而合并列则用到td标签的colspan属性。
(1)、合并行
语法:
<td rowspan="跨度的行数">
(2)、合并列
语法:
<td colspan="跨度的列数">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合并单元格</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
(3)、 单元格边距(Cell padding)
就是特殊的padding
(4)、单元格间距(Cell spacing)
(九)、表单标签
HTML 表单
表单是一个包含表单元素的区域。
表单标签共有4个:<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
概念:用于采集用户输入的数据。用于和服务器进行交互
表单项元素中的一些属性
id:元素的唯一表示,不重复
name:表单项元素的名称,很重要–提交数据到服务器之后,服务器获取数据通过该名称
value:表单项元素的值,服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读,用户只能看不能改 disabled:表示禁用,该元素不能改而且背景是灰色
(1)、input标签
大部分表单都是用input标签完成的。
语法:
<input type="表单类型"/>
说明:
表1中的表单都是使用input标签,所不同的就是type属性值不同。
(2)、textarea标签
语法:
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
表现形式如下:
(3)、select和option
下拉列表由<select>标签和<option>标签配合使用。
语法:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
(4) 、按钮
有两种形式,见下图:
button标签可以与input实现的按钮相互替换
(5)、标签label
(十)、HTML框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
(1)、Iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>
(2)、Iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
(3)、使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性,如下实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<p><b>注意:</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。</p>
</body>
</html>
点击前:
点击后:
十一)陆续添加
(1)音频标签
(2) 视屏标签
(3)SEO三大标签
SEO(Search Engine Optimization):搜索引擎优化
作用:让网站在搜索引擎上的排名靠前
提升SEO的常见方法:
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化(在合适的地方使用合适的标签)
4. ……
1. title :网页标题标签
2. description :网页描述标签
3. keywords :网页关键词标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷!</title>
<meta name="description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。" />
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
</head>
<body>
</body>
</html>