html和css基础知识

1.HTML 文本格化式标签

• <b> - 粗体
• <strong> - 重要文本也是粗体
• <i> - 斜体
• <em> - 强调文本-斜体
• <mark> - 标记文本
• <small> - 较小的文本
• <del> - 删除线
• <ins> - 插入线
• <sub> - 下标
• <sup> - 上标
• <p> - 段落标签
• <h> -标题标签,h1-h6
• <blockquote> -长引用

• <q> -段引用,通常浏览器会加上引号    
• <br> - 换行
• <hr> - 水平线

2.元素,通过在页面中的展示以及对于元素特性,可以分为三大类:

    块元素(block element):
      特点:
                1.块元素具有布局特点,一般常用页面的整体布局
                2.块元素独占(其父元素)页面的一行
                3.块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)
                4.块元素可以设置宽,高  默认的宽度是其父元素的宽度
                5.块元素默认高度是由内容决定的

    行内元素(inline element):
       特点:
                1.正常情况下,行内元素是不会换行的
                2.行内元素会在一行排不下时进行换行
                3.行内元素不能设置宽 高  行内元素的宽和高都是由其内容决定的
                4.行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素

   行内块元素(inline-block element):
            特点:
                1.行内块元素不会独占一行,在一行排列
                2.可以设置宽高(默认是内容的宽 高)

3.列表标签:

有序列表:使用ol标签来创建,列表中每一项通过li标签代表

无序列表:使用ul标签来创建,列表中每一项通过li标签代表 

 定义列表：使用dl标签来创建的
            使用dt来表示定义的内容，小标题,使用dd来对小标题解释说明

 注意：ol和ul创建列表后，他们的子项应该是li元素，而不是其他的元素,ul和ol,li都是块级元素,li元素中是可以嵌套任何类型的元素的.

4.HTML 超链接（a）

您可以单击一个链接并跳转到另一个文档。

当您将鼠标移到链接上时，鼠标箭头将变成一只小手。

注释: 链接不必是文本。链接可以是图像或任何其他 HTML 元素！

HTML <a> 标签定义了一个超链接。它使用以下语法：

<a href="url">link text</a>

最最重要的是 <a> 标签的  href 属性，表示链接的目标。

• 使用 <a> 元素定义链接
• 使用 href 属性定义链接地址
• 使用 target 属性定义打开链接文档的位置
• 使用 <img> 元素 (内部 <a>) 将图像用作链接
• 使用 href 属性中的 mailto: 创建一个链接，打开用户的电子邮件程序

target 属性指定打开链接文档的位置。target 属性可以具有以下值之一：

• _self - 默认，在单击时在同一窗口/选项卡中打开文档
• _blank - 在新窗口或选项卡中打开文档
• _parent - 在父级框架中打开文档
• _top - 在整个窗口中打开文档

5.href和src的区别

相同点:href和src都是指向外部资源地址或者本地资源地址
不同点：
 href属性:

 1.通过该属性去关联另一份外部资源文件
 2.如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源，
 3.如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染                          
 src属性：
 1.通过该属性去访问到对应的外部资源，并替换掉该标签的内容
 2. src属性肯定是会下载对应路劲的资源的
 3.src的下载不是并行下载，在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后，才会继续渲染页面后续的内容
 4.src会阻塞页面的渲染

6.HTML 表格

表格由 <table> 标签来定义。

每个表格均有若干行，由 <tr> 标签定义

每个表头由 <th> 标签定义。

每行被分割为若干单元格，由 <td> 标签定义。

要向表中添加边框，请使用 border 属性

设置表格边框是折叠为单一边框还是分开的，使用 border-collapse 属性

填充指定单元格内容与其边框之间的间距。

如果不指定填充，则将显示不带填充的表格单元格。

要设置填充，请使用 padding 属性

默认情况下，表格标题为粗体且居中。

要左对齐表格标题，请使用  text-align 属性

边框间距指定单元格之间的间距。

要设置表格的边框间距，请使用  border-spacing 属性

要使单元格跨越多个列，请使用 colspan 属性

要使单元格跨多行，请使用 rowspan 属性

要向表中添加标题，请使用 <caption> 标签(注意: <caption> 标签必须紧跟在 <table> 之后插入。)

总结:

• 使用 HTML <table> 元素定义表
• 使用 HTML <tr> 元素定义表行
• 使用 HTML <td> 元素定义表数据
• 使用 HTML <th> 元素定义表格标题
• 使用 HTML <caption> 元素定义表格标题
• 使用 CSS border 属性定义边框
• 使用 CSS border-collapse 属性折叠单元格边框
• 使用 CSS padding 属性向单元格添加填充
• 使用 CSS text-align 属性对齐单元格文本
• 使用 CSS border-spacing 属性设置单元格之间的间距
• 使用 colspan 属性使单元格跨多个列
• 使用 rowspan 属性使单元格跨多行
• 使用 id 属性唯一地定义一个表

总结:不常用的元素,属性在需要应用的时候不熟练,印象也不深刻,需要花点时间记记,对于表格,表单,过渡属性和动画属性需要做点练习巩固,增加记忆.