web前端（第二天）

元素
显示模式：

块元素：独占一行 div 宽、高、内外边距可以设置

**行内元素：**一行可以存在多个 span 宽、高、内外边距不能设置

行内块元素：一行可以存在一个或多个 宽、高、内外边距可以设置

例：<div>我是一个包子</div>
  <span>我是span</span>
  <ul>
    <li>我是li</li>
  </ul>

标签
表格标签：
caption ：表示表头(该标签所以属性只能通过css更改)

使用说明：

当元素是的父元素，caption 是
元素的唯一后代的时候，使用
元素替代 caption 元素。

例：<caption>学生信息</caption>

th：表示行的内容，且表示的字体会加粗（一般用于表格第一行）定义表格内的表头单元格。这部分特征是由scope 和 headers属性准确定义的。

td：单元格，定义了一个包含数据的表格单元格

例：
<tr>
    <th>姓名</th> 
</tr>
<tr>
    <td>张三</td>
</tr>

thead：定义了一组定义表格的列头的行。

元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。
tbody HTML 元素封装了一系列表格的行（tr 元素），代表了它们是表格（table）主要内容的组成部分。

tfoot 定义了一组表格中各列的汇总行。

tr：定义表格中的行。同一行可同时出现td 和th 元素。

属性：
table border ：表格边框（只控制最外围大小）宽度；

**width：**改变表格的整体宽度；

height（tbody 值是底线，只高不低）：改变表格的整体高度；

cellspacing ：单元格与单元格之间的距离大小

align：元素在表格中的（水平）位置（“middle”：表示居中；“right”:表示靠右；默认是靠左）

valign：元素在表格中的（竖直）位置（“middle”：表示居中；“right”:表示靠右；默认是靠左）

合并：
跨行：td rowspan

例：<td rowspan="2">张三</td>

跨列：td colspan

例：<td colspan="5">共计：4人</td>

details ：详情标签 配合summary使用

例：<details>
    <summary>有志青年</summary>
    你真厉害
  </details>

tabindex：让原本不能通过tab获取焦点的元素可以被获取,值可以为负数、零、正数

例：
  <input type="text">
  <a href="http:www.baidu.com">去百度</a>
  <div tabindex="1">我是第一个盒子</div>
  <div tabindex="2">我是第二个盒子</div>
  <div tabindex="3">我是第三个盒子</div>
  <div tabindex="4">我是第四个盒子</div>
  <div tabindex="5">我是第五个盒子</div>

表单
表单的基础结构
表单：网页交互区，收集用户信息

action:将数据交给谁处理，#表示提交到当前页面

name：必有属性

method：表明提交方式

wd：百度要求的name

name：函数的 name 属性可用于在调试工具或错误消息中标识该函数。它对语言本身没有任何意义。必有属性

例：表示将提交的数据交给百度处理
<form action="https://www.baidu.com/s" method="get/post">
    <input type="text" name="wd">
    <button>提交</button>
  </form>

常见的表单元素
type ：表示类型

type的属性值：

```css
text----表示---->文本
password------表示---->密码
radio ----表示----> 单选
checkbox  ----表示----> 多选
hidden   ----表示----> 隐藏域
submit  ----表示----> 确认按钮
reset  ----表示----> 重置按钮
button  ----表示----> 普通按钮

maxlength ： 表示文本内容的最大长度

placeholder ： 在文本框内显示提醒的内容

id：全局属性定义了一个全文档唯一的标识符（ID）。它用于在链接（使用片段）、脚本和样式（通过CSS）中辨识元素。

value ：文本框中的默认值

label标签：label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

概念：

label 标签为 input 元素定义标注（标签）。

作用：

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面。

```css
例：
文本框：
    用户名：<input type="text" name="user" value="aaa" maxlength="6" placeholder="请输入用户名："><br />
密码框：
    密&emsp;码：<input type="password" name="pwd" placeholder="请输入密码："><br />
单选框：
    <input type="radio" name="gander" value="nan">男
    <input type="radio" name="gander" value="nv">女<br />
多选框：checked  默认选中
    <input type="checkbox" name="food" id="pingguo"><label for="pingguo">吃苹果</label>
    <label for="liulian"><input type="checkbox" name="food" id="liulian">吃榴莲</label>
    <input type="checkbox" name="food" id="xigua"><label for="xigua">吃西瓜</label>
    <input type="checkbox" name="food" id="darou" checked><label for="darou">吃大肉</label><br />
隐藏域 ：
    <input type="hidden" name="hid" value="时光机的飒飒">
确认按钮：（两种表现形式）
    <input type="submit"><br />
	或<button type="submit"></button>
重置按钮：
    <input type="reset">
普通按钮：（无任何效果）
    <input type="button"><br />

cols：文本域宽

rows：文本域高

**文本域：

</textarea><br />

下拉菜单：


南京
成都
西安
**

html的全局属性
id：身份证号，在一个页面中只能出现一次

class ： 一类，可以出现多个—class 的值是一个以空格分隔的元素的类名（classes）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或 DOM 方法 (document.getElementsByClassName) 来选择和访问特定的元素。

accesskey ： 设置快捷键–提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符。

data-* ：自定义属性 —是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML与 DOM表现之间进行专有数据的交换。

style ：包含应用到元素的 CSS样式声明。要注意样式最好定义在单独的文件中。这个属性以及

html5语义标签
head： 规定了文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

body：文档主体元素，表示文档的内容

nav：表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

footer：表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

h5表单
：用来让用户输入和编辑 URL。

：能够让用户输入或编辑一个电子邮箱地址。

：用于让用户输入和编辑电话号码。不同于和，在提交表单之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。

：旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。

：会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。

同样还有很多的类型，可以通过HTML（超文本标记语言） | MDN (mozilla.org)网站查询。

CSS
background-color：css属性中的 background-color 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。

css的三种引入方式：

1，外部样式（推荐）

先要在当前文件外建立一个以.css结尾的文件，并完成配置。

<link rel="stylesheet" href="建立的外部文件">

2，内部样式：

通过style对相应数据进行配置。

<head>
<style>
    .box1{
      width: 300px;
      height: 200px;
      background-color: pink;
    }
  </style>
  </head>
<body>
  <div class="box1">我是box1</div>
</body>

3，行内样式（不推荐）

<body>
  <div style="width: 300px;height: 300px;background-color: gray;"></div>
  <div class="box2">我是box2</div>
</body>

选择器
基础选择器
标签选择器 p:选中所有的p标签

  p{
   color: rgb(30, 200, 206);
  }

id选择器–#开头 根据标签中的id进行选择

  #box1{
   color: rgb(168, 29, 52);
   }

类选择器—"."开头

  .box2{
   color: blueviolet;
  }

通配符选择器— 选中所有的标签

  *{
   background-color: pink;
  }

包含选择器
子代选择器—选中亲生儿子

  .a>li{
   background-color: pink;
  }

后代选择器—找到后代中所有要找的元素

 .a li{
   background-color: pink;
  }

复合选择器

选择存在的所有属性
div,p,span{
      color: pink;
    }
 ==>等同于：
 	   div {
            color: pink;
        }
        p {
            color: pink;
        }
        span {
            color: pink;
        } 

属性选择器

<style>
    /*type^="te"以te开头*/
    input[type^="te"]{
      background-color: yellow;
    }
    /*type$="l"  type值中以l结尾的值*/
    input[type$="l"]{
      background-color: green;
    }
    /*type*="e"  type值里含有e的值*/
    input[type*="e"]{
      background-color: blanchedalmond;
    }
  </style>

<style>
  div{
      /*将鼠标形状进行转换，转换成手形*/
      cursor: pointer;
      /*字体大小--用像素px做单位*/
      font-size: 40px;
      /*字体粗细  bold：加粗*/
      /* font-weight: bold; */
      /* font-weight: 800; */
      /* 数值：100~~900（一般情况下）   400==normal（正常,默认情况）   800==bold（加粗）  从小到大越来越粗*/
      /* font-weight: 400; */
      /* 字体是否倾斜---默认是normal*/
      /* font-style: italic/normal; */
      /*  font-family: "微软雅黑"; */
      /*italic  900可以省略；字体大小，font-family必须存在，且顺序必须一致*/
      font:italic 900 50px "微软雅黑"
    }
</style>

文本外观

<style>
    p{
      /*首行缩进  2em：表示当前字体大小的两倍；20px：表示首行缩进20像素（不好控制）*/
      /* text-indent: 20px; */
      font-size: 20px;
      text-indent: 2em;
    }
形*/
      cursor: pointer;
      /*字体大小--用像素px做单位*/
      font-size: 40px;
      /*字体粗细  bold：加粗*/
      /* font-weight: bold; */
      /* font-weight: 800; */
      /* 数值：100~~900（一般情况下）   400==normal（正常,默认情况）   800==bold（加粗）  从小到大越来越粗*/
      /* font-weight: 400; */
      /* 字体是否倾斜---默认是normal*/
      /* font-style: italic/normal; */
      /*  font-family: "微软雅黑"; */
      /*italic  900可以省略；字体大小，font-family必须存在，且顺序必须一致*/
      font:italic 900 50px "微软雅黑"
    }
</style>