html与css基础学习总结-原创手记-慕课网

我不熟悉的html与css
1、强调： <em></em> 斜体； <strong></strong> 粗体；
2、引用： <q>短句</q> ; <blockquote>长句</blockquote> （原句的双引号都要去掉，此标签会自动生成）
3、换行：<br /> ——空标签，不需有结束，类似还有图片<img />,添加水平横线的<hr />
4、地址：<address></address> （显示为斜体字）
5、文字中的代码语言：<code> 短代码</code> ; <pre>长代码<pre>;
6、无排序列表：<ul><li></li></ul>
7、有排序列表：<ol><li></li></ol>
8、表格

<table summary="摘要">
<caption>标题</caption>
<tbody>
    <tr>
        <th>表头</th>
    </tr>
    <tr>
        <td>单元格</td>
    </tr>
</tbody>
</table>

其中，摘要不会显示在浏览器，只是为了增加可读性，<tbody>控制表格加载完以后再显示；
9、a标签

<a title="鼠标滑过显示的文本" href="#"> </a>

控制文本颜色不变可以加样式 color:#000;
新窗口打开：target="_blank";
发送邮件：href="mailto:收件人?cc=抄送人&bcc=密送人&subject=主题&body=内容"——点击链接会直接打开邮件应用，并填好相应信息，多个收件人用“；”分隔；
10、注释语句
html： 
css：/*注释语句*/
11、<textarea></textarea>——文本域，支持多行；
12、input框包含以下几种类型：

type="text"   /*文本*/

type="password"    /*密码*/

type="submit"    /*表单提交按钮*/

type="reset"    /*表单重置按钮*/

type="radio"  /*单选，同一组的单选按钮，name取值一定要一致*/

type="checkbox"  /*多选*/

13、下拉框选项<select></select>

<select>
<option value="提交值">显示值</option>
</select>

选中状态：selected="selected"；
在<select>标签中设置multiple="multiple"属性，就可以实现多选功能（在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项）
14、label标签<label></label>
说明：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。
就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

<label for="控件id名称"></label>   /*标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同*/

例如：

<label for="male">男</label>
<input type="radio" name="gender" id="male" />

15、CSS （优先级：内联式>嵌入式>外部式）

选择器{属性：值}

嵌入式：

选择器{属性：值}       /*例如：h1、span*/

.类选择器{属性：值}       /*class的值*/

#id选择器{属性：值}       /*id的值*/

tips：后两个的区别在于：id选择器只能用一次，而类选择器可以被多次用
16、CSS不同写法的含义
①子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素；例如：

.food>li{border:1px solid red;}

②包含选择器，即加入空格,用于选择指定标签元素下的后辈元素；例如：

.food li{border:1px solid red;}

即：>作用于元素的第一代后代，空格作用于元素的所有后代。
③通用选择器，是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

*{color:red;}

④伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式

a:hover{}

⑤分组选择符，当你想为html中多个标签元素设置同一个样式时，可以使用（，）连接多个标签，为其设置同一种样式