学习目标:
学习内容:
HTML基础标签
//HTML框架(HTML标签对大小写不敏感,但最好用小写)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>段落</p>
</body>
</html>
//标题
<h1></h1>
....
<h6></h6>
//段落
<p></p>
//超链接
<a href="www.professional.com" target="_blank"></a>
//图像
<img src="1.png" width=" " height=" " alt=" "/>
//HTML标签常用属性
- class:为HTML元素定义一个或多个类名
- id:定义元素唯一的id
- style:规定行内样式
- title:描述元素的额外信息(作为工具条使用)
//分割内容 创建水平线
<hr>
//注释
//换行
<br>
//强调文本
<em></em>
//文本加粗
<b></b>
<strong></strong>
//斜体文本
<i></i>
//代码
<code></code>
//计算机样本
<samp></samp>
//键盘输入
<kbd></kbd>
//变量
<var></var>
//上标
<sup></sup>
//下标
<sub></sub>
//预格式文本
<pre></pre>
//地址
<address></address>
//文本缩写
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
//文字方向
<bdo dir="rtl/ltr"></bdo>
//短块引用
<q cite="www.baidu.com"></q>
//长块引用
<blockquote cite="www.baidu.com"></blockquote>
//删除字和插入字
<del></del>
<ins></ins>
//定义小号字
<small></small>
//定义作品标题
<cite></cite>
//定义项目
<dfn></dfn>
//定义本页面所有链接的默认URL
<base href=" " target="_blank">
//定义文档与外部资源的关系
<link rel="stylesheet" type="text/css" href="mystyle.css">
//元数据描述
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">
//加载样式
<style type="text/css"></style>
//加载脚本
<script></script>
//创建带有可点击区域的图像映射
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
//表格示例
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
//列表示例
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol start="" type="">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
//块级元素
<div></div>
//内联元素
<span></span>
//创建表单
<form>
<label>
<input type=" " name="">
</label>
</form>
//定义文本域
<textarea></textarea>
//对表单中的相关元素进行分组
<fieldset></fieldset>
//为fieldset元素定义标题
<legend></legend>
//创建下拉列表
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
//按钮
<button></button>
//创建一个预先定义的输入控件选项列表
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
//定于一个内联框架
<iframe></iframe>
//HTML字符实体
- 空格
- < <;
- > >
- & &
- " "
- ' '
- £ £
- ¥ ¥
- € €
- © ©
- ® ®
- ™ ™
- × ×
- ÷ ÷
学习时间:
学习产出: