初识HTML
超文本标记语言(Hyper Text Markup Language, HTML)是一种用于描述数据结构的标记语言,HTML文档是以<html>为根节点的树状结构.
元素一般是指从开始标签到结束标签之间的HTML代码, 不过有一些元素只有开始标签, 没有内容和结束标签.
HTML通常以序言<!DOCTYPE html>开始, 表明这是HTML文档.根元素<html>下有<head>和<body>两个子元素.
<head>元素通常用来配置标题, 脚本, CSS和元信息等.<body>标签用来描述页面.
Hello world!
head
可以添加到<head>下的标签包括:
-
<title>标题 -
<meta>元信息 -
<link>链接到外部资源 -
<script>脚本 -
<style>样式表 -
<base>默认链接
这里只介绍<meta>元素, 其它元素留在下文介绍.
<meta>元素用于维护元信息, 元信息是指描述HTML文档自身属性的信息, 比如作者, 字符集等:
-
文档字符集
<meta charset="utf-8"> -
作者
<meta name="author" content="finley"> -
文档描述
<meta name="description" content=""> -
文档关键字
<meta name="keywords" content="HTML, HTML5">, 用于搜索引擎 -
自动刷新
<meta http-equiv="refresh" content="30">, 每30s自动刷新
body
<body>标签标记的元素用于描述HTML页面的内容, 其可以包含的元素非常多
-
段落
<p></p> -
加粗文字
<b></b> -
斜体文字
<i></i> -
水平分割线
<hr> -
换行
<br> -
各级标题
<h1>-<h6> -
区块
<div>, 常做布局容器,与CSS搭配可以实现丰富的效果 -
按钮
<button>
表格
用于标记表格元素的标签有:
-
表格
<table> -
表头(Table Header)
<th> -
行(Table Row)
<tr> -
单元格(Table Data)
<td>
示例:
| column1 | column2 |
|---|---|
| (1,1) | (1,2) |
| (2,1) | (2,2) |
效果:
| column1 | column2 |
|---|---|
| (1,1) | (1,2) |
| (2,1) | (2,2) |
列表
用于标记列表的标签有:
-
无序列表(Unodered List)
<ul> -
有序列表(Ordered List)
<ol> -
列表项(List Item)
<li>
示例:
- HTML
- CSS
- HTML
- HTML5
效果:
- HTML
- CSS
- HTML
- HTML5
HTML支持自定义多级列表:
-
自定义列表(Defined List)
<dl> -
自定义列表项
<dt> -
列表项定义
<dd>
示例:
- Markup
- HTML
- Json
- Program
- JavaScript
- Python
效果:
- Markup
- HTML
- Json
- Program
- JavaScript
- Python
图像
<img>标签用于标记图像元素:
alt属性指定图片加载失败时显示的替代文本.
效果:
更多关于多媒体的内容,请参见HTML5介绍.
表单
表单元素用<form>标签标记, 用于向服务器提交数据:
-
表单
<form> -
输入框
<input> -
标签
<label> -
下拉菜单
<select> -
下拉选项
<option>
其中input是最常用的元素,它使用type属性指定字段的类型.
-
文本输入框
text -
密码输入框
password -
隐藏字段
hidden -
单选框
radio -
多选框
checkbox -
提交按钮
submit
字段与提交
示例:
效果:
效果:
select的name属性定义字段名, option的value属性定义选中该项时的字段值.
单选框
示例:
效果:
同一个元素下的单选框是互斥的,被选中的单选框会添加name属性指定的字段,字段值由value属性指定;若无单选框被选中,则不会添加任何radio指定的字段.
因为单选框的互斥特性,可以将互斥的单选框指定同一个字段名.
多选框
示例:
href属性用于指定目标的url.
target属性用于指定打开链接的方式:
-
_self当前框架打开, 默认 -
_blank新窗口打开
<a>标签也可以在用文档中标记一个位置,称为锚点:
谨慎体验,点击此链接会回到顶部:
<a>与<\a>之间可以包含其它HTML元素,比如图片:
css
层叠样式表(Cascading Style Sheets, CSS)用于描述HTML元素的样式.
层叠样式表有三种:
-
内联样式, 在元素的style属性中定义
-
内部样式, 在HTML文档中用
<style>标签 -
外部样式, 在css文件中定义.
多条CSS可能描述同一个元素的样式,在选择器相同的情况下它们的覆盖顺序一般为:
-
内联样式>内部样式>外部样式
-
同一段css代码中, 后面的覆盖前面的.
内联样式:
内部样式:
外部样式:
效果:
script
目前大多数HTML文档使用JavaScript语言编写脚本,使用<script>标签标记脚本元素.
脚本代码可以直接写在HTML文档中:
也可以通过src指向脚本源文件.使用绝对URL指向其它站点的脚本文件:
src可以通过相对URL指向本站点下的脚本文件:
浙公网安备 33010602011771号