前端基础01 html标签总结

一、html是什么

在这里插入图片描述
A.HTML是超文本标记语言
B.文本:txt文本 只能用于存放文字或者是字符
C.超文本:不仅可以用于来描述文字 还可以用于来描述图像 音频 视频 超链接
D.标记:类似java中的关键字(给HTML中的标签一些预定义的含义)
E.人与计算机进行交互的桥梁

二、html能做什么

1.HTML是用于来做前端页面 一个网站的主体的部分 所有的网站都需要使用HTML标签来进行修饰
2.前端三大剑客
HTML:是一个网站的主体部分 静态的网站(没有化妆的女朋友)
CSS:主要用于来美化网站 静态的网站 (化妆后的女朋友)
JS:动效(动画与效果) 用于前后端来进行交互

三 html的特点

1.文件的后缀名是 .HTML 或者是HTM来结尾
2.HTML中标签是不区别大小写的 建议使用小写
3.HTML中标签可能是存在的属性 属性编写的语法: 属性名=“属性值”
4.HTML中的标签都是成对出现 但是也有特殊的单个标签(只有结束标签)
5.HTML中的标签都必须正确进行嵌套

四、html的常用标签

4.1结构化标签 body

前端基础01 html标签总结_第1张图片

4.2 排版标签

1.注释 <frameset rows="20%,80%"> <frame src="上界面.html" /> <frameset cols="15%,*"> <frame src="左界面.html" /> <frame src="右界面.html" name="kk" /> frameset> frameset> html>

左界面

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<ul>
			<li><a href="https://www.baidu.com" target="kk">商品管理a>li>
			<li><a href="订单管理.html" target="kk">订单管理a>li>
		ul>
	body>
html>

右界面

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<h1>我是有界面啊啊啊啊啊啊啊啊啊h1>
	body>
html>

上界面

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<img src="img/top_100.jpg" width="100%" />
	body>
html>

商品管理

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<h1>商品管理啊啊啊啊啊啊啊啊啊啊啊h1>
	body>
html>

订单管理

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<h1>订单管理啊啊啊啊啊啊啊啊啊啊h1>
	body>
html>

4.14 div

在这里插入图片描述
1.div一般需要与css进行搭配的使用
2.大部分的网站都使用div来进行模块化开发
3.div是块状元素 不根据内容来进行填充 独占一行

五、标签元素的分类 行 块

块元素(block element)

  1. div – 常用块级主要标签
  2. dl dt dd– 定义列表
  3. form – 交互表单
  4. h1-h6 – 标题
  5. hr – 水平分隔线
  6. ol ,ul li - 有序、无序列表
  7. p – 段落
  8. pre – 格式化文本
  9. table tr td td – 表格
  10. blockquote – 块引用
  11. address - 地址

行元素(inline element)

1 . a – 超链接
2. br – 换行
3. img – 图片
4. input – 输入框
5. select – 项目选择下拉框
6. span – 常用内联容器,定义文本内区块 等同于font
7. textarea – 多行文本输入框
8. var – 定义变量
9. 文本格式化元素 对字体操作 加粗: < b>< /b> < strong>< /strong>
斜体:< em>< /em>< i>< /i> sub – 下标 sup – 上标 big-大字体 small-小字体 font-字体
注意:h1~h6是块级元素
10.label – 表格标签
11.q – 短引用

5.1 区别

在这里插入图片描述
行级元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

你可能感兴趣的:(前端基础篇,html,html5)