在某网课学习前端笔记整理html篇

在某网课学习前端笔记整理html篇

• 列表
  1.ul li:无序列表

  <ul>
    <li>a</li>
    <li>b</li>
  </ul>
  

  2.ol li:有序列表

  <ol>
    <li>1</li>
    <li>2</li>
  </ol>
  

  3.dl dt di:带标题的无序列表

  <dl>
    <dt>小说</dt>
    <dd>凡人修仙传</dd>
    <dd>斗破苍穹</dd>
  </dl>
  

  4.table thead tbody captain tfoot tr th td:

  <table cellspacing='0' border='1'>
    <captain>aa</captain>
    <thead></thead>
    <tbody>
    	<tr>
      	<th>bbb</th>
        	<td rowspan='2' colspan='2'>ccc</td>
      </tr>
    </tbody>
    <tfoot>
    </tfoot>
  </table>
  

• 窗体
  iframe :src指向该小界面的来源。

  <iframe src='xxx.html'></iframe>
  

  百分比宽高设置元素是相对父级元素，html默认高度为0。

表单

• 表单（form）是一个包含表单元素的一个html标签，用于向服务器一次性提交很多个数据。

• 表单事例：

  <form>
    <p>
      <label>用户名：</label><input type="text">
      <label>密码：</label><input >
    </p>
  </form>
  

表单元素

input标签常用类型：

• password

• button

• checkbox

• radio

• file

• hidden

• reset

• submit

• color

• date

  placeholder，contenteditable注意。

<form action="" method="post">
		<h1 class="title">啦啦啦</h1>
		<p>
			<label>姓名：</label>
			<input type="text" name="name" placeholder="请输入姓名">
		</p><br>
		<p>
			<label>年龄：</label>
			<input type="text" name="name" placeholder="请输入年龄">
		</p><br>
		<p>
			<label>电话：</label>
			<input type="text" name="name" placeholder="请输入电话">
		</p><br>
		<p>
			<label>邮箱：</label>
			<input type="text" name="name" placeholder="请输入邮箱">
		</p><br>
		<p>
			<label>性别：</label>
			<label>男<input type="radio" name="sex" checked></label>
			<label>女<input type="radio" name="sex"></label>
		</p><br>
		<p>
			<label>爱好：</label>
			<input type="checkbox" name="" id="basketball"><label for="basketball">打篮球</label>
			<input type="checkbox" name="" id="sleep"><label for="sleep">睡觉</label>
			<input type="checkbox" name="" id="read"><label for="read">看小说</label>
			<input type="checkbox" name="" id="game"><label for="game">打游戏</label>
		</p><br>
		<p>
			<label>地址：</label>
			<select name="">
				<option value="0">请选择省</option>
				<option>上海</option>
				<option>北京</option>
				<option>深圳</option>
			</select>
			<select>
				<option value="0">请选择县，市</option>
				<option>无为县</option>
				<option>浦东新区</option>
				<option>铜陵</option>
			</select>
			<input  type="text" name="" placeholder="请写入详细地址">
		</p><br>
		<p>
			<label>备注：</label><br>
		</p>
		<div contenteditable="true" class="bigtext"></div><br>
		<p class="p1">
			<span class="btn_span">
				<input type="reset" name="" value="重置" class="reset">
				<input type="submit" name="" value="提交">
			</span>
		</p><br>
		
	</form>