欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端自学笔记02

程序员文章站 2024-02-23 21:31:34
...

前端自学笔记02

1、表格
1)表格没有列的概念

//二行二列
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

2)属性
前端自学笔记02
前三项一般设置为0,让边框压在一起

3)表头单元格一般位于表格的第一行或第一列,其文本加粗居中,只需用:

<th></th>代替<td></td>即可

4)表格标题
caption元素定义表格标题

<table>
<caption>标题内容</caption>
</table>

5)表格结构
前端自学笔记02
用于区分表格的头部与身体
6)合并单元格
前端自学笔记02

2、input表单
1)在html中,一个完整的表单通常由表单控件(表单元素),提示信息和表单域3部分构成
2)前端自学笔记02
radio如果是一组,必须命名为相同的名字。
3)label标签为input元素定义标签。
作用:用于绑定一个表单元素,当点击label标签时,被绑定的表单元素就会获得输入焦点
用for属性

<label for="male">male</label>
<input type="radio" name="sex"; id="male" value="male">

<label>用户名:<input type="text"></label>
<!--直接包裹即可-->

4)文本域
前端自学笔记02

5)下拉菜单
前端自学笔记02
6)表单域
前端自学笔记02
method:get或post
提交跳转后在网址处显示,一般使用post保护隐私,匿名提交
7)帮助文档查阅
前端自学笔记02

2、CSS
1)
前端自学笔记02
2)位置
①内部样式
前端自学笔记02
{————————————
选择器
帮助找到要修饰的标签或元素
①元素选择器(元素选择器)
格式:
选择器{
属性名称:属性值;
属性名称2:属性值2;
}

<style>
<span>{
color:red;
}
</style>

可以把某一类标签全部选出来改样式
②ID选择器
以#开头,id名必须是唯一的
前端自学笔记02
类选择器与id选择器的区别
前端自学笔记02

#ID名称{
属性名称:属性值;
属性名称:属性值;
}
<head>
<style>
#first{
color:red;
}
</style>
</head>
<body>
<div id="first">你好</div>
</body>

③类选择器
以.开头

.类的名称{
属性名称:属性值;
...
}

<head>
.fruit{
color:red;
}
</head>
<body>
<div class="fruit">香蕉</div>
<div class="vegetable">黄瓜</div>
<div class="fruit">香蕉</div>
<div class="vegetable">**</div>
</body>

④多类名选择器
在一个div内只能有一个class属性
但可以这么做

<div class="类名1 类名2 类名3...">内容</div>
类名之间不存在先后顺序

⑤通配符选择器
前端自学笔记02

————————————}
②行内式
前端自学笔记02
③外部样式
前端自学笔记02
不用写style标签
前端自学笔记02
选择器的优先级:
行内选择器>ID选择器>类选择器>元素选择器
多个类划分用空格分割,同一优先级修饰遵循就近原则
前端自学笔记02

3、字体相关样式
1)前端自学笔记02
多个字体的执行顺序是按照顺序从前往后查找,遇到有的就使用,没有的就使用系统默认字体
前端自学笔记02
前端自学笔记02
前端自学笔记02
前端自学笔记02
2)文本外观样式
前端自学笔记02
只有两两相同时才能简写
输入首字母按tab后可补全
前端自学笔记02
前端自学笔记02
前端自学笔记02

3、chrome
按f12或“shift+ctrl+i”打开开发者工具
或者右键网页空白处–查看
前端自学笔记02

4、后代和子代选择器
1)后代选择器
前端自学笔记02
可以接类名
ul li{

}
2)子代选择器
仅选择出后代中的子代,亲儿子
用法:在1)的后代选择器的任意一个选择器前加>,表示上一级选择器的亲儿子

5、并集和交集选择器
1)交集选择器
选择器名.类名 {
}
前端自学笔记02
2)并集选择器
用逗号分隔

.class,p,#test  {
color:red; 
}

前端自学笔记02

6、链接伪类选择器
前端自学笔记02
必须按照link-visited-hover-active的顺序来写代码,可以省略

7、显示模式
1)快捷方式
前端自学笔记02
2)显示模式
前端自学笔记02
前端自学笔记02
前端自学笔记02
前端自学笔记02
前端自学笔记02

前端自学笔记02
前端自学笔记02
行高等于盒子的高度可以让单行文本垂直居中

<style>
div{
display:inline;/*把块级元素转换为行内元素*/
}
span{
inline:display;/*行内元素转换为块级元素*/
}
a{
display:inline-block/*把行内元素转为行内块元素*/
}
</style>

<div>123</div>
<span>abc<span>

<a href="http://www.taobao.com"></a>

前端自学笔记02