HTML学习笔记
1.基础语法
1.1.基本结构
一个html文件由一下几个部分构成
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!--头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title></title><!--标题-->
</head>
<body><!--主体-->
</body>
</html>
1.2.基本标签
段落标记
<p></p>
标题字
<h1></h1> <!--1~6-->
换行
<br>
水平线
<hr>
预留格式
<pre></pre>
字体
<b></b>
<i></i> <!-- 斜体字-->
<ins></ins> <!-- 插入字-->
<del></del>
<sup></sup> <!-- 右上角 -->
<sub></sub> <!-- 右下角 -->
<font size='3' color ='red'>
Text
</font>
1.3.实体符号
<!-- 空格 -->
> <!-- 大于 -->
< <!-- 小于 -->
1.4.表格
<table border='像素' width='像素或者百分比'
height= '像素或者百分比' align='center'>
<tr align='center'>
<td>text</td>
</tr>
<tr>
<td align='center'>
</tr>
<tr>
<th colspan='2' rowspan='2'>站两行两列的文本头</th>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
1.5.背景设置
<body bgcolor='red',background="url">
</body>
1.6.图片
<img src='url' alt="找不到图片的提示命令" title="鼠标悬浮时提示" width='xxpx' height=''/>
1.7.超链接
<a href="热链接，网络或者本地表格都可" target=_blank/_parent/_self/__top>text</a>
<a href="热链接，网络或者本地表格都可"><img .....></a>
1.8.列表
<ul type=circle/square/disc> <!-- 无序列表 -->
<li>text1</li>
<li>text2</li> <!-- 可嵌套 -->
</ul>
<ol type=.....> <!-- 有序列表 -->
<li>text1</li>
<li>text2</li> <!-- 可嵌套 -->
</ol>
2.表单
<form action='url'>
文本框:<input type='text'/><br>
密码框:<input type='password'/><br>
提交按钮:<input type='submit' value='按钮名字'/>
<!-- 有name属性的才会提交 -->
文本框:<input type='text' name=""/><br>
密码框:<input type='password name=""/><br>
</form>
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title></title><!--标题-->
</head>
<body><!--主体-->
<form action="http://localhost:8080/crm/register">
用户名: <input type="text" name="name" />
<br>
密码: <input type="password" name="password" />
<br>
性别: <input type="radio" name="sex" value="1" checked/>男 <!-- 默认选中，需要指定值来区分(name=value) -->
<input type="radio" name="sex" value-"0"/> 女<!-- name要一致 -->
兴趣: <input type= "checkbox" name="hobby" value="0" checked/>早上发病
<input type= "checkbox" name="hobby" value="1"/>中午发病
<input type= "checkbox" name="hobby" value="2"/>晚上发病
学历:<select name="diploma">
<option value="0"selected>大专</option>
<option value="1">大专</option>
<option value="2">大专</option>
</select>
<br>
发病历史
<textarea rows="10",ccols="60",name="fabin">
</textarea>
<br>
<input type="submit" value="发病"/>
<input type="reset" value="重置"/>
<!-- submit按钮不能有name -->
</form>
</body>
</html>
多选列表
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title></title><!--标题-->
</head>
<body><!--主体-->
<select name="province",siez="3",multiple>
<!-- multiple 支持多选，size为列表一次显示多少 -->
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
</select>
</body>
</html>
文件控件
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title></title><!--标题-->
</head>
<body><!--主体-->
<form action="....">
file: <input type="file" />
<br>
<input type="submit" value="..." />
</form>
</body>
</html>
hidden控件
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title></title><!--标题-->
</head>
<body><!--主体-->
<form action="....">
<!-- 隐藏域 -->
<input type="hidden" name="..." value=".." />
<!-- 界面不显示上面的提交 -->
<input type="submit" value="提交" />
</form>
</body>
</html>
disabled与readonly
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title>readonly与disabled</title><!--标题-->
</head>
<body><!--主体-->
<form action="....">
这条输入框为只读<input type="text" name="1" value="readonly" readonly/>
<br>
这条输入框无法选中<input type="text" name="2" value="disabled" disabled/>
<br>
<input type="submit" value="提交" />
<!-- disabled框不会提交数据 -->
</form>
</body>
</html>
maxlength
<!DOCTYPE html><!--HTML5的说明-->
<html><!--根-->
<head><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title>maxlength</title><!--标题-->
</head>
<body><!--主体-->
<form action="....">
<!-- 最多输入三个字符 -->
<input type="text" maxlength="3"/>
</form>
</body>
3.id属性
id属性存在任意一节点上且不能重复，用于js的调用
<!DOCTYPE html><!--HTML5的说明-->
<html id="myhtml"><!--根-->
<head id="myhead"><!-- 头-->
<meta charset="utf-8"><!-- 格式为utf-8-->
<title id= "mytitle">id属性</title><!--标题-->
</head>
<body id="mybody"><!--主体-->
<form id="myform" action="....">
</form>
</body>
</html>
4.div与span
div与span都指图层，但是div单独占用一行而span不是
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
