HTML和CSS

最新推荐文章于 2023-05-26 18:15:48 发布

高斯林关门弟子

最新推荐文章于 2023-05-26 18:15:48 发布

阅读量48

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/xq_27/article/details/127593756

版权

HTML和CSS
- HTML概述
  - 网页三大组件
    - HTML：搭建网页结构
      - 概念：Hyper Text Markup Language 超文本标记语言
        用来做网页，不但运行在电脑上，也可以运行在移动客户端
        超文本：比普通文本功能更强大
        标记语言：由各种标记组成
    - CSS：用于网页美化
    - JavaScript：运行在网页上脚本语言
  - 网页的基本结构
    - 根元素
      - html
    - 头部
      - head
        <meta charset="utf-8"> 字符集
        <title>网页标题</title>
    - 主体
      - body
        写网页的地方
  - 执行方式
    - 保存在服务器端
    - 运行在浏览器端
  - 分类
    - 是否有主体
      - 1. 有主体的标签，如：h1 a table
      - 2. 没有主体的标签，如：hr br img，最好是加上结束标记 /，结束标记不是必须的
    - 是否换行
      - 1. 自带换行功能标签：块级标签 h1
      - 2. 没有换行功能标签：内联标签 font img a span
- 文本标签
  - h1-h6
    - 1级标题到6级标题，1级最大，6级最小，文本加粗
  - p
    - 分段标签
  - hr
    - 水平线
  - br
    - 换行
  - b
    - 加粗
  - i
    - 斜体
  - ol-li
    - 有序列表
      - type属性
        1 数字
        a A 字母编号
        i I 罗马数字编号
  - ul-li
    - 无序列表
      - type属性
        disc 表示实心圆
        circle 空心圆
        square 正方形
  - 与文本相关的CSS样式
    - color: 颜色
    - font-size: 大小
    - font-family: 字体
    - font-style：斜体
    - font-weight：加粗
  - 实体字符(特殊字符)
    - 以&开头，以分号结尾
  - 容器标签
    - span
      - 内联标签，包含其它的标签，做为一个容器使用，不带换行功能
    - div
      - 块级标签，做为容器使用，自带换行的功能，一般用于大的范围布局
- 图像标签
  - img
    - src：指定图片地址，也可以链接其它服务器地址
    - width: 指定图片宽度，如果只设置宽度，高度会等比例缩放
    - height：指定图片高度
    - title：鼠标移上去显示文字
    - alt：如果图片丢失，显示的替代文字
- 超链接标签a
  - href属性
    - 指定要跳转的地址，用户点击以后跳转
    - 如果地址以#开头，后面指定锚点的名字
  - name属性
    - 指定锚点，给当前位置起名
  - target属性
    - 指定打开方式
    - _self 默认取值在当前窗口中打开
    - _blank 在新的窗口中打开网页
- 表格table
  - 属性
    - width：指定表格宽度
    - border：外边框的粗细
  - 子元素
    - caption标签：表格的标题
    - tr标签：表示一行 (table row)
    - th标签：表格列标题(通常指第一行)，自动加粗和居中 (table head)
    - td标签：普通的单元格
      - rowspan 跨几行
      - colspan 跨几列
  - 结构相关
    - thead
      - 表格头部
    - tbody
      - 表格主体：注，无论源代码中是否存在tbody，浏览器都会生成tbody这个元素
    - tfoot
      - 表格脚部
- 表单元素form
  - action
    - 提交给服务器地址
  - method
    - 提交方式
      - GET
        默认是这种方式 ? 分隔地址和参数多个参数之间使用&分隔。参数会显示在地址栏上。
      - POST
        参数在地址栏上不可见，相对更加安全
  - 表单子元素
    - input
      - type
        text：文本框，默认值
        password: 密码框
        submit：提交按钮
        email：邮箱地址，本身有验证功能
        radio：单选框，名字相同的元素只能选中一个
        value 的值做为选中这一项的值
        checked 默认选中一项，后面会覆盖前面
        checkbox: 复选框，同名的元素可以选中多个
        date: 日历选择框
        file：文件选择框(上传文件)
        reset：将整个表单的数据还原初始阶段
      - name：是提交给服务器的名字，必须要有，如果没有这个参数就没有名字，无法提交
      - placeholder：没有数据时提示信息
    - select 下拉列表
      - 其中每个选项是option
        selected 默认选中哪一项
    - textarea(多行文本域)
      - rows：指定行数
      - cols：指定列数
- CSS
  - CSS: Cascading Style Sheet 层叠样式表
    - 用于网页美化
  - 存放位置
    - 行内样式：只对一行起作用
      - 使用style属性
      - style="color:grey;font-size: 16px;"
    - 内部样式：在一个文件中起作用
      - 使用style标签
      - <style> /* css中注释与Java中多行注释一样的 */ /* 选择器：标签选择器，选中所有caption元素 */ caption { font-size: 30px; /* 外边距的底部 */ margin-bottom: 10px; } </style>
    - 外部样式：样式写在css文件中
      - 使用的时候需要link标签导入
      - <link href="css/table.css" rel="stylesheet"/>
  - 语法规则
  - 三种基本选择器
    - 标签
      - 标签名字
    - 类
      - .类名
    - ID
      - #id
    - 优先级： ID > 类 > 标签
  - CSS文本样式