HTML基础
<p>段落</p>
<h1>标题,h1-h6依次减小</h1>
<br />#换行,单标签
<hr />#长横线,单标签
<div>布局,一行放一个 </div>
<span>一行可以放两个</span>
<b>加粗</b>
<i>倾斜</i>
<em>倾斜</em>
<strong>加粗</strong>
<s>删除杠</s>
<del>删除杠</del>
<u>加下划线</u>
<ins>加下划线</ins>
<div>大布局<div> <div>大布局<div>
<span>小布局<span> <span>小布局<span>
<q>引用<q>
<blockquote>长引用<blockquote>
<img src="图像的路径(url)" alt="图像不能显示时的替换文本(文本)" title="鼠标悬停时显示的内容(文本)" width="设置图像宽度(像素)" height="设置图像长度(像素)" border="设置图像边框宽度(数字)"/> 这是单标签
链接标签 <a href="跳转目标,例http://www.baidu.com(外部链接)或者 例:index.html(内部链接) 或者 例:#(没有确定链接目标时)" target="目标窗口的弹出方式,_self为默认值,新打开窗口用_blank">作品地址或者图片</a>
锚点定位<a href="#movie">定位电影</a> <h3 id="movie">电影</h3>
<base target="_blank所有跳转都是新窗口打开"/> 单标签,可以设置整体链接打开状态
20. 特殊字符标签 --- 特殊字符 --- <p>
(空格) (<) p (>)
& 和号
21.注释 <!--注释标签-->
22.相对路径
<img src="img0/img1/logo.gif相对路径" />
<img src="../wo.jpg" /><!--../表示跳出本级目录,找到wo.jpg-->
<img src="http://123p3.sogoucdn.com/imgu/2018/04/20180404144123_595.png">
<img src="D:\web\img\logo.gif" /> <!--绝对路径-->
23.<ul>无序列表标签,只能放li标签,li标签可以放所有元素
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
24.<ol>有序列表
<li>美</li>
<li>英</li>
<li>中</li>
<li>韩</li>
<li>俄罗斯</li>
</ol>
25.<dl>
<dt>北京</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dl/>
26.<table width="500(表格宽度,像素值)" height="500(表格高度,像素值)" border="10(设置表格边框,像素值,0为无边框)" cellspacing="设置单元格边框之间的空白间距(默认为2像素)" cellpadding="设置单元格内容与单元格边框之间的距离(默认为1像素)" align="设置表格在网页中的水平对齐方式(left center right)"> <caption>表格标题,caption标签必须紧跟table之后</caption>
<tr align="center"><!--行标签,表格只有行标签,没有列-->
<th>1表头</th> <!--th是表头标签-->
<th>2表头</th>
<th>3表头</th>
</tr>
<tr align="center"> <!--td是单元格标签-->
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<table/>
27.<table>
<caption>表格标题,caption标签必须紧跟table之后</caption>
</table>
28.合并单元格 跨行合并:rowspan 跨列合并:colspan
合并单元格的时候,将多余的表格删除,合并顺序为,先上后下,先左后右
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
</table>
29.label标签用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点<label >用户名<input type="text"></label>
<hr>
<label for="pwd"><!--for属性规定label与哪个表单元素绑定-->
用户名:<input type="text" name="">
密码:<input type="password" id="pwd">
</label>
30. <textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
31.下拉菜单,选择菜单
<select name="" id="">
<option value="">选择年份</option>
<option value="" selected="selected"(默认选中项)>1998</option>
<option value="">1999</option>
<option value="">2000</option>
</select>
32.input控件
<input type="text单行文本输入框;password密码输入框;radio单选按钮;checkbox复选框;button普通按钮;submit提交按钮;reset重置按钮;image图像形式的提交按钮;file文件域" name="由用户自定义 控件的名称" value="由用户自定义 input空间中的默认文本值 " size="正整数 input控件在页面中显示的宽度" checked="属性值为checked 定义选择控件默认被选中的项" maxlength="正整数 控件允许输入的最多字符数" /> input是单标签
33.表单域,即创建一个表单,以实现用户信息的收集和传递
<form action="url地址,表单收集到信息之后,需要将信息传递给服务器,此属性用于指定接收并处理表单数据的服务器程序的url地址" method="提交方式 get或者post" name="表单名称"></form>
<form action="demo.php" method="post">
用户名: <input type="text" name="yonghuming" value="用户名"> <br /> <br />
密 码: <input type="password" name="mima1"><br /> <br />
密 码: <input type="password" name="mima2"><br /> <br />
性别: <input type="radio" name="sex">
<input type="submit" value="提交所填">
<input type="reset" value="重新填写">
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>世纪佳缘-你在我也在</title>
</head>
<body>
<table width="600" align="center" cellspacing="0" cellpadding="0">
<tr height="60">
<th colspan="2">
青春不常在,抓紧谈恋爱
</th>
</tr>
<tr height="40">
<td>性别</td>
<td>
<input type="radio" name="sex" id=""> <img src="images/man.jpg" alt=""> 男
<input type="radio" name="sex" id=""><img src="images/women.jpg" alt=""> 女
</td>
</tr>
<tr height="40">
<td>生日</td>
<td>
<select name="" id="">
<option value="">请选择年</option>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992年</option>
</select>
<select name="" id="">
<option value="">请选择月</option>
<option value="">1月</option>
<option value="">2月</option>
<option value="">3月</option>
</select>
<select name="" id="">
<option value="">请选择日</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</td>
</tr>
<tr height="40">
<td>所在地区</td>
<td>
<input type="text" value="北京">
</td>
</tr>
<tr height="40">
<td>婚姻状况</td>
<td>
<input type="radio" name="merry"> 未婚
<input type="radio" name="merry"> 离婚
<input type="radio" name="merry"> 丧偶
</td>
</tr>
<tr height="40">
<td>学历</td>
<td>
<input type="text" value="小学">
</td>
</tr>
<tr height="40">
<td>月薪</td>
<td>
<input type="text" value="5000-10000">
</td>
</tr>
<tr height="40">
<td>手机号</td>
<td>
<input type="text">
</td>
</tr>
<tr height="40">
<td>昵称</td>
<td>
<input type="text">
</td>
</tr>
<tr height="40">
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="merry"> 妩媚
<input type="checkbox" name="merry"> 柔美
<input type="checkbox" name="merry"> 可爱
<input type="checkbox" name="merry"> 小鲜肉
<input type="checkbox" name="merry"> 型男
<input type="checkbox" name="merry"> 气质
</td>
</tr>
<tr height="40">
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="50" rows="10"></textarea>
</td>
</tr>
<tr height="60">
<td></td>
<td>
<input type="image" src="images/btn.png">
</td>
</tr>
<tr height="60">
<td></td>
<td>
<input type="checkbox" checked="checked">
<a href="# "></a>我同意注册条款和会员加入标准</a>
</td>
</tr>
<tr height="40">
<td></td>
<td>
<a href="login.html" target="_blank">我是会员,立即登录</a>
</td>
</tr>
<tr height="40">
<td></td>
<td>
<h3> 我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>