HTML简单认识

标签:
开始标签: <html> 结束标签: <html> 
这个标签是最顶层的标签,并且大部分的html标签,是开始和结束成对出现的

<head> </head> 用来存放html的一些属性信息,或者引用的外部资源(css,js,图片)
head一般不会影响到页面的界面显示.

<body> </body> 存放界面上要显示的内容

html中的标签有很多,不同的标签表示的意义也不同.(也有些标签本质上没啥区别)

<title>表示页面的标题

<body> </body> 用来表示需要显示的正文

<div> 默认独占一行(块级元素)
<spanp> 默认不独占一行(内联元素)
但是都可以借助CSS来修改,其他的html标签大多都可以归类到这两类中.

<a> 表示链接(link),一点击就能跳转到某个页面.
通过href属性告知要跳到哪里去~~

<p> 标签最初表示一个段落,但是p和div之间,实在没啥区别~(默认的样式不一样)

<image> 通过src属性来指定图片资源的地址.
如果一个页面中带有image标签,浏览器就会自动给服务器再次发起http请求来尝试获取资源.

<form> 表单. 是用户和服务器之间交互的一个重要途径.
表单里允许用户输入一些数据,借助表单能把数据提交到服务器上.

form method="get"action="http://www.sogou.com">
method表示构造的请求的方法是啥  action表示数据提交到哪个服务器上~

<input type="text"placeholder="请输入姓名"name="username">
<input type="text"placeholder="请输入密码"name="password">

form是把输入框中的数据以键值对的方式提交给指定服务器.
指定服务器的地址通过action字段来决定方法通过method字段决定
url中的参数的key就是input标签的name属性决定的.
url中的参数的value就是用户在输入框中输入的.

method改成post之后,浏览器通过form就是给服务器发送了post请求.
<html>
<head>
    <title> 这是一个标题 </title>
    <meta charset="UTF-8">
<head>
<body>
<image src="//i0.hdslb.com/bfs/archive/22650682fd25a4a5aa96dd9ef53190c6b8d54912.png"></image>
<div style = "margin-bottom: 10px"> 下午好 </div>
<div style = "margin-bottom: 10px"><a href="https://www.dogedoge.com/">点击搜索</a></div>

<form method="get" action="https://www.bilibili.com/">
    <div style = "margin-bottom: 10px"><input type="text", placeholder="请输入姓名" name="uesename"></div>
    <div  style = "margin-bottom: 10px"><input type="password", placeholder="请输入密码" name="password"></div>
    <div style = "margin-bottom: 10px"><input type="submit", value="提交"></div>
</form>
</body>
</html>

补充:
按f12开开发者工具

在这里插入图片描述
谷歌浏览器中的开发者工具:
在这里插入图片描述
看到的body的黄色的边,叫做margin,是body这个矩形的外边距.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值