html标签
HTML介绍
1、web前端三大核心技术:
HTML:负责网页的架构(即将内容在HTML中显示);
CSS:负责网页的样式、美化(即文字颜色背景都可进行美化,美化页面的内容);
JS:负责网页的行为。
2、HTML是一种用来描述网页的语言。
3、HTML标签:单标签 双标签内容
4、标签属性:属性格式(属性名=“属性值”)
HTML骨架
骨架标签:
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
hello world!
</body>
</html>
页面主题内容必须在body中编写;
html为根标签,所有的标签必须在根标签中;
html标签为头部标签,一般放title和搜索相关。
注释快捷键:ctrl+/
HTML常用标签
标题标签
html标题标签是通过
-
来进行定义;
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
通过h的不同等级来控制字体的大小,h1最大。
段落标签
html段落是通过
标签进行定义的。
<body>
<p>第一个段落</p>
<p>另一个段落</p>
</body>
p标签独占一行;做换行使用。
超链接标签
超链接标签是通过标签进行定义的。
<body>
<a href="http://www.baidu.com" target="_blank">点我去百度</a>
</body>
属性:
href:跳转地址;
target:新窗口打开。默认为_blank;【_blank:在新窗口打开;】
**注意:**当访问的不是本地网址时,必须加上协议http://
图片标签
作用:往网页中插入图片,html中的图片是通过标签进行定义的。
<body>
<img src="logo.jpg" title="传智博客" alt="logo" width="104" height="142"/>
</body>
img标签是单标签
img标签属性:
src:加载图片的路径;【当不在一个文件夹时,上一级:“…/”】,同级:“./”(也可以忽略这个点)。
alt:当图片加载不出来的时候,就会显示该属性;
title:图片加载可以用鼠标悬停显示;图片加载失败时,显示信息(但是优先级低于alt属性)。
换行与空格
换行:
空格:
布局标签
常用div(大盒子,独占一行)、span(小盒子,一行多个)
div相当于一个容器。
表单标签(输入框和按钮)
页面提交输入信息需要使用表单标签 。
input标签
type属性值不同:(text)文本框、(password)密码框、(radio)单选按钮【如何做到单选?默认情况相同的一组才能单选,相同的name值为一组 】、(checkbox)复选框、(button)按钮【value=“按钮名称”】
下拉框:select标签中间嵌套option标签
textarea标签:可以超出时,可以自动加滚动条。【cols:列,默认的宽度;rows:行,默认的高】
form标签
相当于一张纸,其作用就是提交页面输入数据。
属性:
action:将数据提交到那个页面;
method:
get:参数在url中显示;速度相对于post快;提交内容长度有限制;【查询使用】
post: 不在url中显示;速度相对于post慢;提交内容长度无限制;【提交数据使用(登录、注册)】
列表标签li
列表标签常用li元素(有序ol和无序ul)。
<body>
<!--1、有序列表-->
<ol>
<li>北京</li>
<li>上海</li>
</ol>
<!--2、无序列表-->
<ul>
<li>测试</li>
<li>开发</li>
</ul>
</body>
其他常用标签
1、
2、
3、
抓包
抓客户端向服务器发送的数据包以及服务器向客户端响应的数据包。