前端——html（基础）

最新推荐文章于 2023-05-25 14:06:34 发布

归彦

最新推荐文章于 2023-05-25 14:06:34 发布

阅读量1.2k

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/weixin_45851945/article/details/115184887

版权

双标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一级标题</h1>
</body>
</html>

单标签

/在后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签</title>
</head>
<body>
    <!-- 单标签 -->
    <hr/>
</body>
</html>

标签的级别

J3 -
容器级别、文本级别

文本级别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签</title>
</head>
<body>
    <p>我是p标签58+*/--==；嚄435%%￥#@%……</p>
    <span>我是span标签</span>
</body>
</html>

J3 -
a、p、span、img、表单元素
只能插入文字或者其他级别的文本标签（不要同一标签嵌套）否则将来学习样式的时候网页的布局会受到影响

容器级别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签</title>
</head>
<body>
    <h1>
        我是文字
        <p>
            这是文字
        </p>
    </h1>
</body>
</html>

J3 -
div、hl、dl、dt、dd、ul、ol、li等
网页显示内容部分，可以插入任意内容（文字、文本级别的标签、其他级别的容器标签），或其他级别的标签

标签的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <!-- 属性   属性值 -->
    <h1 class="box1">
    </h1>
</body>
</html>

J3 -
属性由属性名和属性值两部分组成，标签的属性可能对于整个网页有影响，也可能对一个标签有影响
注意：标签名字和属性之间有一个空格、一个属性可以有多个属性值、一个标签可以有多个属性（属性与属性之间得有空格）
标签与标签之间对于换行和空格是不敏感的，但是为了美观，我们尽量换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

p标签

J3 -
paragraph 段落文本标签只能放文本级别的标签，不能放容器标签，以及自己嵌套（容易出错）

img标签

J3 -
单标签
image 图片、图像可以在网页中显示图片，把他当做本文标签使用即可
属性
src：source 资源，设置图片显示的文件路径
width 宽
height 高
title 标题主要的作用是当用户的鼠标移动到图片上的提示文字
border 边框主要设置图片的外层宽度
alt 当图片没有图像的时候，用文字进行替代

a标签

J3 -
双标签文本标签
anchor 锚
俗称超链接，可以实现不用网页的跳转，或同一网页中不同位置进行跳转
属性
href：路径
title：鼠标移上去提示的文字

列表

J3 -
有一个黑色容器，容器中有一项一项小表展示网页内容
列表会将结构相同、内容相关、样式类似的结构，可以用列表来搭建
web领域：无序列表，有序列表，定义列表

无序列表

J3 -
在网页中搭建一个没有顺序的列表
两个标签结合使用ul和li，li标签不能脱离ul、单独使用
ul：UNorder list 表示一个列表的容器（大结构）
li：list item item（项）

有序列表

J3 -
在网页中搭建一个有顺序的列表
两个标签结合使用ol和li，li标签不能脱离ul、单独使用
ol order list

定义列表

J3 -
自定义标题和列表
有时候需要三个标签一起使用dl、dt、dd
dl：definition list 定义最外层的大结构
dt：definition item 拜师列表主题或者术语
dd：definition description 对于主题术语的描述
dl标签和dt、dd标签嵌套使用（父子关系） dt和dd（兄弟关系）

布局标签

J3 -
div和span
俗称盒子，双标签，容器标签
div：division 区域，跨度、分割
划分页面区域，辅助布局（可以将一些内容相识）
span：小区域，小跨度文本标签
可以用于局部调整

表格

J3 -
至少需要三个标签能弄成一个表格
table：表格 ——最外成的大框架
tr table row 表格的行定义表格内部的行
td table dock 表格单元格，每一行中的单元格
嵌套关系
table——tr——td

表单元素

可以让用户输入文字的一个小控件

form

J3 - 白起
双闭合标签
不是一个结构性的标签，是一个功能性的标签，可以将表单元素收集到的数据提供给服务器（后台），所有的表单元素都得书写在form标签的里面
作用：可以设置收集到的数据提交给谁，设置提交数据的方式
这个标签有两个重要属性
method：方法设置提交数据的方式（get post）
action：动作设置收集到的表单数据提交给谁（路径）
form 表单

input

J3 - 白起
单标签（只有开始没有结束）相当于一个特殊的文字
input有一个非常重要的属性type，根据不同的type值，去创建不同类型的表单元素
如果表单元素type的属性值为text，会创建一个文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
<form>
    <input type="text">
</form>
</body>
</html>

J3 - 白起
input标签还有一个常用的属性value，可以设置文本框默认的数值，属性值可以是任意的字符

密码框

J3 - 白起
可以通过input标签获取到
只需要将type类型设置为password

在这里插入图片描述
效果：

单选框

J3 - 白起
也是通过input获取，type属性值为radio
radio 录音机
单选框都是成组出现，多个选项之间是互斥的

在这里插入图片描述

J3 - 白起
设置单选按钮互斥的方法：同时给这组单选按钮添加一个name的属性，属性值要一样

在这里插入图片描述

复选框

J3 - 白起
也是通过input获取，type属性值为checkbox
checkbox：多选、复选

在这里插入图片描述

J3 -
如果想要默认选中，可以给这个表单元素设置checked属性，属性值就是它自己

在这里插入图片描述

按钮

J3 -
input获取
type不同
button：普通按钮
reset ：重置按钮，单击后，form标签内的全部表单元素恢复初始值
submit：提交按钮单击后，将form的内容给服务器，form标签内的全部表单元素恢复初始值

在这里插入图片描述

文本域

J3 -
最开始讲得一个文本框,只能给用户提供输入一行文字的地方而文本域可以输入多行文字
常用属性 rows，cols，可以修改文本域的大小，在标签内部写上文字就可以默认的显示出来

下拉菜单

J3 -
需要两个标签结合使用select、option嵌套关系select——option
两者都是双标签、文本标签
select 下拉菜单整体的结构
option 选项下拉菜单当中的每一项

在这里插入图片描述
如果想要有默认值，则得给option添加一个select属性，属性值为select

特殊含义的字符

J3 -
空格 &nbsp
<> &gt
版本符号 &copy

归彦

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
前端——html（基础）

双标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1&gt
复制链接

扫一扫