web前端入门2
1.嵌套列表
- 列表之间可以相互嵌套形成多层级列表
2.表格标签
<table>表格最外层容器
<tr>定义表格行
<th>定义表头
<td>定义表格单元
<caption>定义表格标题- 注:之间有嵌套关系 作业:天气预报
- 语义化标签:
<tHead>、<tBody>、<tFood>
并不会对表格造成影响，只做解释 - 注:在一个table中，thead和tfood只能出现一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<th>2019年1月1日</th>
<th><img src="./img/qingtian.jpg" alt="" width="50" height="50"></th>
<th>天气晴朗，适合出行</th>
</tr>
<tr>
<td>2019年1月2日</td>
<td><img src="./img/yutian.jpg" alt="" width="50" height="50"></td>
<td>天气不好，减少出行</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
3.表格属性
- border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式 - align:left、center、right
valign:top、middle、bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<thead>
<tr align="right" valign="top">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<th rowspan="2">2019年1月1日</th>
<th>白天</th>
<th><img src="./img/qingtian.jpg" alt="" width="50" height="50"></th>
<th>天气晴朗，适合出行</th>
</tr>
<tr>
<th>黑夜
</th>
<th><img src="./img/qingtian.jpg" alt="" width="50" height="50"></th>
<th>天气晴朗，适合出行</th>
</tr>
<tr valign="bottom">
<td rowspan="2">2019年1月2日</td>
<td>白天</td>
<td><img src="./img/yutian.jpg" alt="" width="50" height="50"></td>
<td>天气不好，减少出行</td>
</tr>
<tr>
<td>黑夜</td>
<td><img src="./img/yutian.jpg" alt="" width="50" height="50"></td>
<td>天气不好，减少出行</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
4.表单标签
<form>:表单的最外层容器
<input>:根据不同type属性，展示不同的控件- input（单标签）标签有一个type属性，决定是什么控件
单选框用name来告诉系统是一组
action
checked
disabled
placeholder <textarea>:多行文本框
<select>、<option>:下拉菜单
selected disabled
select size
select multiple
多选属性，多选文件
<label>辅助表单
常见的一些属性checked，disabled，name，for等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://">
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框：</h2>
<input type="checkbox" checked>苹果
<input type="checkbox">香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框：</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件：</h2>
<input type="file">
<h2>提交按钮和重置按钮：</h2>
<input type="submit">
<input type="reset">
<h2>多行文本框：</h2>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select name="" id="" size="2">
<option value="" selected disabled>请选择</option>
<option value="">北京</option>
<option value="" >上海</option>
<option value="">杭州</option>
</select>
<select name="" id="" multiple>
<option value="" selected disabled>请选择</option>
<option value="">北京</option>
<option value="" >上海</option>
<option value="">杭州</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
</body>
</html>
5.css基本语法
-格式:选择器{属性1：值1；属性2：值2}
单位：px 像素 % 百分号
基本样式：width、height、background-color
css注释:/css注释的内容/
快捷注释方法：shift+alt+a或ctrl+/
6.内联（行间、行内）样式
- 在html标签上添加style属性来实现
- 内部样式
在<style>标签内添加的样式
注：内部样式的优点，可以复用代码
区别：内部样式的代码可以复用，复合w3c的规范标准，进行让结构和样式分开处理。 - 外部样式：引入一个单独的css文件，name.css
通过link标签引入外部资源，rel属性指定资源与界面的关系，href属性资源的地址。
通过@import方式引入外部样式，问题较多，不建议
7.css当中的颜色表示方法
- 单词表示法、十六进制表示法、rgb三原色表示法
- 十六进制表示法：#000000黑色 #ff0000红色
- gb三原色表示法：rgb（255，255，255） 取值范围0~255
{0，0，0}黑色 {255，255，255}白色 - 提取颜色的工具：fehelper 需要在联网状态下 ps本地也可以
8.css背景样式
- background-color：背景颜色
- background-image：背景图片
url（背景地址） 默认会铺满整个背景
img与url，img常用于文章广告，url用于网页背景
-background-repeat：背景图片的平铺方式
repeat-x x轴平铺 repeat-y y轴平铺
repeat（x，y都进行平铺，默认值）
no repeat 都不平铺 - ackground-position：背景图片的位置
x，y轴移动（像素，单词，百分比） - background-attachment：背景随滚动条的移动方式、
scroll：默认值（背景位置按照当前元素进行偏移的）
fixed:（背景位置按浏览器进行偏移）
9.css边框样式
- border-style：边框的样式
solid 实线
dashed 虚线
dotted 点线
border-width：边框的大小
px。。。
border-color：边框的颜色
red #f00。。。
注：针对某一条边单独设置(border-位置-style)
transparent 透明的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{height: 300px;width: 300px;border-style: dotted;
border-width: 30px;border-color: red;
} */
div{height: 300px;width: 300px;border-right-style: dotted;
border-width: 30px;border-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
10.family字体类型
- font-family : 字体类型
英文字体 : Arial,‘Times New Roman’
中文字体 : 微软雅黑，宋体 - 中文字体的英文名称 :
微软雅黑: ‘Microsoft YaHei’(非衬线体)
宋体: SimSun(衬线体) - 衬线体与非衬线体
- 注：多个字体类型的设置目的，引号的添加目的
11.字体大小粗细样式
- ont-size：字体大小
默认大小：16px
写法：number（px）单词（small、large…不推荐）
注：字体大小一般是偶数（方便文字对齐）
font-weight：字体粗细
模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）| number（100、200…900；100 ~ 500都是正常，600 ~ 900都是加粗）
font-style：字体样式
模式：正常（normal）、斜体（italic）
写法：单词（normal、italic）
注：oblique也是斜体，使用较少
区别：talic 只有带有倾斜字体的才可以设置
oblique 没有倾斜属性的字体也可以设置倾斜
color：字体颜色
12.文本修饰与文本大小写
- .rext-decoration : 文本装饰
下划线(underline)、删除线(line-through)、上划线(overline)、不添加任何装饰(none)
注: 添加多个文本修饰 : line-through under-line overline - text-transform : 文本大小写(针对英文)
小写 : lowercase
大写 : uppercase
只针对首字母大写:capitalize
13.文本缩进与文本对齐
- text-indent : 文本缩进
首行缩进
em单位: 相对单位 ，1em永远跟字体大小相同 - text-align : 文本对齐方式
对齐方式 : left、right、 center、justify (两端点对齐)
14.文本的行高
- line-height：定义行高
定义：一行文字的高度，上边距和下边距的等价关系
默认：不固定，根据当前字体大小不断变化
取值：number（px）| scale（比例值，跟文字大小成比例）
15.文本间距与英文折行
- etter-spacing : 定义字间距
- word-spacing : 定义词间距(针对英文)
- 强制折行: (针对英文)
16.CSS复合样式
- 一个CSS属性只控制一种样式：单一样式
一个CSS属性控制多种样式：复合样式 - 复合样式：
background
border
font - 复合写法（通过空格实现，有的属性不用在意顺序，如background、border，有的需要，如font）
background：red url（）repeat 0 0；
border：1px red solid；
font：weight style size family
style weight size family
weight style size/line-height family
（最少要有值 size 和 family）
17.ID选择器及注意事项
- D选择器
css : #elem{}
html : id= “elem” - 注:
1.在一个页面中，ID值是唯一的。
2.命名规范:字母、下划线、中划线、数字(命名的第一位不能是数字)。
3.命名方式:驼峰式、下划线式、短线式。 - 驼峰写法: searchButton(小驼峰) SearchButton(大驼峰)
短线写法: search-small-button=
下划线写法: search_small_button
18.CLASS选择器及注意事项
- css：.elem{}
html：class=“elem” - 注：
class选择器可以复用
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法（如p.box)
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
