关于html的总结

燃爆西瓜
296 阅读5分钟

关于html的总结

  • 一 html的基本概念

    • 1网页和网站
    1. 网站内有网页组成
    2. 网页中包含：文字，图片，视频，音频，链接，程序....
    3. 网页的内容是由html技术实现的
    4. 网页的后缀通常是.html
    • 2浏览器和渲染引擎
    1. 常见的浏览器有：谷歌，火狐，欧朋，ie，safari
    2. 而不同的浏览器也有不同的渲染引擎（内核）
    • 3网页的三层结构
    1. 结构层：是html的骨架，是使用html技术实现的，是给网页提供内容的
    2. 样式层：是css样式，是给网页提供样式（布局，美化功能）
    3. 交互层：是使用js来实现的，而js技术是前端程序员最最最需要掌握的技术
    • 4html的开发工具
    1. 推荐使用VS Code工具来开发html 特点：小巧，插件多更方便书写代码
    2. VSC的快捷键： shift + alt + 向下箭头 => 复制上一行
      tab => 向后移动代码
      shift + tab => 向前移动代码
      ! + tab => html基本骨架 !是英文的!
      div.wraper + tab => 生成一个带名字的div
      鼠标中键 + 向下拽 => 同时选中多行
      键盘上的del键 => 删除文件
      F2 => 重命名
      shift + alt + f => 格式化代码
      ctrl + f => 查找内容并替换内容
    • 5 标签 属性 元素
    1. 标签：标签都是使用<>包起来，分单标签和双标签，分男标签，女标签和人妖标签
    2. 标签与标签之间是有关系，分兄弟关系和父子关系
    3. 属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性
    4. 属性也分两类：公有属性，特有属性
    5. 公有属性：class, id, title, style
    6. 元素：标签+属性+标签之间的内容

  • 二 html的骨架

    • 文档声明
    1. HTML5的文档声明告诉浏览器，以什么样的标准来解析我们写的代码

    文档声明.png

    • html元素
    1. html 是一个网页的根元素，只有这一个 htnl元素.png
    1. lang属性：指定网页的语言 zh-CN表示中文 语言.png
    • head元素
    1. head网页的头部：基本上在对网页的设置，都会在head实现
      head.png
    1. title属性：指定网页的标题的 title.png
    1. meta属性：charset="utf-8" 如果不指定，会出现乱码 meta.png
    • body元素
    1. 网页的主要内容都是写在body中的 body.png

  • 三常用标签

    • h系列标签
    1. h1 一级标题
    2. h2 二级级标题
    3. h3 三级标题
    4. h4 四级标题
    5. h5 五级标题
    6. h6 六级标题
      h标签.png h标签展示.png
    • p标签，段落标签
    1. 浏览器会自动适用换行 p标签.png
    • 换行标签br
    1. 强制换行 br标签.png
    1. 单标签: br标签是个单标签
    • 文本格式化

    以下都是是双标签

    1. 加粗 strong 或者 b b标签.png
    1. 效果: b标签效果.png
    1. 倾斜 em 或者 i i标签.png

    效果 :
    i标签效果.png

    1. 删除线 del 或者 s s标签.png

    效果：
    s标签效果.png

    1. 下划线 ins 或者 u u标签.png

    效果：
    u标签效果.png

    • 无语义标签

    以下都是是双标签

    1. div
    2. span 双标签.png
    • 图片标签 img

    一. 属性：

    1. src: 图片的路径（来源）
      img1.png
    1. alt：当图片加载错误时显示的文字
    2. title:当鼠标悬停在图片上显示的文字
    3. width:图片的宽度
    4. height：图片的高度
    5. border:图片的边框 img标签.png

    二. 属性的特点 ：

    1. 属性之间部分先后顺序
    2. 属性名与属性值之间以键值对的形式存在
    3. 属性名与属性值之间以等号分隔 属性值要以引号包裹

  • 路径和连接

    • 路径

    相对路径:

    1. 在同一个文件夹直接找名字
    2. 向上一级 ../
    3. 向下 / 绝对路径
    • 链接标签
    1. 外部链接：链接的是外面的链接如www.baidu.com , 写完整的 协议 域名 网址
    1. 内部链接 a href ="index.html"> 直接写文件名即可
    2. 属性：
    1. href:指定跳转的页面
    2. title：鼠标悬停显示的文字
    3. target: _self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式
    4. #：会阻止页面跳转但是会刷新页面 锚点:
    5. 链接使用#
    6. 目标标签id值与连接#号后面一致
    • 注释与特殊字符
    1. < !--我是注释-->
    2. 编辑器使用Ctrl+/ 快捷键

  • 列表类标签

    1. 无序列表
    2. 有序列表
    3. 有序列表 liebiao.png

  • 表格类标签

    • 标签
    1. 表格
    2. 行
    3. 单元格
    4. 表头 加粗 加黑 自动居中
    5. 表格的标题 写在内部 显示外部 居中
    6. 结构头
    7. 结构体
    8. 结构底

    表格2.png

    • 属性
    1. table table 表格
    2. border:表格的边框 默认的0
    3. width：宽度
    4. cellspacing:单元格与单元格之间的距离
    5. cellspadding：单元格与内容之间的距离
    6. cellspadding：单元格与内容之间的距离
    7. align: left/center/right 注意： 当给表格设置居中整个表格会居中（文字不会居中） 当指定tr 或者td 文字居中
    8. colspan:列合并
    9. rowspan：行合并

  • 表单标签

    • input属性
    1. text：文本框
    2. password：密码框
    3. radio：单选按钮
    4. checkbox：复选框
    5. button：普通按钮
    6. reset：重置按钮 需要配合form表单才有作用
    7. submit：提交按钮
    8. image 属性 src
    9. file 文件按钮 上传图片
      form表单.png
    • type属性

    type属性.png

    • name属性
    1. 发送后台......
    2. name的标识 对于单选按钮 只能选择一个

    value：文本框默认显示的文字

    checked：默认选中 可以写一个属性 也可以 属性名=属性值

    • label用法

    lab.png

    文本域：textarea：用户留言

    下拉列表:
    select.png

    下拉列表的默认选中： 苹果
    苹果.png

    • form表单
    1. 主要的作用：是收集用户信息 发送后台
    2. action： 提交后台的地址
    3. method="get/post" 提交（传输）后台的方式
    4. name =“a” 告诉服务器 由哪个表单提交过来的 formzy.jpg
avatar
文章
阅读
粉丝