HTML&CSS

HTML

HTML标签

标签的格式

1. 标签名大小写不敏感
2. 标签拥有自己的属性

• 基本属性
• 事件属性

3. 标签又分为

• 单标签<标签名/>
• 双标签<标签名>封装的数据</标签名>

font标签

字体标签

• color 表示颜色
• face 表示字体
• size 表示大小

特殊字符

• <：<
• >：>
• 空格： 

标题标签

h1~h6 都是标题标签
h1 最大
h6 最小
align 对齐属性

• left 左对齐（默认）
• center 居中
• right 右对齐

超链接

a 标签

• href 属性表示跳转目标地址
• target 属性表示哪个目标进行跳转
  • _self 当前页面（默认）
  • _blank 新窗口

列表标签

ul 表示无序列表（unordered lists）
ol 表示有序列表（ordered lists）

• type 属性可以修改前面的列表符号
• li 表示列表项（list item）

图像标签

img 标签用于显示图片

• src 属性用于指定图片路径
• width 用于指定图片的显示宽度
• height 用于指定图片的显示高度
• border 用于指定图片边框的像素大小
• alt 用于指定当图片路径找不到时用来代替显示的文本内容

表格标签

b 加粗标签

table 表格标签

• border 设置表格的边框
• width 设置表格的宽度
• height 设置表格的高度
• align 设置表格相对于页面的对齐方式
• cellspacing 设置表格的单元格间距

tr 行标签
th 表头标签
td 单元格标签

• align 设置单元格内文本对齐方式

表格跨行跨列

rowspan 设置单元格跨行合并
colspan 设置单元格跨列合并

iframe标签

搭配 a 标签的用法：

1. 在 iframe 的标签里设置一个 name 属性为其设置名称
2. 在 a 标签的 target 属性设置跳转目标为 iframe 的 name 属性值

表单标签

form 标签就是表单标签

• input type=

  • text 文本输入框
    • value 显示默认值
  • password 密码输入框
    • value 密码默认值
  • radio 单选框
    • name 对单选框分组
    • checked 设置选中状态
  • checkbox 复选框
    • checked 设置选中状态
  • file 文件上传域
  • reset 重置按钮
    • value 修改按钮上的文本
  • submit 提交按钮
    • value 修改按钮上的文本

• select 下拉选项标签

  • option 下拉选项中的选项标签
    • selected 设置选中状态

• textarea 多行文本输入框

  • rows 属性设置输入框的行数
  • cols 属性设置输入框单行字符数
  • 标签中间的内容为默认值

表单标签

form 标签就是表单标签

• action 属性值设置提交服务器地址
• method 属性值设置提交的方式GET（默认值）或POST

表单提交的时候，数据没有发送给服务器的三种情况：

1. 表单项中没有name属性
2. 单选、复选、下拉列表的option标签没有加value属性
3. 表单项不在form标签中

GET请求的特点是：

• 提交时浏览器地址栏中的地址是：action属性值[?请求参数]
• 请求参数格式：name=value
• 不安全
• 有数据长度的限制

POST请求的特定是：

• 浏览器地址栏中只有action属性值
• 相对于GET请求要安全
• 理论上没有数据长度的限制

其他标签

div标签 默认独占一行
span标签 长度是封装数据的长度
p段落标签 默认会在段落的上下方空出一行（如果有就不在空）

---

CSS

语法格式

选择器 {
    属性:值;
    key:value;
    /* CSS 的注释格式 */
}

CSS与HTM结合

1. 在标签的style属性上设置key: value value...;修改标签的样式
   代码庞大
   可读性差
   没有复用性可言
2. 在head标签中使用style标签定义所需的CSS样式
   只能在同一页面复用代码，不能在多个页面中复用
3. 将CSS样式写成一个单独的css文件，在head标签中使用link标签引入
   <link real="stylesheet" type="text/css" href="name.css">

选择器

• 标签名选择器

标签名 {
    属性: 值;
}

• id选择器
  在标签中增加id属性，在css中通过id赋予样式

#id号 {
    属性: 值;
}

• 类选择器
  在标签中增加class属性，在css中通过class赋予样式

.类名 {
    属性: 值;
}

• 组合选择器
  可一次性给多个选择器选择的对象赋予样式

选择器1, 选择器2, ……, 选择器n {
    属性: 值;
}

常用样式

div {
    /* 字体颜色 */
    color: brown;
    /* 宽度 */
     300px;
    /* 高度 */
    height: 300px;
    /* 背景颜色 */
    background-color: gray;
    /* 字体大小 */
    font-size: 30px;
    /* 边框 */
    border: 8px solid green;
    /* DIV 居中 */
    margin-left: auto;
    margin-right: auto;
    /* 文本居中 */
    text-align: center;
}

a {
    /* 超链接去下划线 */
    text-decoration: none;
}

/* 表格细线 */
table {
    border: 1px solid black;    /* 设置边框 */
    border-collapse: collapse;  /* 将边框合并 */
}
td, th {
    border: 1px solid black;    /* 设置边框 */
}

ul {
    /* 列表去除修饰 */
    list-style: none;
}