第2章 HTML 和CSS网页开发基础
2.1HTML标记语言
2.1.1创建第一个HTML文件
示例代码
<html>
<head>
<title>
HTML页面
</title>
</head>
<body>
<b>
应用记事本编写HTML代码
</b>
</body>
<html/>
2.1.2 HTML文档结构
1.<html>标记
<html>标记是html文件的开头，所有html文件都是以<html>标记开头，以</html>标记结束。html页面的所有标记都要放在
<html>和</html>标记中
2.<head>标记
<head>标记是HTML文件的头标记，作用是放置html文件的信息。如css样式代码可放置在<head>与</head>标记中
3.<title>标记
<title>标记为标题标记。可将网页的标题定义在<title>与</title>中
4.<body>标记
<body>标记是html页面的主题标记。页面中所有内容都定义在<body>中
2.1.3 HTML常用标记
1.换行标记<br>
要让网页中的文字实现换行，在html语言中，需要使用<br>标记，与其他标记不同<br>不是成对出现的
示例代码
<html>
<head>
<title>
HTML页面
</title>
</head>
<body>
<b>
静夜思
</b><br>
床前明月光，疑似地上霜。<br>
举头望明月，低头思故乡。
</body>
<html/>
2.段落标记</p>
段落标记是html中很重要的一个标记，段落标记以<p>标记开头，以</p>标记结束，段落标记在段前和段后各添加一个空行，而
定义在段落标记中的内容，不受该标记影响。
3.标题标记
在html标记中，设定6个标题标记，分别是<h1>至<h6>，数字越小，表示级别越高，文字的字体也就越大
<h1></h1>-
<h2> </h2>
... -
<h6></h6>
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
4.居中标记 </center>
html默认的布局方式是从左到右依次排序。如果要想让页面中的内容在页面的居中位置显示，可以使用html中的<center>标记，<center>标记以<center>标记开头，以</center>标记结尾，标记中的内容居中显示
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<center>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</center>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
5.文字列表标记
- HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
- HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。
列表项使用数字来标记。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
2.1.4 表格标记
HTML表格标签
| 标签 | 描述 |
|---|---|
<table> |
定义表格 |
<th> |
定义表格的表头 |
<tr> |
定义表格的行 |
<td> |
定义表格单元 |
<caption> |
定义表格标题 |
<colgroup> |
定义表格列的组 |
<col> |
定义用于表格列的属性 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
代码示例
<html>
<head>
<title>
HTML页面
</title>
</head>
<body>
<table border="1" border="1" align="center" >
<caption>成绩单</caption>
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>78</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>60</td>
<td>88</td>
<td>98</td>
</tr>
</table>
</body>
<html/>
2.1.5 表单标记
1.<form>...</form>表单标记
标签定义及使用说明
<form>标签用于创建供用户输入的 HTML 表单。
<form> 元素包含一个或多个如下的表单元素：
<input><textarea><button><select><option><optgroup><fieldset>-
<label>
<form>标记的基本语法
<form action="url" method="get"|"post" name="name" onSubmit=" target="">
</form>
- action属性，该属性用来指定处理表单数据程序的URL地址
- method属性，该属性用来指定数据传送到服务器的方式，分别为get和post
- name属性，该属性指定表单的名称，值为自定义
- onSubmit属性，该属性用于指定用户单击提交按钮触发的事件
- target属性，该属性指定输入数据结果显示在哪个窗口中，其属性值可以设置为biank、self、parent和top
target属性
| 值 | 描述 |
|---|---|
| _blank | 在新窗口/选项卡中打开。 |
| _self | 在同一框架中打开。（默认） |
| _parent | 在父框架中打开。 |
| _top | 在整个窗口中打开。 |
| framename | 在指定的 iframe 中打开。 |
2.<input>表单输入标记
表单输入标记是使用最频繁的表单标记
<input>标记的属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept | ·audio/* video/* image/* MIME_type` | 规定通过文件上传来提交的文件的类型。 (只针对type="file") |
| align | left right top middle bottom | HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image") |
| alt | text | 定义图像输入的替代文本。 (只针对type="image") |
| autocomplete | on off | autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。 |
| autofocus | autofocus | 属性规定当页面加载时 <input> 元素应该自动获得焦点。 |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
| disabled | disabled | disabled 属性规定应该禁用的 <input> 元素。 |
| form | form_id | form 属性规定 <input> 元素所属的一个或多个表单。 |
| formaction | URL | 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image") |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。 |
| formmethod | get post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image") |
| formnovalidate | formnovalidate | formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。 |
| formtarget | _blank _self _parent _top framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image") |
| height | pixels | 规定 <input>元素的高度。(只针对type="image") |
| list | datalist_id | 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。 |
| max | number date | 属性规定 <input> 元素的最大值。 |
| maxlength | number | 属性规定 <input> 元素中允许的最大字符数。 |
| min | number date | 属性规定 <input>元素的最小值。 |
| multiple | multiple | 属性规定允许用户输入到 <input> 元素的多个值。 |
| name | text | name 属性规定 <input> 元素的名称。 |
| pattern | regexp multiple | pattern 属性规定用于验证 <input> 元素的值的正则表达式。 |
| placeholder | text | placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| required | required | 属性规定必需在提交表单之前填写输入字段。 |
| size | number | size 属性规定以字符数计的 <input> 元素的可见宽度。 |
| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image") |
| step | number | step 属性规定 <input> 元素的合法数字间隔。 |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range <>reset search submit<>tel text <>time url week |
type 属性规定要显示的<input> 元素的类型。 |
| value | text | 指定 <input> 元素 value 的值。 |
| width | pixels | width 属性规定 <input> 元素的宽度。 (只针对type="image") |
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>
</body>
</html>
3.<select>...</select>下拉列表框标记
标签定义及使用说明
<select>标签用来创建下拉列表。<select> 元素中的 <option> 标签定义了列表中的可用选项。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 规定在页面加载时下拉列表自动获得焦点。 |
| disabled | disabled | 当该属性为 true 时，会禁用下拉列表。 |
| form | form_id | 定义 select 字段所属的一个或多个表单。 |
| multiple | multiple | 当该属性为 true 时，可选择多个选项。 |
| name | text | 定义下拉列表的名称。 |
| required | required | 规定用户在提交表单前必须选择一个下拉列表中的选项。 |
| size | number | 规定下拉列表中可见选项的数目。 |
4.<textarea>多行文本标记
标签定义及使用说明
标签定义及使用说明
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
</body>
</html>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 规定当页面加载时，文本区域自动获得焦点。 |
| cols | number | 规定文本区域内可见的宽度。 |
| disabled | disabled | 规定禁用文本区域。 |
| form | form_id | 定义文本区域所属的一个或多个表单。 |
| maxlength | number | 规定文本区域允许的最大字符数。 |
| name | text | 规定文本区域的名称。 |
| placeholder | text | 规定一个简短的提示，描述文本区域期望的输入值。 |
| readonly | readonly | 规定文本区域为只读。 |
| required | required | 规定文本区域是必需的/必填的。 |
| rows | number | 规定文本区域内可见的行数。 |
| wrap | hard soft |
规定当提交表单时，文本区域中的文本应该怎样换行。 |
