HTML&CSS总结1

换行:< br >(空标签)

• Ps:
  在编程过程中会遇到需要空格或者尖括号的时候,而学习完HTML我们发现没有空格标签，这时候就需要编码字符集 。
  & nbsp; 空格
  &lt ;&gt ; 分别代表< 和 >

无序列表

• < ul >< /ul>：
  全称：unorderlist
  子标签：< li >< /li >
• Ps:无序列表常用于编写导航栏。

插入图像< img>

• scr属性:指向图片具体地址。地址有三种分类：
  1.网上url ；
  2.本地绝对路径；
  3.本地相对路径（图片与html文档在同一文件夹）。
• alt属性：若图片格式出错显示alt的内容(图片占位符) 。
• title属性：图片提示符，鼠标放在图片上时小框提示。

超链接< a >

• 全称：anchor 锚

  功能：
• 原始功能：标记位置 < a herf=”#id值”>；
• 超链接: href(hyperText reference超文本引用) 属性指向目标地址 ，需要加上协议（http）。a标签内容可以是文本图片等。新标签页中打开连接加上target=”blank”属性；
• 打电话：< a href=”tel:”> tel属性填所要拨打的电话号码；
• 发邮件：< a href=”mailto:邮件地址”>

表单< form>

• 可向后台发送数据
• method=“发送数据方式 ”
• action=“发送的地址”
• name=“数据名” ，这里的数据名指发送到后台时，所显示的数据名称；
  单选
  举个例子：

<form>
  <label>< input type="radio" name="indoor-outdoor">indoor</label>
  <label>< input type="radio" name="indoor-outdoor">outdoor</label>
</form>

单选时，name的值必须相同。
* 提交按钮< button>标签
* 复选 < checked> 关联复选按钮name值也必须相同
*默认选中 checked属性 可提高用户体验
* select组件:下拉表单

<select name="数据名">
<option>< /option>  option包含value,所以可以不加value  若非得加上,则以value为准
< /select>

容器< div>&< span>

• 使代码模块化
• 便于对模块的操作。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

• 元素的 padding 控制元素内容 content和元素边框 border 之间的距离。
• 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。
• padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。
• 

class（类选择器）&id（id选择器）属性

• 相同：两种属性均在style内部定义
• 不同：
  
  • 定义形式：类选择器加 . 为前缀；id选择器加#为前缀。
  • 优先级不同：
    1.首先说说两者内部优先级。都为：后声明的优先级更高。
    2.两者比较而言 优先级：id选择器>类选择器

in-line style（行内样式）

上文提到优先级，在行内样式优先级高于class和id;
用法：< h1 style=”color: green”>

！important

这是一种覆盖 CSS 的方法，是所有方法中最强大的。
用法：
.pink-text {
color: pink !important;
}
给颜色声明加上关键字。

小小总结优先级：！important>行内样式>id选择器>类选择器。