初识HTML

超文本标记语言(Hyper Text Markup Language, HTML)是一种用于描述数据结构的标记语言,HTML文档是以<html>为根节点的树状结构.

元素一般是指从开始标签到结束标签之间的HTML代码, 不过有一些元素只有开始标签, 没有内容和结束标签.

<p><a href="http://www.cnblogs.com"></p>

HTML通常以序言<!DOCTYPE html>开始, 表明这是HTML文档.根元素<html>下有<head>和<body>两个子元素.

<head>元素通常用来配置标题, 脚本, CSS和元信息等.<body>标签用来描述页面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>

    <p>Hello world!</p>

</body>
</html>

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>

示例:

<table border="1">
  <caption>A Table</caption>
  <tr>
    <th>column1</th>
    <th>column2</th>
  </tr>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
  </tr>
</table>

效果:

A Table
column1	column2
(1,1)	(1,2)
(2,1)	(2,2)

列表

用于标记列表的标签有:

无序列表(Unodered List)<ul>
有序列表(Ordered List)<ol>
列表项(List Item)<li>

示例:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>
<hr>
<ol>
    <li>HTML</li>
    <li>HTML5</li>
</ol>

效果:

HTML
CSS

HTML
HTML5

HTML支持自定义多级列表:

自定义列表(Defined List)<dl>
自定义列表项<dt>
列表项定义<dd>

示例:

<dl>
    <dt>Markup</dt>
        <dd>HTML</dd>
        <dd>Json</dd>
    <dt>Program</dt>
        <dd>JavaScript</dd>
        <dd>Python</dd>
</dl>

效果:

Markup: HTML; Json
Program: JavaScript; Python

图像

<img>标签用于标记图像元素:

<img src="html5_logo.jpg" alt="img not found" width="304" height="228">

alt属性指定图片加载失败时显示的替代文本.

效果:

更多关于多媒体的内容,请参见HTML5介绍.

表单

表单元素用<form>标签标记, 用于向服务器提交数据:

表单<form>
输入框<input>
标签<label>
下拉菜单<select>
下拉选项<option>

其中input是最常用的元素,它使用type属性指定字段的类型.

文本输入框text
密码输入框password
隐藏字段hidden
单选框radio
多选框checkbox
提交按钮submit

字段与提交

示例:

<form action="/login" method="post">
    <input type="hidden" name="token" value="finley_token">
    <label>username: <input type="text" name="username"></label>
    <label>password: <input type="password" name="password"></label>
    <input type="submit" value="submit">
</form>

效果:

<form action="/login" method="post">

action属性指定表单提交目标的url, method指定提交的HTTP方法.

<input type="hidden" name="token" value="finley_token">

隐藏字段,不渲染为可视组件. name属性指定字段名, value属性指定字段值.

即表单提交时会在请求中添加"token":"finley_token"参数.

 <input type="text" name="username">

文本字段, 渲染为文本输入框. name指定字段名, 用户输入内容为字段值.

<input type="password" name="password">

密码字段,渲染为密码输入框. 其它与text相同, 若不加处理该字段使用明文提交.

<input type="submit" value="submit">

提交按钮, 渲染为按钮. 不产生字段, 当按钮被单击时表单内容将会被提交.

value属性指定按钮上显示的文字, 若不指定该属性默认显示'Submit'.

下拉菜单

示例:

 <form action="/register" method="post">
	<select name="gender">
		<option value="1">male</option>
		<option value="2">female</option>
  	</select>
</form>

效果:

select的name属性定义字段名, option的value属性定义选中该项时的字段值.

单选框

示例:

<form action="/register" method="post">
    <div>
        <label><input type="radio" name="gender" value="male">Male<label>
        <label><input type="radio" name="gender" value="female">Female<label>
    </div>
    <div>
        <label><input type="radio" name="accept" value=1>Yes<label>
        <label><input type="radio" name="accept" value=0>No<label>
    </div>
    <br><input type="submit">
</form>

效果:

同一个元素下的单选框是互斥的,被选中的单选框会添加name属性指定的字段,字段值由value属性指定;若无单选框被选中,则不会添加任何radio指定的字段.

因为单选框的互斥特性,可以将互斥的单选框指定同一个字段名.

多选框

示例:

<form action="/register" method="post">
    <label><input type="checkbox" name="js" value=1>javascript<label>
    <label><input type="checkbox" name="py" value=1>python<label>
    <label><input type="checkbox" name="java" value=1>java<label>
    <br><input type="submit">
</form>

效果:

javascript python java

复选框各元素之间不互斥, 被选中的复选框会添加name属性指定的字段,字段值由value属性指定;未被选中的复选框,则不会添加任何其指定的字段.

若想亲自查看被提交的字段,请将method改为'get',在url的参数部分就可以看到喽~

超文本链接

<a>用于标记超链接:

<a href="http://www.cnblogs.com/">cnblogs</a>

href属性用于指定目标的url.

cnblogs

target属性用于指定打开链接的方式:

_self当前框架打开, 默认
_blank 新窗口打开

<a>标签也可以在用文档中标记一个位置,称为锚点:

<a href="#top">Top</a>
<a id="top"></a>

谨慎体验,点击此链接会回到顶部:

Top

<a>与<\a>之间可以包含其它HTML元素,比如图片:

<a href="#top"><img src="top.png"></a>

css

层叠样式表(Cascading Style Sheets, CSS)用于描述HTML元素的样式.

层叠样式表有三种:

内联样式, 在元素的style属性中定义
内部样式, 在HTML文档中用<style>标签
外部样式, 在css文件中定义.

多条CSS可能描述同一个元素的样式,在选择器相同的情况下它们的覆盖顺序一般为:

内联样式>内部样式>外部样式
同一段css代码中, 后面的覆盖前面的.

内联样式:

<div style="opacity:0.5;left:50px;width:300px;height:150px;background-color:SlateGray">
</div>

内部样式:

<div id="d1"></div>
<style>
	#d1 {
    	opacity:0.5;
        left:50px;
        width:300px;
        height:150px;
        background-color:SlateGray;
    }
</style>

外部样式:

<div id="d1"></div>
<link rel="stylesheet" type="text/css" href="mystyle.css">

效果:

script

目前大多数HTML文档使用JavaScript语言编写脚本,使用<script>标签标记脚本元素.

脚本代码可以直接写在HTML文档中:

<script>
	document.write("Hello World!")
</script>

也可以通过src指向脚本源文件.使用绝对URL指向其它站点的脚本文件:

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

src可以通过相对URL指向本站点下的脚本文件:

<script type="text/javascript" src="jquery.js"></script>

posted @ 2016-08-16 19:52 -Finley- 阅读(241) 评论(0) 收藏举报

刷新页面返回顶部

Finley