web前端 第2天

1.元素显示模式:

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

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

2.表格标签:

<caption>学生信息</caption>---表的最上一行

<thead><tr><th>内容</th></tr></thead>

3.表格标签属性：

表头 rows data

table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)

caption；通过css更改

thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）

4.单元格合并

跨行：rowspan

跨列：colspan

5.details:详情标签

配合summary使用

6.tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数

<input type="text">
<a href="#">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="0">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>

7.表单的基本属性：

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

action:将数据交给谁处理

name：必有属性

method：提交方式 ajax

<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>
</form>

8.常见的表单元素：

<form action="#">
<!-- 文本框    maxlength:最大长度-->
        用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br />

<!-- 密码 -->
密码：<input type="password" name="pwd"><br />

<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />

<!-- 多选框   label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>

<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉

<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查">

<!-- 确认按钮 -->
<!-- <button type="submit"></button> -->

<!--重置按钮 -->
<input type="reset">

<!-- 普通按钮 -->
<input type="button">

<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
        ">
</textarea><br />

<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>

<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>

<input type="submit">

</form>

9.html的全局属性：

<!-- id身份证号，在一个页面中只能出现一次 -->
<div id="one"></div>

<!-- class   一类 可以出现多个-->
<div class="pink" style="font-size: 40px;">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>
<div class="pink">我是哟个盒子</div>

<!-- accesskey  设置快捷键 -->
<form action="#">
<input type="text" name="a" id="">
<button accesskey="s">提交</button>
</form>

<!-- style -->

<!-- data-*  自定义属性 -->

10.表单：

<form action="#">
<input type="number">
<input type="color">
<input type="time">
<button>tijaio</button>
</form>

11.CSS

外部链接：写在外面，语法相同直接调用

内部链接：

<style>
div {
width: 300px;
height: 300px;
background-color: pink;
        }
</style>

12.基本选择器：

<style>
/* 标签选择器  选中所有的p标签*/
p {
color: aqua;
        }
/* id选择器 */
#box1 {
color: pink;
        }
/* 类选择器 */
.box2 {
color: blueviolet;
        }
/* 通配符选择器
        *{
        }
        */
</style>

13.包含选择器：

<style>
/* 子代选择器   选中亲生儿子*/
.a>li {
background-color: pink;
        }
/* 后代选择器 找到后代所有要找的元素*/
.a li {
color: blueviolet;
        }
</style>

14.字体的样式：

<style>
div {
cursor: pointer;
/* 字体大小 */
/* font-size: 40px; */
/* 字体粗细 */
/* font-weight: bold; */
/* font-weight: 900; */
/* 100-900 400===normal  800===bold  100-900越来越粗           font-weight: 400;*/
/* 字体是否倾斜 */
/* font-style: italic/normal; */
/* font-family: "微软雅黑"; */
/* italic 900可省略，字体大小，font-family必须存在 */
font: italic 900 70px "微软雅黑"
        }
</style>

15.复合选择器：

div,
p,
span {
color: red;
        }

16.属性选择器:

input {
background-color: pink;
        }
input[type="password"] {
background-color: aquamarine;
        }
div[id] {
width: 300px;
height: 300px;
background-color: blue;
        }
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
        }
input[type$="l"] {
background-color: green;
        }
/* type*="e"    type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
        }

首行缩进：

<style>
p {
/* text-indent: 32px; */
font-size: 20px;
text-indent: 2em;
        }
</style>