web学习（第二周）

21、嵌套列表（与上一周内容连续）（四个列表）

列表之间可以嵌套形成多层级列表。
ctrl+alt+A截屏
shift+alt+A将一段文字改为注释

表格

22、表格标签

<table>:表格的最外层容器
<tr>：定义表格行
<th>：定义表格表头
<td>：定义表格单元
<caption>：定义表格标题
注：以上有嵌套关系，要符合嵌套规范
语义化标签：<tHead>、<tBody>、<tFood>
注：<tBody>可以出现多次，<tHead>、<tFood>只能出现一次

日期	天气情况	**出现情况 **
2019年1月1日	晴天	天气晴朗，适合出现
2019年1月2日	雨天	有小雨，出门请带伞

23、表格属性

24表单input标签

（from 、input（单标签））
表格嵌套有严格限制，表单没有

效果展示

代码

通过name=…（比如 gender）让单选框变为一组
action=某某网站就可以将数据输入到那里。

添加checked或者checked="checked"将选项在一开始就锁定

添加 placeholder="请输入用户名“”（后者看需要什么就填啥）
来提供提示信息

25表单相关标签

<textarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助表单

disable:表示禁止这一项
size：显示更多选项
multiple:使选项可以多选
注意：想要多选得通过鼠标滑动。

成果展示

代码展示


input 也可以用multiple(多选)

通过添加“<label>"辅助，点击后面的男或女也可以进行选择
id与for 一 一 对 应

26、表格表单组合实例

表格表单组合
：表格表单之间可以互相组合形成数据展示效果。
先写表单，再写表格（表单没有规范，表格有规范（要求））

27、div与span

<div>(块）： 标签定义 HTML 文档中的分隔（DIVision）或部分（section）。
div属于web前端的学习内容，其中<div> 标签常用于组合块级元素，
以便通过样式表来对这些元素进行格式化。
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。
<div>内还可以多层嵌套<div>
<span>（内联）：用来修饰文字的，div和span都是没有任何默认样式的，需要配合css才行。

Css部分

28、CSS基础语法

• 选择器{ 属性1 ：值1 ；属性2 ：值2 }

• width：宽
• height：高
• background-color：背景色

• 长度单位：
  1.px->像素
  2.%->百分比
  示例： (外容器->600px 当前容量50%->300px)
  Css注释：/Css注释的内容/
  
  
  
  
  选择器和标签要产生映射关系。

29、内联样式于内部样式

• 内联（行内，行间）样式
  在html标签上添加style属性来实现的
• 内部样式

在<style>标签内添加的样式
注：内部样式的优点，可用复写代码。

好的习惯：将结构和样式分离处理。

30、外部样式以及两种写法

• 外部样式：引入一个单独的CSS文件，name.css

• 通过link标签引入外部资源，rel属性指定资源与页面的关系，href属性指定资源的地址。

• link的位置：
  

• @import

• 注：这种方式有很多问题，不建议使用。
  

31、CSS颜色表示法

1.单词表示法：red，blue，green，yellow
2.16进制表示法：#000000,#ffffff

• 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

3.rgb三原色表示法：rgb（255,255,255）

• 取值范围0~255

4.两种提取网页颜色的办法

• 下载FeHelper（必须在网络环境下）
• ps（photoshop）
  
  

32、背景样式

• background-color：背景颜色
• background-image：背景图片

• url（背景地址）（默认情况下会水平垂直铺满背景图）

• background-repeat：背景图片的平铺方式

• repeat-x：x轴平铺

• repeat-y：y轴平铺

• repeat ：（x，y轴都进行平铺，默认值）

• no-repeat：都不平铺

• background-position：背景图片的位置
  x，y：number（px，%）|单词
  x：left 、center、 right
  y：top、center、bottom

• background-attachment：背景图随滚动条的移动方式（主要scroll，fixed）
  scroll：默认值（背景位置是按照当前元素进行偏移的）
  fixed：（背景位置是按照浏览器进行偏移的）
  

33、背景实现视觉差效果

利用id属性区分div

效果展示

代码：

34、边框样式

border-style：边框样式

• solid:实线
• dashed：虚线
• dotted：点线
  border-width：边框大小
• px…
  border-color：边框颜色
• red f00 …
  注：针对某一条边进行单独设置。
  border-left-style；中间是方向（left、right、top、bottom）
  
  
  
  

35、边框实现三角形

颜色：透明颜色transparent

36、family字体类型

font-family：字体类型

• 英文字体：Arial，‘Times New Roman’
• 中文字体：微软雅黑（默认），宋体

中文字体的英文名称：
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体，非衬线体
注意点：
1.多个字体类型设置的目的：识别计算机，识别更多设备
2.引号添加的目的：为了符合规范。


打开控制面板，找到字体，就能找到计算机里拥有的所有字体。

什么时候需要加引号 ：中间有空格的时候（如上）

37、字体大小粗细样式

font-size：字体大小
*默认 ：16px
写法：number（px）|单词（small，large…不推荐使用）

font-weight：字体粗细
模式：正常（number）加粗（bold）
写法：单词（number，bold）|number(100 200 300 500…900…100到500都是正常，600到900都是加粗的)

font-style:字体样式：
模式：正常（normal）、斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，用的比较少，一班了解即可。
区别：
1.italic :带有倾斜属性的字体才可以设置倾斜操作
2.oblique :没有带倾斜属性的字体也可以设置倾斜操作。

文本

38、文本修饰与文本大小写

• text-decoration：文本装饰
• 下划线：underline
• 删除线：line-through
• 上划线：overline
• 不添加任何装饰：none
• 注：多个文本装饰：line-through underline overline

• text-transform：文本大小写（针对英文段落）
• 小写：lowercase
• 大写：uppercase
  

本教程专门针对编程小白而制作，是学习HTML+CSS很好的入门教程。学完后能写出你看到的静态页面。
知识点涵盖：
·HTML入门、文本、图像、链接、表格、列表、表单、盒模型等基础知识。

39、文本缩进与文本对齐

text-indent:文本缩进
首行缩进
em单位：相对单位1em永远都是跟字体大小相同。
text-align：文本对齐方式
对齐方式：left，right，center，justify（两端点对齐）

40、文本的行高

• line-height：定义行高
• 什么是行高，一行文字的高度，上边距和下边距的等价关系。
• 默认行高，不是固定值，而是变化的，根据当前字体的大小再不断改变。
• 取值1.number（px）|scale（比例值，和文字大小成比例的）

41、文本间距与英文拆行

• letter-spacing：字之间的间距
• word-spacing：词之间的间距（针对英文段落的）

英文和数字不自动拆行的问题：
1.word-break:break-all；（非常强烈的拆行）
2.word-wrap：break-word；（不是那么强烈的拆行，会有一部分空白区域）

42、文本与段落实现个人简介

可以用ps去找自己需要的颜色。

43、css复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不用关心顺序，例如：background，border；有的是要关心顺序，例如font
1.background: red url() repeat 0 0;
2.border: 1px red solid;
3.font：
注：最少要有两个 size family
weight style size family（对）
weight style size family （对）
style weight size family（对）
weight style size/line-height family (对)
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

44、ID选择器及注意事项

1.ID选择器
#elem{} di=“elem”
注：
1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchSmallButton（小驼峰），searchButton（大驼峰）
短线写法:search-small-button
下划线写法:search_small_button

45、CLASS选择器及注意事项

.elem{} class=“elem”
注：
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式时，样式的优先级根据css决定，而不是class中的顺序。
4.标签+类的写法.

控制台可以看报错信息