博主从W3school学习时的记录
标签
标题标签
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
段落标签
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
链接标签
<a href="http://www.w3school.com.cn">This is a link</a>
href为属性,=后面是链接地址
图片标签
<img src="w3school.jpg" width="104" height="142" />
scr后面是图片路径再后面是属性长度宽度等属性
HTML元素
- 是指从开始标签到结束标签的所有代码
元素简介
<p>标签:定义了一个段落<body>标签:定义了HTML文档的主体HTML标签:定义了整个HTML文档- 空的HTML标签:没有元素的HTML标签
- 最好使用小写标签
HTML属性
- 属性为HTML标签提供附加的信息
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>
有关属性的例子
<h1 align="center">This is heading 1</h1> 这是居中的标题 align属性
<body bgcolor="yellow"></body>改变了背景的颜色 bgcolor属性
<table> 定义 HTML 表格
<table border="1"> 拥有关于表格边框的附加信息。
标签汇总
<h1> - <h6>的标题标签
<hr /> 标签在 HTML 页面中创建水平线。(空元素标签)
<!-- This is a comment -->注释标签
段落是通过 <p> 标签定义的。
<br />换行标签 又是一个空元素标签
styl属性用来改变HTML的样式
- 样式的内容具体为CSS
还有一些不再使用的标签和属性,已被淘汰 可以用样式来代替
文本格式化标签
- 即可以改变文本格式的标签
链接
<a href="url">Link text</a>
<a href="http://www.w3school.com.cn/">Visit W3School</a>
HTML 链接 - target 属性
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
链接中的target属性若设置为_blank则会在新的页面打开链接
HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
图像标签
<img src="url" />
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
表格
表格
表格由
| 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
<table border="1">
<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>
在浏览器显示如下：
表格属性
- border属性
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
效果如下
- 表格的表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>
- 占位符 
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- Coffee
- Milk
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- Coffee
- Milk
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<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
文件路径的描述
头部元素
<head> </head>
<html>
<head>
<title>文章标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
<!-- meta标签来描述文档-->
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> #一个重定向的meta属性
<base target="_blank" /> #表示所有的链接都将在新的页面显示
</head>
<body>
</body>
</html>
文档声明
表单
实例
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
下面是 <form> 属性的列表：
属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
表单元素
<input> 元素
最重要的表单元素是 <input> 元素。
<input> 元素根据不同的 type 属性，可以变化为多种形态。
<select> 元素（下拉列表）
<select> 元素定义下拉列表：
实例
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
您能够通过添加 selected 属性来定义预定义选项。
实例
<option value="fiat" selected>Fiat</option>
<button> 元素
<button> 元素定义可点击的按钮：
实例
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
input的属性
<input type="text">
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="radio"> 定义单选按钮。
实例
<form>
<input type="radio" name="sex" value="male" checked>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="button> 定义按钮。
实例
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
value 属性规定输入字段的初始值：
