Html学习

web前端三大核心技术

HTML:负责网页的架构（超文本标记语言）

CSS：负责网页的样式、美化

JS：负责网页行为

HTML

html骨架如下

html注释

• 作用：描述的内容不会被浏览器执行

• 说明：解析程序给程序员看

• 快捷键：ctrl+/ 快捷生成注释

• 测试点：前端页面上线前要检查注释

标签

• 标题 h1 - h6

  • 说明：h1最大，h6最小

  • 实例：

    <h1>
        我是标题h1
    </h1>
    <h6>
        我是标题h6
    </h6>

  段落标签 p

  特点：语义化、独占一块(换行)

  超链接a

  • 说明点击文本跳转到指定页面

  • 语法：<a href=''百度一下，你就知道'' target = "_bland">文本</a>

  • target属性不是 _bland, _parent , _search, _self , _top的其中一个 默认为 _bland 窗口打开方式

  图片标签

  测试点：必须有title属性(悬停和未加载显示)

  标签的属性如下：

  • src：图片路径

  • title：光标悬停显示文字

  • width：图片宽度

  • height：图片高度

  • alt：图片未加载显示信息

  <img src="011.jpg" title="希望在田野" width=“100px” height=“200px” alt=“此处有一张田野照片”/>
  ​
  需求：加载img/001.jpg
  路径：
      1、相对路径：“相对当前执行文件的所在位置作为起点”
              上一级：../
              同级：./
      2、绝对路径：不推荐

  换行与空格

  • 换行：

  • 空格：&nbsp

  布局

  • div :大盒子 独占一行

  • span：小盒子 一行可以放多个

  表单标签

  文本框<input type =''text'' />

  换行

  密码框<input type = "password" /> #密码

  单选框<input type ="radio"/>男 #单选

  单选框<input type ="radio" />女 #单选

  复选框<input type ="checkbox"/>学习 #复选框

  提交按钮<input type ="submit" /> #提交

  重置按钮<input type ="reset" /> #重置

  按钮<input type ="button" value ="点我试试" />

  按钮的测试点：

  • 统一使用value进行赋值

  • 提示：普通按钮没有执行效果，需要配合js来实现

  ​

   #密码

  ​

  <input type ="radio"/>男 #单选

  <input type ="radio" />女 #单选

  <input type ="checkbox"/>学习 #复选框

  <input type ="submit" /> #提交

  <input type ="reset" /> #重置

  <input type ="button" value ="点我试试" /> </form>

  form标签中

  ​​

  action：指定将数据提交到那个页面

  methon：提交参数的方法有（get、post）

  get：查询使用

  1. 参数url明文显示

  2. 提交速度快

  3. 提交参数有长度有限制

  post：提交数据、登录、注册

  1. 非明文显示

  2. 提交速度快

  3. 提交参数的长度无限制

  列表

• li标签

• 有序 ol

• 无序 ul