一、head标签
1.作用：head标签用于保存页面的元数据
2.包含的内容：
| 1. <title>我的测试站点</title> 它可以为文档添加标题
|
1
2
3
4
5
6
7
| 2. 元数据：<meta>元素
<meta charset="utf-8"> 指定文档中字符的编码
<meta> 元素包含了name 和 content 特性：
name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。
|
1
2
3
4
5
6
7
8
| 3. 应用CSS和JavaScript
<link> 元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：<link rel="stylesheet" href="my-css-file.css">
连接外部的Css样式表
js脚本位于 <script> 与 </script> 标签之间。
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
|
二、img标签
1
2
3
4
5
6
7
8
9
| <img src="url" alt="some_text">
1. 源属性（Src）
URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
2. Alt属性
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
3. 设置图片的宽高
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
|
三、Table表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <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>
一行行排列 每行里面有td(table data)单元格 th为表头
|
四、List列表
List列表分为有序列表
无序列表
定义列表
- 有序列表
1
2
3
4
5
6
7
8
9
| <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
列表前有个圆点
Coffee
Milk
|
- 无序列表
1
2
3
4
5
6
7
8
9
| <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
1. Coffee
2. Milk
|
- 定义列表
1
2
3
4
5
6
7
8
9
10
11
12
| <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
|
五、div 和span
六、表单元素
- 表单元素
1
2
3
4
5
| <form>
.
input 元素
.
</form>
|
- 表单内部元素
文本域（Text Fields）输入框
1
2
3
4
| <form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname" type="password"> 密码暗文
</form>
|
单选按钮（Radio Buttons）
1
2
3
4
| <form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
|
复选框（Checkboxes）
1
2
3
4
| <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>
|
提交按钮(Submit Button)
1
2
3
4
5
6
7
8
9
| <input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
|
七、Css
Css的使用有三种方法：
1.内联样式在标签内部使用style属性设置标签的样式
1
| <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
|
2.内部样式表
1
2
3
4
5
6
7
8
9
10
| 在<head> 部分通过 <style>标签定义内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
|
3.外部样式表
1
2
3
| <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
|
CSS样式按照优先级排序如下：一、内联式：使用当前元素的style属性进行样式设置。只作用于当前元素，对于另一个同名的元素则不起作用。二、内嵌式：在HTML文档头部定义多个style元素，实现多个样式。三、外部引用式
八、Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| javascript代码可以写在：
1、用script标签，写在Html网页的Body部分中；
2、用script标签，写在Html网页的head部分中
3、写在后缀名为“.js”的文本文件里，并用script标签的src属性引入Html网页。
Javascript写在外部js文件中
将Javascript程序放到一个后缀名为.js的文本文件里。
在HTML里引用外部文件里的Javascript，应在Head里写一句，其中src的值，就是Javascript所在文件的文件路径。
<html>
<head>
<script src="js/001.js">...</script>
</head>
<body></body>
</html>
js脚本位于 <script> 与 </script> 标签之间。
在HTML body部分中的JavaScripts会在 页面加载 的时候被执行。通常被用来生成页面的内容
在HTML head部分中的JavaScripts会在 被调用 的时候才执行。把脚本放在head中时，可以保证脚本在任何调用之前被加载。
|