Web编程入门暨个人网站计划：Web前端开发入门
目录
课程进展
HTML
基本标签
相关概念
DOM树
HTML5文件结构
虚拟超链接
本地链接与外部链接
字符集与编码
图像格式
相对路径
Web语义化
CSS
添加方法
选择器
常用单位
超链接伪类选择器
常用属性
列表属性
表格
布局与定位
Sublime
快捷操作
代码扩展
Emmet插件安装
常用官方学习网站
参考文献
课程进展
Web前端开发：1.概论完成，2.HTML已完成，3.CSS已完成，4-4开始
Web编程技术：（第4次开课）等待第1周内容
Java Web应用开发：0周完成，准备1周，需要先修WEB前端
HTML
基本标签
| 标签名称 | 标签符号 | 常用属性/备注 | 常用语法 | ||||
|---|---|---|---|---|---|---|---|
| meta | |||||||
| 标题 | h1~h6 | ||||||
| 段落 | p | ||||||
| 段内换行 | br | ||||||
| 预留格式 | pre | ||||||
| 段内分组 | span | ||||||
| 水平线 | hr | ||||||
| 注释 | |||||||
| 超链接 | a | 文字或图片 | |||||
| 图片 | img | alt图片失效时显示的文字 |  |
||||
| 区域 | div | align对齐方式 e.g. "center";id 名字 | 一段内容 |
||||
| 无序列表 | ul li | ul为无序列表，li为列表项 |
|
||||
| 有序列表 | ol li | ol为有序列表，li为列表项 |
|
||||
| 表格 | table tr td | tr行,td单元格，th表头单元格 border属性表示边框粗细 e.g. boarder="1" |
|
||||
| 上角标 | sup | 标号 | |||||
| 空格字符 | |||||||
| 表单 | form | action属性记录数据传递到哪里 | |||||
| 表单元素 | input | type属性 text 文本框 password 密码框 submit 按钮 reset 重置 radio 单选框 checkbox 复选框—checked默认选中 |
|||||
| 下拉列表 | select | 一种表单元素 option选项标签—selected默认选中 |
|
||||
| 文本域 | textarea | 一种表单元素 rows行数 cols列数 | |||||
| 斜体 | em i | em是语义化标签，emphasize | |||||
| 加粗 | strong b | strong是语义化标签 | |||||
| 自定义列表 | dl dt dd | 自定义列表项dl 列表项dt 描述dd | |||||
| 文件链接 | link | rel文件类型 href地址 放在head标签内 |
|
相关概念
DOM树
HTML5文件结构
虚拟超链接
本地链接与外部链接
如果想要导航到百度首页，如下超链接是无效的：
如果网站文件夹在E:/下，则上述超链接会尝试链接到E:/www.baidu.com，如下超链接才是有效的:
字符集与编码
| ASCII | 数字、英文字母、一些符号 |
| GB2312 | 简体中文 |
| Unicode | 所有语言 |
| UTF-8 | 所有语言，占用空间更小 |
如果网页源文件保存时的编码方式与标签所声明的charset属性值有冲突，则有可能会出现乱码
图像格式
| JPG | 有损压缩 |
| GIF | 支持动画 |
| PNG | 支持有损压缩和无损压缩，支持动画 |
相对路径
网页index.html所在的文件夹为C:/test，需要使用到C:/images下的图片logo.gif，则如果使用相对路径来表示：
其中“..”表示当前所在文件夹的上一级文件
Web语义化
让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容
好处：
1、结构清晰，有利于团队的开发、维护
2、SEO（Search Engine Optimization）搜索引擎优化，有利于搜索引擎理解
3、容易兼容不同设备
CSS
添加方法
行内样式（
标签内style属性）
内嵌样式：（
标签内