HTML 学习笔记
一、页面结构
所有页面的初始化结构如下,缺一不可,写所有页面都从这段代码开始:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE>定义文档类型
<html>定义一个html文档,是html文档的根节点。
<br>换行标签<hr>分隔线标签<!-- -->注释标签
<head>是html文档本身信息,与用户所见内容无关的内容在此定义(<body>才是用户所见到的内容)。
<meta>定义html文档原信息。
不要使用格式化标签来定义内容样式,请用css来定义内容样式。
二、表单相关
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="/" method="post" name="" target="_blank">
<p>
<label for="yourrealname">姓名</label>
<input id="yourrealname" type="text" name="yourrealname">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>
表单是用来进行数据交互的。
form表单,所有其他表单元素都需包含在该元素之内。
常用form属性:
action(url) 定义数据提交到哪
method(get/post) 定义数据的发送的方式
name(text) 表单名字
target( _blank/_self/_parent/_top) 提交数据完成后跳转方式
form 中的target属性表示表单提交成功后页面跳转到哪个地方。
常用input属性:
checked checked type="radio/checkbox"时
disabled disabled 不可用,表单提交时也不提交数据
readonly readonly 只读,表单提交时数据提交
size number
maxlength number
value text 不设置的话,输入的是什么value就是什么,也可以默认设置一个value
placeholder text
input 的size和maxlength分别代表框的长度和可输入字符串的长度
input/select/textarea都有的属性:name 和 value 表示表单提交数据的字段名和字段值,即key/value
原来disabled/checked/readonly是属性名和属性值相同的情况可以只写属性名的情况
常用input type属性值:
text/radio/checkbox/password/hidden/file(最常用的就这6种,都是input类型)
三、表格
表格元素:
<table>
<thead>
<colgroup><col style="background:green"></colgroup>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<col>在<colgroup>中定义,用于设置每一列列列的属性。
四、其他
常用图片元素:
<img>:<img src="img.png" alt="图片"/>
<canvas>:h5标签,使用js在上面画画。
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="f00";
ctx.fillRect(0,0,40,50);
</script>
ul>li
ol>li
dl>dt+dd
常用全局属性:
class、id(一张页面id惟一)、style
title(给元素指定扩展信息,鼠标hover到元素时才可见)
data-*(用于存储元素的私有数据)