HTML龟速起步

用户8212279906942
241 阅读4分钟

HTML总结

一.html的基础概念

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

二.HTML的基本骨架

  1. 文档声明
    • HTML5的文档声明
    <!DOCTYPE html>
    • 用意是告诉浏览器，以什么样的标准解析我们写的代码
  2. html元素
    • 是一个网页的根元素，只有这一个
    • lang属性：指定网页的语言 zh-CN表示中文 <html lang="zh-CN">
  3. head元素
    • 网页的头部：基本上在对网页的设计 都会在head中实现
    • title属性：指定网页的标题的 <title></title>
    • meta属性：charset=“htf-8” 如果不指定，会出现乱码 <meta charset="UTF-8">
  4. boday元素
    • 网页的主要内容都是在boday中写的

三.常用标签

  1. h系列-标签
    • h1->h6逐级递减
<h1 >这是标题 1</h1>
<h2 >这是标题 2</h2>
<h3 >这是标题 3</h3>
<h4 >这是标题 4</h4>
<h5 >这是标题 5</h5>
<h6 >这是标题 6</h6>

  1. p标签，段落标签

    • 浏览器会自动强制换行

  2. 换行标签

    • 强制换行
    • 单标签

  3. 文本格式化

    • 加粗
      • <strong></strong>或者<b></b>
    • 倾斜
      • <em> </em>或者<i></i>
    • 删除线
      • <del></del>或者<s></s>
    • 下划线
      • <ins></ins>或者<u></u>

  4. 无语以标签

    • div
    • span

  5. 图片标签

    • 属性
      • src:图片的路径（来源)
      • alt:当图片加载错误时显示的文字
      • title:当鼠标悬停在图片上显示的文字
      • width:图片的宽度
      • height:图片的高度
      • border:图片的边框 <img src="" alt="" width="" height="" style="border: 1px;" title="">
    • 属性的特点
      • 属性之间部分先后顺序
      • 属性名与属性值之间以键值对的形式存在
      • 属性名与属性值之间以等号分隔属性值要以引号包裹;

  6. 路径和链接

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

四.列表类标签

  1. 无序列表 <ul><li></li></ul>

  2. 有序列表 <ol><li></li></ol>

  3. 自定义列表 <dl><dt></dt><dd></dd></dl>

五.表格类标签

  1. 标签
    • <table></table>表格
    • <tr></tr>行
    • <td></td>单元格
    • <th></th>表头 加粗 加黑 自动居中
    • <caption></caption>表格的标题 写在内部 显示外部 居中
    • <thead></thead>结构头
    • <tbody></tbody>结构体
    • <tfoot> </tfoot>结构底
  2. 属性
    • border:表格的边框 默认的O
    • width:宽度
    • height:高度
    • cellspacing:单元格与单元格之间的距离
    • cellspadding:单元格与内容之间的距离
    • oalign: left/center/right
      • 注意:当给表格设置居中整个表格会居中(文字不会居中)当指定t 或者td 文字居中
    • colspan:列合并
    • rowspan:行合并

六.表单类标签

  1. input属性
    • text:文本框
    • password:密码框
    • radio:单选按钮
    • checkbox:复选框
    • button:普通按钮
    • reset:重置按钮 需要配合form表单才有作用
    • submit:提交按钮
    • image属性src
    • file文件按钮上传图片
  2. 那么属性
    • 发送后台
    • name的标识 对于单选按钮 只能选一个
  3. value：文本框默认显示文字
  4. checked：默认选中
    • 可以写一个属性 也可以属性名=属性值
  5. label用法
    • <label>请输入<input type="text"> <input type="text"></label>
    • <label for="a">请输入</label> <input type= "text" id="a">
  6. 文本域：textarea：用户留言
  7. 下拉列表
   <select>
       <option>请选择</option>
       <option >苹果</option>
       <option selected>香蕉</option>
       <option>橘子</option>
   </select>
  1. 下拉列表的默认选中：selected
  2. form表单
    • 主要的作用：是收集用户信息 发送后台
    • action：提交后台的地址
    • method=“get/post” 提交（传输）后台的方式
    • name= “a” 告诉服务器 由那个表单提交过来的
avatar
文章
阅读
粉丝