标签<span>
2017-01-21 本文已影响28人
小小的叶子随枫飘落
1、span是一个in-line元素，翻译为内联元素。它的特点是不会独占一行。它和块（block）级元素是相对的，块级元素是独占一行的。比如你在网页中的某个位置加入一些文字，最好用span将文字包含起来，这样你在想取到这段文字的时候，就可以先取到该span,然后再取span.innerhtml来得到文字
45B29721-5969-4AFE-B3E1-03DEB0E20529.png
2、HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>
</body>
</html>
3、<input> 元素的输入类型
<input type="text"> 定义供文本输入的单行输入字段
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮
<input type="radio"> 定义单选按钮
<input type="checkbox"> 定义复选框
<input type="button> 定义按钮
<input type="number"> 用于应该包含数字值的输入字段
表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
4、
FD58ABFB-A670-4417-AC11-9B015B1194A8.png
5、CSS 选择器
- 1、 CSS 后代选择器:在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
- 2、CSS 子元素选择器：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
h1 > strong {color:red;}
- 3、CSS 相邻兄弟选择器:如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）
h1 + p {margin-top:50px;}
- 4、id 选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
#red {color:red;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
- 5、CSS 类选择器：在 CSS 中，类选择器以一个点号显示
.center {text-align: center}
- 6、属性选择器：对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
