一、表格(会根据内容大小自动变化宽高)
<table>
<thead><tr><th>姓名</th></tr></thead>
<tbody><tr><td>空</td></tr></tbody>
</table>
表格属性
align元素对齐方式
cellpadding文字距离单元格边框空隙
cellspacing单元格之间的空隙
合并单元格
rowspan=‘合并个数’(跨行合并)写上侧单元格!
colspan=‘合并个数’(跨列合并)写左侧单元格!
二、列表
无序列表(有圆点)
<ul>
<li></li>
</ul>
有序列表(有序数)
<ol>
<li></li>
</ol>
自定义列表(解释前面有留白)
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
三、表单
表单域属性(包含表单元素)
<form action='url地址'【xxx.php】 method='提交方式(get/post)' name='表单域名称'>
</form>
input表单元素(单标签)
<input type='' name=''value=''checked=''maxlength=''/>
1.type:
text 文本框 (用户名:<input type='text'><br>)
password 密码框(密码:<input type='password'>)
radio 单选按钮(可点击圆点)(性别:男<input type='radio'>女<input type='radio'>)
checkbox 复选框(可点击打勾)(爱好:吃饭<input type='checkbox'>)
submit 提交按钮(出现提交按钮)【点击提交按钮可以把表单域form里面的表单元素里面的值提交给后台服务器】
reset 重置按钮 把form里面的表单元素值还原默认状态
button 普通按钮 后期结合js使用
file 选择文件按钮 上传文件
2.name【键】:实现单选(单选框和复选框有相同的name)
男<input type='radio' name='sex'>女<input type='radio' name='sex'>
3.value【值】:(用户输入的则不设置值如账号密码框)
自定义如:(请输入:)
文本框可以实现默认文字,
提交按钮可以更改默认文字,
重置按钮可以更改默认文字,
普通按钮可以实现默认文字,
其他可以实现和后台交互
4.checked:checked
实现首次加载时选中
5.maxlength:正整数
规定最大长度
四、label标签
用于绑定一个表单元素,当点击label标签内的文本时,浏览器光标自动跳转到对应表单元素上。
<label for='sex'>男</label>(为表单服务,与id对应)
<input type='radio' name='sex' id='sex'/>
五、select表单元素
实现下拉列表
<select>
<option selected='selectde'(默认选择)>选项1</option>
<option>选项2</option>
</select>
六、textarea表单元素
实现更大框框
<textarea rows='显示行数' cols='一行可以显示多少字'>
</textarea>
七、CSS选择器
选择器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 选择 class=“intro” 的所有元素。 | 1 |
#id | firstname | 选择 id=“firstname” 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 元素。 | 1 |
element,element | div,p | 选择所有
元素和所有
元素。 | 1 |
element element | div p | 选择
元素内部的所有
元素。 | 1 |
element>element | div>p | 选择父元素为
元素的所有
元素。 | 2 |
element+element | div+p | 选择紧接在
元素之后的所有
元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 “en” 开头的所有元素。 | 2 |
:link | a:link | 选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active | a:active | 选择活动链接。 | 1 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 元素的首行。 | 1 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 元素。 | 2 |
:before | p:before | 在每个 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 元素的每个
| 3 |
[attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 元素。 | 3 |
[attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 元素的每个 元素。 | 3 |