WEB笔记2

表格

• 元素显示模式：<div></div>独占一行 宽，高，内外边都能设置

<span></span>一行可以存在多个span 不可以设置

• 表格标签：<table border="1px" width="900px" height="400px">//只会把中间部分长宽高改变 border//边框

<caption>学生信息</caption>

<thead height="200px" align="light" valign="top">align//行位置 valign//上下位置

<tr>

<th>姓名<th>//行 <td></td>//列

<th>性别<th>

</tr>

</thead>

<tbody></tbody>//控制内容位置<td rowspan></td>//列 rowspan--跨行

<tfoot>最后一行</tfoot> <tr> <td colspan="5"></td></tr> colspan--跨列

</table>

• details:解释----><summary>详情标签</summary>

• tabindex:

表单----网页交互区，收集用户信息

/<form action="https://www.baidu.com">action--提交至百度

<input type="text" name="wd(百度要求)">

<button>提交<//button>

• 表单元素：用户名：<input type="text" name="user “value="输入内容" maxlength=" "> maxlength----最大长度

• 密码：<input type="password" name="pwd">

• 单选框

  <input type="radio" name="gander" value="nan">男

  <input type="radio" name="gander" value="nv">女

• 多选框

  <input type="checkbox" name="food">吃榴莲

  <input type="checkbox" name="food">吃臭豆腐

  <input type="checkbox" name="food">吃肥肉

• 隐藏域

  <input type="hidden" name="hid" value="输入内容">

• 确认按钮

  <input type="submit">

• 文本域

  /<textarea cols="200" rows="100" maxlength=" “>cols----列距

  </textarea>

• 下拉菜单

  /<select name="jiguan" id="">

  <opyion value="南京">南京</option>

  ...

  </select>

  selected----下拉菜单默认选中

• html的全局属性

  /<div id="one"></div>id身份证号，只能出现一次

  /<div class="pink" style="font-size:">输入内容(style---输入大小)</div>

• h5表单

css三种引入方式

css基本结构

选择器{

属性名： 属性值：

属性名： 属性值：

}

选择器

/<p> 输入内容</p>

/<div id="box1"> </div>

/<div class="box2"> </div>

• 标签选择器：

  /<style> p{

  color:

  }

</style>

• id选择器:

#box1{

color:

}

• 类选择器

  .box2{

  color:

  }

• 通配符选择器

  *{

  /*background-color：

  }

• 包含选择器

• 复合选择器

  div,

  p,

  span{

  color:red

  }

• 属性选择器

div[id]{

width:

height:

background-color:

}

type^="te"----指type值中te开头的

type*=----指type中包含的

字体的样式

• 字体大小

/<style>

div{

font-size:40px;

}

</style>

• 字体粗细

  font-weight : bold(加租)；

• 字体是否倾斜

  font-style：italic/normal;

  font-family："微软雅黑"

• 改变鼠标的样式：

  cursor：pointer；

文体外观

/<style>

p{

fond-size:20px;

fond-indent:2em; em----当前字体大小

}

</style>