HTML+CSS学习Day13笔记

Day13笔记

一、浏览器内核

渲染引擎：负责解析html和css代码还有图片等等素材

js引擎：负责解析js代码

最早的时候渲染引擎也负责解析js代码

script标记作用就是执行js代码，也是js的一个执行环境

二、代码执行顺序

1、html、css、js代码会按着自上而下的顺序执行，注意点js里面的有些代码不会按着顺序执行。

2、浏览器在解析代码的时候，遇到html和css代码会按着顺序执行，如果遇到了scrtpt标记咱们的html和css代码会暂停执行，直到js代码执行完毕后再去执行html和css代码。

三、表格标记

一个完整的表格组成：

table 表格标签

caption 表格的标题（在表格外，默认文本居中）

tr 表格行标签

th 表格的表头标题（在表格内，默认字体加粗并文本居中）

td 单元格标签

行分组：（当长的表格被打印是，表格的表头和页脚可被打印在包含表格数据的每张页面上）

thead 表头

tbody 表体（浏览器会默认设置tbody）

tfoot 表尾

四、表格rules属性

rules组分割线，用来使用html属性做细线边框，无法改变table、thead、tbody、tfoot自带边框

rules=“all” 每个单元格

​ “cols” 每列分组，水平边框不显示

​ “cows” 每行分组，竖向边框不显示

​ “groups” 清除所有边框

五、表格caption属性

表格标题

<caption>表格的标题</caption>

有兼容问题，一般情况下浏览器只支持top（默认值）和bottom

caption-side:bottom;
caption-side:top;

六、nth-child属性

even表示偶数（2n）

odd表示奇数（2n+1）

/*选择所有偶数行*/
table tr:nth-child(2n){
background-color:red;
}
/*选择所有偶数行*/
/*table tr:nth-child(even){
background-color:red;
}*/
/*选择所有奇数行*/
table tr:nth-child(odd){
background-color:red;
}

七、表格colgroup和col的区别

列分组 span表示把表格按列，划分成几个区域，选择顺序为从左至右

colgroup 为双标记

<colgroup span="2" style="background-color: yellow;"></colgroup>

<colgroup span="1" style="background-color: red;"></colgroup> 

col 为单标记

<col span="2" style="background-color: yellow;"/>

<col span="1" style="background-color: red;"/>

以上两种写法，效果一样

八、表格css属性

1、合并单元格边框

border-collapse:collapse;

/*效果与html中rules="all"一样*/

2、表格固定

/*解决在未设置每个单元格长高尺寸时，单元格根据内容会自动伸缩的问题*/

table-layout:fixed;

/*注意点：数字和字母在单元格中不能默认换行，文字默认换行*/

3、无内容时隐藏

empty-cells:hide;
/*占位隐藏*/

九、表单legend标记

legend标记不能使用text-align属性，因为可以让legend标记整体位置发生改变

语法：<legend align="left/center/right"></legend>
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题，legend元素必须是fieldset内的唯一个元素。
<legend>用户注册</legend>

语法：<fieldset disabled="disabled"></fieldset>
说明：相当于一个方框，在字段几种可以包含文本和其他元素，该元素用于对表单中的元素进行分组并在文档中区别标出文本，fieldset元素可以嵌套，在其内部可以设置多个fieldset对象，disabled定义空间禁制可用（不可点击，无法获取焦点）。
form fieldset legend{
        height: 26px;
        border: 1px solid #ccc;
        font-size: 14px;
        line-height: 26px;
        padding: 0 20px;
        margin-left: 20px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1WvIgQ5D-1622450964373)(D:\千锋\一阶段\5月\day13\代码\img\legend.png)]

十、表单label提示信息

<!--label for需与后方input中id相关联，当点击label时，便可在相关联的input中获取焦点-->
语法：<label for="绑定控件id名"></label>
说明：label元素用来定义标签，为页面上的其他元素指定提示信息，要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值想同。
<p>
<label for="username">用户名</label>
<input type="text" id="username" value="" />
</p>

<p>
<label for="userpwd">密码</label>
<input type="text" id="userpwd" value="" />
</p>

<p>
<label for="email">用户名</label>
<input type="text" id="email" value="" />
</p>

十一、表单image图像按钮

<input type="image" src="img/18.jp" width="200" height="50" title="这是按钮" alt="图片不见了"/>

十二、表单multiple多选属性

例如file上传文件，使用multiple可用ctrl同时选择多个文件进行上传

<input type="file" value="" multiple="multiple"/>

十三、表单file上传文件

file上传文件按钮格式无法改变，仅可改变宽高尺寸。

若想改变file的样式：

1、使用opacity:0;使其透明，但功能仍然存在；

2、新建个盒子，设置自己想要的按钮样式；

3、盒子使用定位功能覆盖file；

4、给file设置定位属性，因为z-index:1;只能给定位后的元素设置优先级；

5、使用z-index:1;提高file的优先级，否则file无法获取焦点，被新建盒子阻挡；

6、给input增加cursor:pointer功能。

十四、H5表新增表单属性

1、autofocus让表单第一个标记默认获取焦点 

2、required 表单为空不能提交

3、novalidate 只能给form设置，表示表单不通过验证就可以提交（一般情况下都需要通过验证,骗去信息的网站不需要验证）

4、autocomplete可以关闭表单自动提示功能，当input默认设置了name属性和属性值时才会出现
此属性给form设置，默认开启
<form autocomplete="off">关闭
<form autocomplete="on">开启

5、maxlength 规定了input最大可以输入多少个字符
pattern 属性值里面可以支持js里面的正则表达式，正则专门用来做表单验证的

十五、H5新增表单标记

H5新增的表单里面有两个方面：
a、表单标记语义化，语义化就是见名知意，一个标记你看见是什么就什么
b、表单智能化，表单默认自带了一些验证功能

<p>
<label>电子邮箱</label>
<input type="email" name="" id="" value="" />
</p>

<p>
<label>电话号码</label>
<input type="tel" name="" id="" value="" />
</p>

<p>
<label>搜索</label>
<input type="search" name="" id="" value="" />
</p>

<!--max最大值  step间隔  min最小值-->
<p>
<label>数字</label>
<input type="number" name="" id="" value="10" min="10" step="10" max="100"/>
</p>

<p>
<label>进度条</label>
<input type="range" name="" id="" value=""/>
</p>

<p>
<label>取色器</label>
<input type="color" name="" id="" value="" />
</p>

<!--日期格式：2021-05-07 2021/05/07 -->
<p>
<label>日历</label>
<input type="date" name="" id="" value="2021-05-07" />
</p>

<p>
<label>地址</label>
<input type="url" name="" id="" value="" />
</p>

<!--下拉菜单-->
<input list="link"/>
<datalist id="link">
	<option value="特斯拉">特斯拉</option>
	<option value="宝马">宝马</option>
	<option value="宝骏">宝骏</option>
	<option value="五菱宏光">五菱宏光</option>
	<option value="日产">日产</option>
</datalist>

<!--隐藏域：专门用来收集一些信息发送给服务器，用户是不可见的，一般是后端操作-->
<input type="hidden" name="" id="" value="" />

十六、盒子阴影属性

/*盒子阴影属性 让盒子在显示的时候产生阴影效果/
box-shadow:length length length length color inset;
第一个参数表示阴影离开盒子的横向距离；
第二个参数表示阴影离开盒子的纵向距离；
第三个参数表示阴影的模糊半径；
第四个参数表示阴影的延伸半径（可省略）；
第五个参数表示阴影的颜色；
第六个参数表示是否使用内阴影（可省略，默认是外阴影）；
/*color和inset的顺序可以改变*/

十七、文字阴影

语法：text-shadow:h-shadow  v-shadow  blur  color;
h-shadow 必需。水平阴影的位置。允许负值。为正值，阴影在对象的右边，反之阴影在对象的左边。
v-shadow 必需。垂直阴影的位置。允许负值。为正值，阴影在对象的底部，反之阴影在对象的顶部。
blur 可选。模糊的距离。这个值只能是正值
color 可选。阴影的颜色

；
第二个参数表示阴影离开盒子的纵向距离；
第三个参数表示阴影的模糊半径；
第四个参数表示阴影的延伸半径（可省略）；
第五个参数表示阴影的颜色；
第六个参数表示是否使用内阴影（可省略，默认是外阴影）；
/color和inset的顺序可以改变/

### 十七、文字阴影

语法：text-shadow:h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。为正值，阴影在对象的右边，反之阴影在对象的左边。
v-shadow 必需。垂直阴影的位置。允许负值。为正值，阴影在对象的底部，反之阴影在对象的顶部。
blur 可选。模糊的距离。这个值只能是正值
color 可选。阴影的颜色