HTML基础学习（二）

3.2

继续上一篇的HTML基础，在几年前制作网页是使用表格标签布局，现在很少使用了，基本是使用div布局

• 表格：显示表格数据

<table>
    <tr>
       <th></th><!--文字居中加粗变大，起到表头作用-->
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
    </tr>
</table>

• 常用属性：

border: 给表格添加边框

width:给表格设置宽度

height: 给表格设置高

cellspacing：规定单元格之间的空白。

cellpadding：规定单元边沿与其内容之间的空白。

• 表格中的其它标签：

  <!-- <th></th>  起到表头的作用
      <caption></caption> 给表格设置标题
      <thead></thead>   用来存放当前列的表头
      <tbody></tbody>  一般用来存放页面中的主体数据
      <tfoot></tfoot>   用于设置表格的底部部分（一般情况不会出现  ）-->  

• 表单：用于收集表单元素中填写的信息，现在经常用于注册登录填写，搜索框之类
• Input系列:由type属性决定元素有显示内容

1. type = text:文本框(设置value属性可以给文本框设置默认值)
2. type = password：密码框(设置value属性可以给文本框设置默认值)
3. type = hidden:隐藏域(不常用)
4. type = radio:单选框(设置checked属性可以设置默认选中项,通过设置多个单选框的name属性来让他们成为一个组，形成互斥效果)
5. type = checkbox:多选框(设置checked属性可以设置默认选中项)
6. type = button:按钮(设置value属性可以设置按钮的默认值)
7. type = reset:重置(设置value属性可以设置按钮的默认值)
8. type = image:图片按钮(设置src属性可以设置图片按钮的图片)
9. type = submit:提交(设置value属性可以设置按钮的默认值)

• Select：下拉框
• Option：设置下拉框选项，需要和select配合使用
• 属性selected设置下拉框默认选项。

<select>
    <option>选项1</option>
    <option>选项2</option>
</select>

• Textarea：文本域

  <textarea></teatarea>

• Form标签：用于管理所有的变单元素（控件）

  <form>
          表单元素
  </form>

• HTML的空格合并现象：在html中内容中的同一位置不管写多小个空格、换行、缩进html在解析的时候都会按照一个空格来解析。如果需要使用，则需代码书写规范。
• 特殊字符：

  <!-- &nbsp;空格
         &lt;小于号
         &gt;大于号
         &copy;版权
         &amp:和号
         &yen:人民币
         &reg:注册商标
         &deg:摄氏度
         &plusmn:正负号
         &times:乘号
         &divide:除号
         &sup2:上标2
         &sup3:上标3-->

• SEO：搜索引擎优化，可以提高页面在搜索工具中的排名。
• 搜索引擎：在网络环境中，进行信息收集，然后提供用户搜索功能的平台
• 常见做法：花钱买排名，广发外链，标签的语义化
• 判断页面语义化程度: 让页面“裸奔”（去掉css）
• 核心思想: 在合适的地方用合适的标签，让各个标签发挥其作用。
• 意义:

1. 对搜索引擎的友好
2. 提升用户体验
3. 利于代码的可读、维护、提高开发效率

• 还有两个例外的标签，他们是没有语义的，常用来页面布局样式排版：

<div></div><!--块级元素-->

• 特点：

1. 在页面上单独占一行
2. 如果不设置宽页面上默认占一行
3. 通常作为容器布局的时候使用

   <span></span><!--行内元素-->

• 特点：

1. 一行可以放多个
2. 显示大小由内容来决定

HTML的基础大概就是这些，掌握好了之后学习后面更难的就会轻松很多。下面是关于CSS基础的一些知识点。

• CSS的定义：层叠样式表（级联样式表） Cascading Style Sheets  ，是用来美化页面的。
• CSS的书写位置：

1. 内嵌式（内联）：是写在页面内部，处于head标签里面，在style标签里面书写。
2. 外联式（外链）： 写在外部的css样式表，在HTML页面使用link标签调用，link标签书写在head标签里面。<link rel=’stylesheet’ href=’外联式.css’>
3. 行内式：写在元素的style属性中。

• 语法结构：

  选择器 {属性：值; ...}

• 每个属性都有对应的值，这种形式称之为：键值对
• Font属性：字体设置
• font-style：控制字体是否斜体
• 可选属性：

1. normal        正常
2. italic            斜体
3. oblique       斜体
4. font-weight：控制字体粗细

• 可选赋值：

1. normal        正常
2. bold            加粗
3. bolder         更粗
4. lighter        细体
5. 100 - 900(400相当于normal，700相当于bold)

注意：bolder和lighter会受到字体的限制，一般中文到达bold就是最大，并且一般中文没有细体

• font-size：控制字体大小
• 赋值方式：数字+长度单位（px）
• font-family：设置字体
• 可选赋值

1. Microsoft yahei
2. 宋体
3. ...

• font连写(font: font-weight、font-style、font-size、font-family)

特点：font-weight和font-style可以省略和调换位置

font-size和font-family只能固定位置，并且不能省略

• color属性：字体颜色设置
• 颜色赋值方式：

/*颜色单词：color:red;
十六进制表示法：color: #0094ff;
格式：# 两位红色 两位绿色 两位蓝色
rgb表示法：color:rgb(255,255,0);
格式：
rgb(红色比例，绿色比例，蓝色比例)
比例如果是数字，最小为0，最大为255
比例如果是百分比，最小为0%，最大为100%*/

• Width和height：分别用来控制元素的宽高

今天就先这些啦~明天继续