HTML学习笔记

HTML学习笔记分享！内容包含表格组成属性、表单控件、CSS样式、CSS选择器、显示模式等内容。知识点详细有重点，有助于HTML的学习，感兴趣的同学请点赞收藏呀！

HTML02

• 表格 table
  • 组成
    • table
      • 里面只能放表格内部的标签 不放 div 之类的
    • 行 tr
    • 单元格 td
  • 属性
    • 宽度 和 高度 width height
    • 边框 border
    • cellpadding 单元格内 内容距离边框的距离 padding
      • 默认为2 像素
    • cellspacing 单元格之间的距离 margin
      • 默认为1 像素
    • align=center
      • 表格文本对齐
        • <tr align = "center">
      • 表格页面对齐（基本不用）
        • <table align="center">
    • <table border = "1px" width="500px" align="center" cellpadding="10" cellspacing="10">
  • 表头单元格
    • th
      • 一般再表格的第一行 或者 第一列
      • 文字会加粗 而且会居中显示
  • 表格标题
    • caption
      • 位置写到table标签内部 下一行
      • <caption>我是表格标题</caption>
  • 合并单元格
    • 跨行
      • rowspan
    • 跨列
      • colspan
    • 步骤
      • 1.确定跨行还是跨列
      • 2. 根据上而下 左而右 选择目标单元格
      • 3.删除多余的单元格
• 表单
  • 目的： 收集用户信息 可以和用户交互，由三部分组成，表单域，表单控件，提示信息
  • 表单域
    • form
      • action
        • 用于指定接收并处理表单数据的服务器程序的url地址
        • 把表单信息提交到xxx位置页面
      • method
        • 用于设置表单数据的提交方式
        • get
        • post
      • name
        • 用于指定表单的名称，以区分同一个页面中的多个表单
    • 范围区域
  • 表单控件
    • input (单）
      • text
        • 单行文本
      • password
        • 密码框
      • radio
        • 单选按钮
      • checkbox
        • 复选框
      • image
        • 图像提交
      • file
        • 文件域
          • 上传文件的
      • submit
        • 提交
      • reset
        • 重置
    • label for
      • （理解）点击label内的文字，光标可以定位到 id 的表单内部
        • 增强用户体验
    • select
      • 下拉列表
      • option 选项
    • textarea
      • 文本域 多行文本
        • 输入文字内容
    • button
      • 普通按钮
    • name
      • 属性 名字 用来查找表单的
    • value
      • 属性 值 显示再表单内 后面 会把他放到后台里面
  • 提示信息
• CSS
  • 位置分类
    • 行内样式表
      • <p style="color:red;">内容</p>
      • 少
    • 内部样式表
      • head 内部
      • 多
    • 外部样式表
      • link
      • 真正实现了 结构和样式相分离 H 和 C
      • 最多
  • CSS 样式规则
    • 选择器{ 属性： 值; 属性： 值;}
  • 字体样式
    • font-size
      • 字体大小
        • 别忘了加单位 px
    • font-family
      • 字体
        • 1. 现在网页中普遍使用14px+。
        • 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
        • 3. 各种字体之间必须使用英文状态下的逗号隔开。
        • 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
        • 5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
        • 6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
        • 7.一般写法会写多个字体，如果浏览器对第一个字体不支持，就会推到下一个，都不支持的话，就会使用默认字体
    • font-weight
      • 字体加粗
        • normal 正常的 == 400
        • bold 加粗的 == 700
        • 400还是700都是不用带单位的，推荐使用数字而不是normal，bold
    • font-style
      • 字体样式倾斜
        • normal 正常
        • italic 倾斜的
        • oblique 也是斜体
          • italic和oblique都是让字体具有倾斜的效果，并不是所有的字体都有倾斜效果。当字体没有italic属性时，可以使用oblique来替代，oblique是使字体向右倾斜
    • 综合连写
      • 有顺序关系 不能调动 必须有 font-size 和 font-family，这两个不能省略，否则连写没有作用
      • 选择器{font: font-style font-weight font-size/line-height font-family;}
        • 字体是否倾斜，字体是否加粗，大小/行高，字体
  • 文本样式
    • color
      • 十六进制
        • #f00
        • #000
        • #fff
    • line-height
      • 行高，行间距
        • 行与行之间的距离
        • 单位一般用px
        • 只是建议，实际情况按具体来定，行距比字号大7.8像素左右就可以了
    • text-align
      • 不是盒子居中，而是盒子里面的内容在盒子中水平对齐
      • 文本水平居中对齐
      • text-align:center,left,right;
    • text-indent
      • 段落首行缩进2个字 text-indent：2em； 1em就是一个字的距离
    • text-decoration
      • none
      • underline
  • 文本格式化标签样式
    • em 和 i 倾斜
      • 取消倾斜
        • font-style：normal
      • 添加倾斜
        • font-style：italic
    • strong 和 b
      • 取消加粗
        • font-weight: normal 400
      • 添加加粗
        • font-weight: bold 700
    • u ins
      • 删除下划线
        • text-decoration:none;
      • 添加下划线
        • text-decoration:underline;
    • s 和 del
      • 删除删除线
        • text-decoration:none;
      • 添加删除线
        • text-decoration:line-through
  • CSS 选择器
    • 基本选择器
      • 标签选择器
        • 可以选择某一类标签 比如 所有的div 标签
        • div span table input
      • 类选择器
        • 可以选择一个或者多个标签
        • .nav
          • 类名命名
            • 1. 不能纯数字
            • 2. 不能数字开头
            • 3. 尽量英文字母 + 数字
            • 4. .div .p .table 错误的 不能以标签命名
            • 自己起的名字
        • 多类名选择器
      • ID 选择器
        • # 定义 id 调用
      • id选择器和class选择器 区别
        • 使用次数上
          • class 多次重复使用 （最常用）
          • id 只能使用一次
        • 好比class是人的名字，可以重复，但是id是身份证号，独一无二
        • 不存在相互排斥的情况，可以混合使用
      • 通配符选择器
        • * 所有标签都会选择 实际开发的时候使用较少
    • 复合选择器
      • 后代选择器
        • 用空格隔开 选取子孙后代的
          • 这个使用的比较多
      • 子代选择器
        • 用 > 隔开 选取 亲儿子
          • 少用
      • 交集选择器
        • 标签连写 div.one
        • div#two ==》 <div id = "two"></div>
        • 用的相对来说比较少，不太建议使用。
      • 并集选择器
        • 用 逗号隔开 集体声明 相同样式的时候
        • div, p ,span, .current { color: red;}
    • 链接伪类选择器
      • ：
      • a：link
        • /* 未访问的链接 */
      • a：visited
        • /* 已访问的链接 */
      • a:hover
        • /* 鼠标移动到链接上 */
          • 不写在link和visited之后没意义
      • a:active
        • /* 选定的链接 */
      • a{} a:hover {}
      • 顺序（尽量不要变）：link，visited，hover，active
  • 显示模式
    • 块级元素block-level
      • block
      • 有高度和宽度
        • 一行只能放一个
          • 霸道
      • 特点：
      • （1）总是从新行开始
      • （2）高度，行高、外边距以及内边距都可以控制。
      • （3）宽度默认是容器的100%
      • （4）可以容纳内联元素和其他块元素。
    • 行内元素inline-level
      • inline
      • 一行可以放多个
        • 没有宽度和高度
      • 特点：
      • （1）和相邻行内元素在一行上。
      • （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
      • （3）默认宽度就是它本身内容的宽度。
      • （4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）
    • 行内块元素
      • inline-block
      • 有宽度和高度
        • 一行可以放多个
    • 转换
      • display
        • display：inline；
        • display：block；
        • display：inline-block；