HTML及常用标记
超文本标记语言(HyperText Markup Language,HTML)是一种用于创建网页的标准标记语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html> 声明为HTML5文档
<html> 元素是HTML页面的根元素
<head> 元素包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
HTML基础
HTML标题(Heading)通过<h1> - <h6>标签定义
HTML段落通过<p>标签定义
HTML链接通过<a>标签定义
HTML图像通过<img>标签定义
HTML属性
属性是HTML元素提供的附加信息
HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,如:name="value"
属性值始终在引号内
HTML文本格式化
HTML使用标签<b>("bold")与<i>("italic")对输出文本进行格式化,如:粗体 or 斜体
HTML超链接
HTML使用标签<a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,点击这些内容可以跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a>中使用了href属性来描述链接的地址。
默认情况下:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
HTML图像
在HTML中,图像由<img>标签定义。
<img src="url" alt="some_text">
src属性的值是图像的URL地址,即存储图像的位置。
alt属性用来为图像定义一串预备的可替换的文本。
HTML表格
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签<form>设置。
多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性(type)定义的。
文本域通过<input type="text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段通过标签<input type="password">定义。
<form>
Password: <input type="password" name="pwd">
</form>
<input type="radio">标签定义了表单单选框选项。
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type="checkbox">定义了复选框。用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<input type="submit">定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="action.jsp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
HTML列表框
<select>标记定义下拉列表
下拉列表
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
单选多行列表
<select size="2">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
多选多行列表
<select size="3" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
HTML布局
<div>定义文档区块,块级(block-level)
<span>组合文档中的行内元素