web前端开发技术

整理了表格表单、HTML基础、格式化文本与段落、列表等知识点，适合前端小白学习!做的不好多多包涵~

web前端开发技术

• 表格
  • 表格概述
    • 常用表格标记及说明 P178~P179
  • *表格标记
    • <table>表示表格开始，</table>表示表格结束
    • <caption>表示标题开始，</caption>表示标题结束 可以给表格添加标题，应位于table标记与tr标记之间的任何位置
    • <tr>表示行开始，</tr>表示行结束
    • <th>表示表头开始，</th>表示表头结束
    • td标记是成对标记，定义单元格或列，以<td>开始，以</td>结束
  • *表格的属性设置
    • 表格标记的属性、取值及说明 P182
    • 表格属性 P182
    • 表格的边框样式属性
      • <table frame ="" rules ="" ···> ··· </table>
      • frame、rules的常见属性值及说明 P184
      • 表格边框合并 bored-collapse:collapse/separate
    • 表格的单元格间距、单元格边距属性 P185
    • 表格的水平对齐属性 P186
  • 设置表格行的属性 P187~P188
  • *设置单元格的属性 P189
  • 表格的嵌套 P191
• 表单
  • 表单概述
    • 以<from>开始，以</from>结束
    • 表单标记的属性、取值及说明 P203
  • 定义域和域标题 P204
  • *表单信息的输入
    • <input name ="" type =""/>
    • 表单信息输入标记的属性、取值及说明 P205
    • 单行文本输入框与密码框
      • 单行文本框 <input name ="" type ="" maxlength ="" size ="" value ="" readonly />
      • 密码输入框 <input name ="" type ="password" maxlength ="" size ="" />
      • 文本输入框与密码框标记相关属性、取值及说明 P206
    • 复选框与单选按钮
      • 复选框 <input name ="" type ="checkbox" value ="" checked ="checked"/>
      • 单选按钮 <input name ="" type ="radio" value ="" checked ="checked"/>
      • 复选框与单选按钮属性、取值及说明 P207
    • 图像按钮 P208
    • 提交、重置及普通按钮 P209~P210
    • 文件选择框与隐藏框 P211
  • 多行文本输入框 P212~P213
  • 下拉列表框 P214 P339
• CSS
  • CSS概念
    • CSS的基本概念
    • 传统HTML的缺点
    • CSS的特点
    • CSS的优势
    • *CSS基本语法 P92
  • *CSS选择器
    • 通用选择器(初始化) P95
    • 标记选择器 P93
    • 类选择器 P94
    • id选择器 P94
    • 伪类选择器 P95
    • CSS属性选择器 P96
  • *CSS盒模型
    • CSS盒模型结构
    • 边界属性设置 margin P140
    • 边框属性设置 border
      • 边框样式 border-style 属性 P142
      • 边框宽度 border-width 属性 P142
      • 边框颜色 border-color 属性 P143
      • 边框 border 属性 P143
    • 填充属性设置 padding P144
  • DIV与SPAN
    • *DIV图层
      • DIV定义 P110~P111
      • DIV应用
    • 图层嵌套与层叠
      • DIV嵌套
      • DIV层叠
    • span标记
  • DIV+CSS页面布局 导航菜单设置
    • 一级水平导航菜单
      • 采用"表格+超链接"来设计 P160
      • 采用"无序列表+超链接"来设计 P160
    • *二级水平导航菜单
      • 下拉导航菜单 P161~P165
      • 横向二级导航菜单 P165~P168
  • *CSS样式属性
    • CSS字体样式 font
      • font属性的子属性 P124
      • 字体大小 font-size 属性 P124
      • 字体样式 font-style 属性 P125
      • 字体系列 font-family 属性 P125
      • 字体变体 font-vaeiant 属性 P126
      • 字体粗细 font-weight 属性 P127
      • 字体 font 属性 P127
    • CSS文本样式
      • 字符间距、行距与首行缩进属性 P128~P130
      • 字符装饰、英文大小写转换属性 P130~P131
      • 水平对齐、垂直对齐属性 P131~P133
    • CSS颜色与背景
      • 颜色color属性 P133~P134
      • 背景 background 属性
        • 背景颜色 background-color 属性 P134
        • 背景图像 background-image 属性 P134
        • 背景图像重复 background-repeat 属性 P135
        • 背景附件 background-attachment 属性 P135
        • 背景图像位置 background-position 属性 P136
        • 背景 background 属性 P136
    • 链接
    • CSS列表样式 P138~P139
    • 表格
    • 表单
  • CSS动画
    • CSS3转换 transform 属性 P255~P259
    • CSS3过渡 transition 属性 P259~P261
    • CSS3动画 animation 属性 P261~P265
• 图像与多媒体文件
  • 图像
    • 插入图像
      • <img src ="URL" alt ="替代文本">
      • img标记的属性、取值及说明 P74
    • 设置图像的替代文本 P75
    • 设置图像的高度和宽度 P75
    • 设置图像的边框 P75
    • 设置图像的对齐方式 P76
    • 设置图像的间距 P77
    • 设置图像的热区链接 P77
  • 滚动文字
    • 添加滚动文字 marquee P79
    • 设置滚动文字的背景颜色与滚动循环 P80
    • 设置滚动方向与滚动方式 P80
    • 设置滚动速度与滚动延迟 P80
    • 设置滚动范围与滚动空白空间 P81
  • embed标记
• 超链接与浮动框架
  • 超链接概述
  • *超链接的语法、路径及分类 P59
    • 超链接的语法
      • <a href ="url" name ="" title ="提示信息" target ="窗口名称">超链接标题</a>
      • target属性的取值及说明 P59
    • 超链接的路径
      • 绝对路径
      • 相对路径 P60
      • 根路径
    • 超链接的分类
  • 超链接的应用
    • 创建HTTP文档下载超链接
    • 创建FTP站点访问超链接
    • 创建图像超链接
    • 创建电子邮件超链接
    • 创建页面书签超链接 P64
  • 浮动框架
    • <iframe name ="框架名称“ scr ="url" width ="" height =""></ifeame>
    • 浮动框架的属性 P67
• 列表
  • 列表概述
  • *无序列表 P47
    • 无序列表标记ul为成对标记，<ul>是开始标记，</ul>是结束标记，在两者之间插入若干个列表项li标记，完成无序列表的插入
    • ul标记的type属性及说明 P48
  • *有序列表 P49
    • 有序列表ol标记为成对标记，以<ol>为起始标记，以</ol>为结束标记，在其间使用<li></li>标记完成有序列表项目的插入
    • 属性说明 P49~P50
  • 列表嵌套
  • 定义列表
    • 定义列表dl标记是成对标记，以<dl>为首标记，以</dl>为尾标记。定义列表由dt标记和dd标记组成。定义列表中每一个元素的标题使用<dt>···</dt>标记定义；后面跟随<dd>···</dd>标记，用于描述列表中元素内容。
• 格式化文本与段落
  • web页面初步设计
    • 向web页面中添加文字信息
    • *标题字标记 P33
      • <h1 align="left|center|right|justify">1号标题文字</h1>
      • <h1>到<h6> h后面的数字越小，标题字越大
      • left左对齐 center居中对齐 right右对齐 justify两端对齐
    • 添加空格与特殊字符
      • *空格 &nbsp;
      • 特殊字符对应的符号代码 P34
  • 格式化文本标记
    • 文本修饰标记 P35~P36
    • 字体标记 P37
  • *段落与排版标记 P38
    • 段落标记
      • <p align = "left|center|right|justify">段落正文内容</p>
    • 换行标记
      • <br>或<br/>
    • 水平分割线标记
      • <hr width= "" size="" color="" align="" noshade> P39
    • 拼音/音标注释解析
    • 段落缩进标记
    • 预格式化标记
• HTML基础
  • HTML文档的结构
    • 由头部head和主体body两部分组成
    • HTML文档以<html>标记开始，以</html>标记结束
  • 头部head
    • 标题title标记
      • <title>标题信息显示在浏览器的标题栏上</title>
    • 元信息meta标记
  • 主体body
    • body标记
      • <body>是开始标记，</body>是结束标记
    • body标记的属性
      • 课本P21表格
  • HTML基本语法
    • 标记的类型
      • 单(个)标记
      • 双(成对)标记
    • HTML属性
  • 注释
    • <!-- 显示一个段落 -->
  • HTML文档的编写规范
    • HTML代码的书写规范
    • *HTML文档的命名规则 P26
  • HTML文档的类型
  • HTML5新增的input类型 P239~P242
  • HTML5视频与音频 P243~P246
• web前端开发技术综述
  • web概述
    • web的起源
    • web的特点
    • *web的工作原理 P3
    • web的相关概念
      • URL(统一资源定位器)
  • web前端开发工程师的职业需求
  • web前端开发技术
    • *HTML
    • *CSS
    • *JavaScript
  • web前端开发工具
  • 浏览器工具