一、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

4.2 排版标签

1.注释 <!-- 注释的代码 – > 快捷键 ctrl+shift+/
2.换行标签:单个标签 < br/>
3.段落标签:< p>< /p>
4.水平线:单个标签 < hr/>
属性:
width 宽度
color 颜色
size 粗细
align 对齐方式 left 左 center 居中 right 右
5.注意点:
A.color 1.颜色值可以使用颜色的单词来进行设置 red white 2.使用颜色的十六进制来表示
B.width 1.设置宽度可以使用百分比(不用适配) 2.设置宽度的使用像素点 px

4.3 字体的标签

1.标签名字 < font>< /font>
2.属性:
size 字体的大小
color 字体的颜色
face 字体的类型
3.大字体标签 < big> < /big>
4.小字体标签 < small>< /small>
5.上标标签 < sup>< /sup>
6.下标标签 < sub>< /sub>
7.删除标签:< del>< /del> 即~~字体中间有横线~~

4.4 加粗与斜体

1.加粗:< b>< /b> < strong>< /strong>
2.斜体:< em>< /em>< i>< /i>

4.5标题标签

1.标题标签:< h1>…< /h1> < h6>…< /h6>
2.特点:字体逐渐变小

4.6 图像标签

1.标签的名称单个标签
2.属性:
src 表示的图片的路径
width 图片的宽度
height 图片的高度
title 鼠标移入图片的提示信息
alt 表示图片加载错误的文件提示信息

4.7 超链接标签

1.标签的名称:< a>< /a>
2.属性:
href 表示跳转的路径可以跳转到本地的项目页可以跳转到第三方的其它项目
trget 页面的打开的方式
_blank 新建一个窗口打开页面
_self 在当前窗口打开页面

4.8 列表

4.8.1 无序列表
1.< ul>< li>< /li>< ul>
2.解释:
< ul> 表示的是无序列表
< li> 表示的是无序列表的每一个条目
3.属性
type 设置列表的前缀
circle 空心圆圈
disc 实心圆圈
square 实心方块
不写默认是实心圆圈
4.8.2 有序列表
1.< ol>< li>< /li>< ol>
2.解释:
< ol> 表示就是有序列表
< li> 表示的是有序列表的条目
3.属性: type 设置列表的前缀
1,a,A,i(ii,iii),I(希腊数字) 不写默认为1
4.8.3 定义列表
1.标签的名称:< dl> < dt> < dd>
2.解释
< dl> 表示的就是定义列表
< dt> 表示的是定义列表的分类
< dd> 表示的是定义列表分类的条目

4.9 表格

1.表格行列表头
2.标签的名称 < table> 表格 < tr> 行 < td> 单元格 < th>表头
3.属性:

cellspacing 边框与边框之间的间距 cellpadding 边框与内容之间的间距 colapan 跨列（合并列） rowspan 跨行（合并行）

4.10 表单

使用场景
A.大部分网站的注册界面以及登录
B.需要向服务器提供数据
组成部分
1.form容器
action 表单提交的地址本页面转为指定网址或页面网址要完整加上https://
method 提交的方式
get 明文进行提交数据是不安全的提交数据是有长度限制不能超过4kb 用于做下载
post 密文进行提交数据安全的提供数据是没有长度限制用于提交数据
enctype 表示提交的数据的类型
application/x-www-form-urlencoded 以普通的文本进行提交
multipart/form-data 支持文件进行提交

4.10.1.输入框和按钮

1.不同的输入框只需要设置不同的type属性值
都是<input type=" " /> 类型为按钮时 input 等同于button <button type=" "></button>
2.常见的type属性值

效果

4.10.2 input 属性

效果
intput type 默认text placeholder=“请输入名称” 是输入框的默认提示信息用户无法更改
name 和value 区别
name value 会在页面网址后面添加提交的内容 只有设置了name属性值才能将数据传给服务器，有些类型submit 等的input 有默认的name
name是表单元素名字 ,标签在服务器的名称，可重复
单选/多选按钮必须拥有相同的名字name 才可以进行成组单选/多选
input 的value 一般是该标签的默认的显示值按钮上显示的文本输入框里的显示值
value 是用户输入/选择的值可有用户更改
用户输入结束后将值传给服务器的name
name相当于是一个变量名，value相当于是一个变量的值，在JS中以及向网站后端传送参数时，与value一起用，比如name是“color”，value是“red”，那么就会有参数color=“red”。

checked 是单/多选按钮默认值，未选为false 选中为ture

4.11 下拉框

1.标签:< select> < option> < /option> < /select>
2.解释:
< select> 表示的是下拉框
< option> 表示是下拉框的条目
3.属性:selected 表示默认选中的条目

4.12 文本域

1.标签的名称:textarea
2.属性:cols 跨列 rows 跨行

4.13 frameset

1.frameset 是前端的一个框架主要是将多个界面组合成一个界面
2.使用frname 的src来填充界面
3.frameset 上下进行平分(跨行) rows 左右进行平分 clos(跨列)
4.注意点:
A.frameset不能与body同时存在
B.frameset是可以进行嵌套的使用

frameset 主界面代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><!--frameset不能与body同时存在--><frameset rows="20%,80%"><!--上下分--><!--填充上界面--><frame src="上界面.html" /><!--填充下界面 * 表示剩余的部分--><frameset cols="15%,*"><!--下界面在左右分--><!--填充左界面--><frame src="左界面.html" /><!--填充右界面--><!--name 和左界面里的超链接里的target 值对应，  点击链接右界面就会自动跳到（打开）超链接里的网址或页面，不过百度网址拒绝了请求--><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)

div – 常用块级主要标签
dl dt dd– 定义列表
form – 交互表单
h1-h6 – 标题
hr – 水平分隔线
ol ,ul li - 有序、无序列表
p – 段落
pre – 格式化文本
table tr td td – 表格
blockquote – 块引用
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上下无效

前端基础01 html标签总结相关推荐

前端基础HTML-基础标签
前端基础HTML-基础标签 01-标题标签 <h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3>< ...
前端学习之路html基础(01)——常用标签
HTML:是用来描述网页的一种语言 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (mar ...
前端基础-html-换行标签
 <p>前端技术 <br> 一般分 ...
前端基础01：HTML
一.初识HTML 什么是HTML HTML:Hyper Text Markup Language (超文本标记语言) 超文本:文字.图片.音频.视频.动画等. HTML5:提供了一些新的元素和一些有趣 ...
前端基础——双单标签、行内块级元素、路径、常用标签
一.单标签和双标签: 在HTML基础中,单标签就是由一个标签组成的. 例如<br>.<hr>.<img>.<input>.<param>.& ...
前端基础之操作标签—文档处理
一.操作标签 1.文档处理 <1>添加到指定元素内部的后面 $(A).append(B) // 把B追加到A后面 $(B).appendTo(A) // 把B追加到A后面 < ...
前端基础-html-链接标签的介绍
<!-- 链接标签场景:点击之后,从一个页面跳转到另一个页面称呼:a标签.超链接.锚链接代码: <a href="https://www.baidu.com/"& ...
前端基础-html-视频标签的介绍
<!-- 场景:在页面中插入视频代码:<video src="./89bb146d7bfdbdeb58b146202456d50c.mp4"></vide ...
前端基础-html-音频标签的介绍
<!-- 音频标签的介绍场景:在页面中插入音频代码:<audio src="./Eyes Closed.mp3" controls></audio> ...

前端基础01 html标签总结

一、html是什么

二、html能做什么

三 html的特点

四、html的常用标签

4.1结构化标签 body

4.2 排版标签

4.3 字体的标签

4.4 加粗与斜体

4.5标题标签

4.6 图像标签

4.7 超链接标签

4.8 列表

4.9 表格

4.10 表单

4.10.1.输入框和按钮

4.10.2 input 属性

4.11 下拉框

4.12 文本域

4.13 frameset

4.14 div

五、标签元素的分类行块

块元素(block element)

行元素(inline element)

5.1 区别

前端基础01 html标签总结相关推荐

最新文章

热门文章

前端基础01 html标签总结

一、html是什么

二、html能做什么

三 html的特点

四、html的常用标签

4.1结构化标签 body

4.2 排版标签

4.3 字体的标签

4.4 加粗与斜体

4.5标题标签

4.6 图像标签

4.7 超链接标签

4.8 列表

4.9 表格

4.10 表单

4.10.1.输入框 和按钮

4.10.2 input 属性

4.11 下拉框

4.12 文本域

4.13 frameset

4.14 div

五、标签元素的分类 行 块

块元素(block element)

行元素(inline element)

5.1 区别

前端基础01 html标签总结相关推荐

最新文章

热门文章

4.10.1.输入框和按钮

五、标签元素的分类行块