到目前为止我已经做了一年多的切图仔，工作中有一些用到烂的基础属性，同时也有更多我没用过甚至还不知道的知识，此文的目的除了跟着教程过一遍基础知识之外，我还想把这些我尚未熟悉的知识学习巩固。
另外我还想扪心自问，我到底还想做多久谁都能替代我的切图仔呢？
学习教程来自 学堂在线 里清华大学推出的WEB前端攻城狮（基础篇）课程
HTTP协议传输：Hyper-Text Transfer Protocol
HTML：Hyper-Text Markup Language
头部声明
<!doctype html>
<link rel="shortcut icon" type="imagex-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="">
list
无序列表 Unordered list
有序列表 Ordered list
ul和ol默认样式都会留有1em的上下边距，另外其中的li元素默认有40px的左内边距
table
Table可用来表示二维的数据结构，不建议当作容器（container）来使用
- 对多行进行分组：<thead><tbody><tfoot>
- 对多列进行分组：<colgroup><col>
HTML5中的语义化分段元素
<section> <article> <aside> <nav>
- 每一个分段元素可以拥有自己独立的<header>和<footer>
Form
<form>元素为用户输入创建HTML表单，用于向服务器提交数据。
<form>的属性中，action指定一个URL地址，指向服务器上的一段脚本，提交的数据将由这段脚本来处理。
method指定http请求的发送方法，包括post和get两种。
enctype指定表单数据在被提交给服务器时所采用的编码方式。
DOM
父节点 parent
子节点 child
祖先节点 ancestor
后代节点 descendant
兄弟节点 sibling
紧邻兄弟节点 adjacent sibling
HTML最佳实践
- 根据应用场景和需求，建立合适的HTML标记结构，选择合适的HTML标记元素
- 不要忘记文档类型声明，<!doctype html>
- 不要忘记字符编码声明，如<head>元素中应加入<meta charset="UTF-8" />
- 不要再使用HTML5不再支持的Tag，如<center> <font> <basefont> <big>等等
- 不要再使用HTML5不再支持的Tag属性，如table,img标签的align和border属性等
CSS：Cascading Style Sheets
如果不理解最好自己测试一下
属性选择器
| 选择器 | 含义 |
|---|---|
| E[foo] | 选择带有foo属性的E元素 |
| E[foo="bar"] | 选择foo属性值等于bar的E元素 |
| E[foo^="bar"] | 选择foo属性值以bar开头的E元素 |
| E[foo$="bar"] | 选择foo属性值以bar结尾的E元素 |
| E[foo~="bar"] | 选择foo属性值中有bar的E元素，如：<a foo="bar car dar"></a>，注意：bar为一整个单词 |
| E[foo*="bar"] | 选择foo属性值包含bar的E元素，如：<a foo="sidebar"></a> |
| E[foo|="en"] | 选择foo属性的起始值等于en的E元素，注意：en为一整个单词 |
上下文选择器
| 选择器 | 含义 |
|---|---|
| e1~e2 | 选择e1之后的所有e2元素 |
| e1+e2 | 选择紧邻e1的e2元素 |
| e1>e2 | 选择所有直接父级是e1的e2元素 |
| * | 选择任意元素 |
伪类选择器
结构化伪类选择器
| 选择器 | 含义 |
|---|---|
| e:first-child | e是其父元素的第一个子元素 |
| e:last-child | e是其父元素的最后一个子元素 |
| e:nth-child(n) | e是其父元素的第n个子元素 |
| * | 选择任意元素 |
UI伪类选择器
- :visited
- :link
- :hover
- :focus
- :checked
- :active
- :target
伪元素选择器
| 选择器 | 含义 |
|---|---|
| e::first-line | e元素的首行 |
| e::first-letter | e元素的首个字符 |
| e:nth-child(n) | e是其父元素的第n个子元素 |
| * | 选择任意元素 |
使用伪元素选择器生成的内容实际上并不存在。
另外说一下一个冒号和两个冒号的区别：
其实在浏览器中达到的效果都一样，但是为了区分伪元素和伪类，W3C官方推荐使用两个冒号。
网友评论