day04 HTML简介

今日⽬标

能够说出常⻅的html标签的作⽤

1. html介绍

1.1 前端三⼤核⼼

html:超⽂本标记语⾔，由⼀套标记标签组成
- 标签：
  - 单标签： <标签名 />
  - 双标签: <标签名></标签名>
  - 属性：描述某⼀特征示例: <a 属性名= “属性值”

1.2 html⻣架标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Daisy</title>
</head>
<body>
    编写代码区域
</body>
</html>

html:根标签，所有的内容都应该放到html标签中
head：头部标签
body:身体标签（代码编写区域）

1.3 注释

作⽤：描述的内容不会被浏览器执⾏
说明：解析程序给程序员看
快捷键：ctrl+/
测试点：前端⻚⾯上线之前检查注释描述或去除注释

1.4 标签

标题：h1~h6
说明：h1最⼤，h6最⼩

<h1>我是h1</h1>
<h6>我是h6</h6>

段落：p
特点：语义化、独占⼀块（换⾏）

<p>我是段落</p>

超链接 a
说明：点击⽂本跳转到指定⻚⾯
语法： <a href="https://www.baidu.com">文本</a>
属性：
- href：跳转的地址或⽂件
- target: 打开窗⼝模式。新窗⼝：target="_blank"

图⽚
说明：在⻚⾯中插⼊⼀张图⽚
测试点：必须有title属性（悬停和未加载显示）

<!-
    图像标签：img
    属性：
    src:图⽚路径
    title：悬停显示⽂字
    width:宽100px   px:像素
    height:⾼ 
    alt:图⽚未加载显示
-->

<img src="011.jpg" title="希望在⽥野" width="100px" height="200px" 
alt="此处有⼀张⽥野照⽚"/>

空格与换⾏
- 空格： 
- 换⾏：<br />
布局标签

布局：设置⻚⾯布局，便于排版

- ⼤盒⼦：div、独占⼀⾏
- ⼩盒⼦：span、⼀⾏可以放多个

列表

script: js标签
style: css标签
link: 外部加载css标签

input标签
⽂本框：<input type="text" />
密码框：<input type="password" />
单选按钮：
复选框：
按钮：
- 普通：type=button
- 提交：type=submit
- 重置: type=reset

<!--
    按钮测试点：统⼀使⽤value进⾏赋值
    提示：普通按钮默认没有执⾏效果，需要配合Js来实现。
-->

form标签
作⽤：提交⻚⾯输⼊的数据到指定⻚⾯或后台

<!--
form
作⽤：将⻚⾯输⼊的数据提交到后台或指定⻚⾯
属性：
action：指定将数据提交到那个⻚⾯。
method:提交参数的⽅法（get、post）
get:查询使⽤
    1、参数url 明⽂显示
    2、提交速度快
    3、提交参数有⻓度限制
post:提交数据、登录、注册
    1、非明文显示
    2、提交速度慢
    3、提交参数的长度无限制
-->

<form action="10-接受数据.html" method="get">
      ⽤户名：<input type="text" name="username"/>
      <br />
      密码框：<input type="password" name="password"/>
      <br />
      <!-
        单选效果：
          1、相同⼀组的radio才能做单选。
          2、设置相同（组名）name属性值为⼀组。
      -->
      性别：
      <input type="radio" name="one"/>男
      <input type="radio" name="one"/>⼥
      <br />
      您的爱好：
      <input type="checkbox" />挣钱
      <input type="checkbox" />吃饭
      <input type="checkbox" />欣赏美
      <input type="checkbox" />个⼈发挥
      <br />
      <input type="submit" />
      <input type="reset" />
      <input type="button" value="点我试试"/>
    </form>