prepare HTML file
<!DOCTYPE HTML>
<html>
</html>
The head
metadata元数据：用来描述数据的数据。
Page title
<!DOCTYPE html>, the declaration specifying the version of HTML for the browser.
The <html> tags that enclose all of your HTML code.
The <head> tag that contains the metadata of a webpage, such as its <title>.
Linking to other web page
anchor <a>
<href>stands for hyperlink reference and is used to link to a path, or the address to where a file is located (whether it is on your computer or another location). <href> often are URLs
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>
Opening links in a new window
<a> element's targetattribute.
target atrribute has the _blank value
Linking to relative page
When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored.
<a href="">content</a>
<a>标签还有一个作用是可以链接Email地址，使用mailto做许多事情。
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“？”开头，后面的参数每一个都以“&”分隔。
Links at will
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="A red prickly pear fruit"/></a>
Linking to Same Page
<p id="top">This is the top of the page!</p>
<h1 id="bottom">This is the bottom! </h1>
<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol>
HTML与CSS的关系
- HTML是网页内容的载体。
- CSS样式是表现。
- JavaScript是用来实现网页上的特效效果。
<span>标签
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
span{
}
空格
<hr>水平横线
<address>标签
<code>标签
<code>代码语言</code>
如果是多行代码，可以使用<pre>标签。
<pre>标签
主要作用：预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符。
table标签
创建表格的四个元素：
table、tbody、tr、th、td
-
<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 -
<tbody>…</tbody>：如果不加<thead><tbody><tfooter>, table表格加载完后才显示。加上这些表格结构，tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table可以按结构一块块的显示，不在等整个表格加载完后显示。） -
<tr>…</tr>：表格的一行，所以有几对tr表格就有几行。 -
<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 -
<th>…</th>：表格的头部的一个单元格，表格表头。 - 表格中列的个数，取决于一行中数据单元格的个数。
表格的标题和摘要
<caption></caption>
表单
<from method="post" action="save.php">
<label for="username">用户名：</label>
<input type="text" name="username"/>
<label for "pass">密码：</label>
<input type="password" name="pass"/>
</form>
action:浏览者输入的数据被传送到的地方，比如一个php也页面。
method：数据传送的方式（get/post）
文本输入框、密码输入框
<form>
<input type="text/password" name="名称" value="文本 /">
</form>
type:为"text"时，输入框为文本输入框；为 "password"时，输入框为密码输入框。
name：为文本框命名，以备后台程序ASP、PHP使用。
value：为文本输入框设置默认值。（一般起提示作用）
文本域
<textarea rows="行数" cols="列数">文本</textarea>
单选框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
下拉列表
option
selected="selected"
设置selected属性，则该选项就被默认选中。
<option value="购物" selected="selected">购物</option>
下拉列表的多选：<select>添加mutiple="mutiple"属性。
网友评论