HTML简单回顾

HTML（笔记）

一、布局

​ 常使用

或者 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

<!--确定布局整体宽度-->
<div id="container" style="width:1000px">

    <!--顶部导航栏-->
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">顶部导航栏</h1></div>

    <!--左侧菜单栏-->
    <div id="menu" style="background-color:#FFD700;height:600px;width:100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript</div>

    <!--主要内容-->
    <div id="content" style="background-color:#EEEEEE;height:600px;width:900px;float:left;">
        内容在这里</div>

    <!--底部栏-->
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        底部栏</div>

</div>

二、表格

• 表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

border="1":有边框
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

三、表单

1、介绍

​ 收集客户端用户输入的信息，可以通过submit按钮提交到服务器。

2、表单标记

• 是一个区域，没有内容的表单不显示。

<form>
    input。。。
</form>

• 属性

  <form action＝"url" method=get|post name="myform" target="_blank">
      
      action:数据提交的地址
      method：提交的方式
      		get：会在浏览器地址栏显示提交的数据
      		post：不会在浏览器地址栏显示提交的数据，比较安全
      name：提交必须要有name
      target="_blank"：创建新的网页
      
  </form>
  

3、写入标记input

• 文本框(常用)

  <form>
      <input type="text" value="提交的数据" name="n1">普通的文本形式
  	<input type="password" value="提交的数据" name="n2">密码格式，黑点
  	<input type="email" value="提交的数据" name="n3">邮件格式，能够判断输入的邮箱格式
  </form>
  

• 按钮

  <form>
      <input type="button"> 普通按钮
  	<input type="SUBMIT"> 提交按钮
  	<input type="RESET">  重置按钮
  </form>
  

• 复选框

  <form>
  	<input type="checkbox" name="c1" value="LOL">LOL<br>
  	<input type="checkbox" name="c2" value="CSGO">CSGO
  </form>
  

• 单选框

  name必须一样
  <form>
      <input type="RADIO" name="r1">lol
      <input type="RADIO" name="r1">csgo
  </form>
  

4、下拉框

• 单选下拉框

  value：传到服务器
  <form action="">
  	<select name="games">
  		<option value="lol">英雄联盟</option>
  		<option value="csgo">反恐精英</option>
  		<option value="pubg">绝地求生</option>
  		<option value="dnf">地下城</option>
  	</select>
  </form>
  

• 多选下拉框

  value：传到服务器
  multiple="multiple"：ctrl+单机多选
  <form action="">
  	<select name="games" multiple="multiple">
  		<option value="lol">英雄联盟</option>
  		<option value="csgo">反恐精英</option>
  		<option value="pubg">绝地求生</option>
  		<option value="dnf">地下城</option>
  	</select>
  </form>
  

5、多行文本框

clos:宽度
rows：高度
<form>
    <textarea name="yj" clos="20" rows="5">
	请将意见输入此区域
	</textarea>
</form>   

四、CSS

1、使用方式

• 内联样式- 在HTML元素中使用style属性；
• 内部样式表 -在HTML文档头部 区域使用